@charset "UTF-8";

/* recipe
---------------------------------------------------------------------------*/
.page-title {
	margin-bottom: 40px;
}

.sec-lead {
	margin-bottom: 150px;
}

.recipe-wrap {
	box-sizing: border-box;
	background-color: #FCF6E5;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}

.recipe-wrap > div {
	transform: translateY(-80px);
}


/* .recipe-list
---------------------------------------------------------------------------*/
.recipe-list {
	width: 1152px;
	margin: 0 auto;
}

.recipe-list article {
	position: relative;
	float: left;
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 10px;
	width: 364px;
	margin: 60px 30px 0 0;
}

.recipe-list article:nth-of-type(1),
.recipe-list article:nth-of-type(2),
.recipe-list article:nth-of-type(3) {
	margin-top: 0;
}

.recipe-list article:nth-of-type(3n) {
	margin-right: 0;
}

.recipe-list .new-txt {
	display: block;
	position: absolute;
	top: 80px;
	left: -55px;
	width: 75px;
	height: 153px;
	transform-origin: right bottom;
	z-index: -1;
	opacity: 0;
}

.recipe-list .new-txt .txt {
	display: block;
	transform-origin: right bottom;
	opacity: 0;
}

.recipe-list .new-txt .img {
	display: block;
	position: absolute;
	bottom: -4px;
	left: 7px;
	width: 72px;
	height: auto;
	transform: rotate(-23deg);
}

.recipe-list .new-txt .img img {
	width: 100%;
	height: auto;
}

.recipe-list article a {
	display: block;
	padding: 15px;
	transition: none;
}

.recipe-list article:first-of-type a,
.recipe-list article a:hover {
	border-image: url(../img/share/border-dot-red-l.svg) 16 round;
	border-style: solid;
	border-width: 15px;
	padding: 0;
}

.recipe-list article a:hover {
	transition: .15s ease-out;
	opacity: 1;
}

.recipe-list .update {
	display: none;
	position: absolute;
	top: -32px;
	left: 6px;
	box-sizing: border-box;
	background: url(../img/recipe/txt-update.svg) no-repeat;
	background-size: 158px 39px;
	width: 158px;
	height: 39px;
	padding: 14px 0 0 14px;
	color: #FFFFFF;
	font-size: 13px;
	letter-spacing: 0.08em;
	z-index: 2;
}

.recipe-list article:first-of-type .update {
	display: block;
}

.recipe-list figure {
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	width: 100%;
	margin-bottom: 20px;
	padding-bottom: 65.26%;
}

.recipe-list figure img {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%,-50%);
}

.recipe-list .inner {
	position: relative;
	padding: 0 65px 12px 15px;
}

.recipe-list .inner:after {
	display: block;
	content: '';
	position: absolute;
	top: 12px;
	right: 15px;
	background: url(../img/share/ico-arrow-down.svg) no-repeat;
	background-size: 37px 37px;
	width: 37px;
	height: 37px;
	transform: rotate(-90deg);
}

.recipe-list h2 {
	margin-bottom: 8px;
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: 0.1em;
}

.recipe-list h3 {
	color: #E60013;
	font-size: 13px;
	letter-spacing: 0.1em;
}

/* .bnr
------------------------------------*/
.recipe-list .bnr {
	background: none;
}

.recipe-list .bnr:before {
	display: block;
	content: '';
	position: absolute;
	top: -25px;
	left: -20px;
	background: url(../img/share/parts-star.svg) no-repeat;
	background-size: 100% auto;
	width: 40px;
	height: 40px;
}

.recipe-list .bnr:after {
	display: block;
	content: '';
	position: absolute;
	top: -12px;
	right: -20px;
	background: url(../img/share/parts-star.svg) no-repeat;
	background-size: 100% auto;
	width: 29px;
	height: 27px;
	transform: scaleX(-1) rotate(-30deg);
}

.recipe-list .bnr a {
	position: relative;
	padding: 0;
}

.recipe-list .bnr a:before {
	display: block;
	content: '';
	position: absolute;
	bottom: 72px;
	left: -10px;
	background: url(../img/recipe/bnr-tomato-left.svg) no-repeat;
	background-size: 100% auto;
	width: 46px;
	height: 60px;
}

.recipe-list .bnr a:after {
	display: block;
	content: '';
	position: absolute;
	bottom: 92px;
	right: -10px;
	background: url(../img/share/tomato-face.png) no-repeat;
	background-size: 100% auto;
	width: 52px;
	height: 58px;
	transform: rotate(10deg);
}

.recipe-list .bnr a:hover {
	opacity: 0.7;
}

.recipe-list .bnr img {
	border-radius: 10px;
}


/* recipe single
---------------------------------------------------------------------------*/
.single .recipe-wrap {
	margin-top: 320px;
}

.recipe-inner {
	width: 1118px;
	margin: 0 auto;
}

/* .post
------------------------------------*/
.post {
	position: relative;
	float: left;
	width: 690px;
}

.post h1 {
	display: inline-block;
	position: absolute;
	top: -160px;
	left: 50%;
	text-align: center;
	transform: translateX(-50%);
}

.post h1:after {
	display: block;
	content: '';
	position: absolute;
	top: -60px;
	right: -210px;
	background: url(../img/share/tomato-face.png) no-repeat;
	background-size: 105px auto;
	width: 105px;
	height: 119px;
	transform: rotate(30deg);
}

.post h1 > div {
	position: relative;
}

.post h1 > div:before,
.post h1 > div:after {
	display: block;
	content: '';
	position: absolute;
}

.post h1 > div:before {
	background-image: url(../img/recipe/parts-title-left.svg);
	top: -6px;
	left: -65px;
	width: 33px;
	height: 81px;
}

.post h1 > div:after {
	background-image: url(../img/recipe/parts-title-right.svg);
	top: -14px;
	right: -65px;
	width: 39px;
	height: 93px;
}

.post h1 em {
	display: block;
	margin-bottom: 10px;
}

.post h1 strong {
	display: block;
	position: relative;
	color: #006C3E;
	font-size: 32px;
	line-height: 1.5;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.post h1 .tomato {
	position: absolute;
	top: 0;
	right: 0;
	width: 105px;
	height: auto;
	transform: rotate(45deg);
}

.post section h2 {
	position: relative;
	margin-bottom: 50px;
}

.post section h2:before {
	display: block;
	content: '';
	position: absolute;
	top: -6px;
	left: -42px;
	background: url(../img/share/tomato.png) no-repeat;
	background-size: 100% auto;
	width: 29px;
	height: 32px;
}

.post section h2 strong {
	display: block;
	margin-bottom: 15px;
}

.post section h2 em {
	display: block;
	font-size: 0;
}

.img-top {
	margin-bottom: 70px;
}

.img-top img,
.finish figure img {
	border-radius: 15px;
}

/* .sec-ingredient
------------------------------------*/
.sec-ingredient {
	position: relative;
	margin-bottom: 100px;
	padding-left: 210px;
	
}

.sec-ingredient h2 {
	position: absolute !important;
	top: 0;
	left: 0;
}

.sec-ingredient .box-green {
	box-shadow: 3px 3px 0 #006C3E;
	padding: 24px 32px 26px 32px;
	border-radius: 7px;
}

.sec-ingredient .box-green dl > div {
	overflow: hidden;
	position: relative;
	margin-bottom: 12px;
}

.sec-ingredient .box-green dl > div:last-of-type {
	margin-bottom: 0;
}

.sec-ingredient .box-green dl > div:after {
	display: block;
	content: '';
	position: absolute;
	top: 13px;
	left: 0;
	background: url(../img/share/border-dot-line.svg) repeat-x left top;
	width: 100%;
	height: 2px;
	z-index: 0;
}

.sec-ingredient .box-green dt,
.sec-ingredient .box-green dd {
	position: relative;
	display: inline-block;
	color: #006C3E;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0.1em;
	z-index: 1;
}

.sec-ingredient .box-green dt:after,
.sec-ingredient .box-green dd:after {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-color: #FFFFFF;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.sec-ingredient .box-green dt {
	float: left;
	text-align: left;
	padding-right: 10px;
}

.sec-ingredient .box-green dd {
	float: right;
	text-align: right;
	padding-left: 10px;
}

/* .sec-step
------------------------------------*/
.sec-step {
	position: relative;
	margin-bottom: 80px;
}

.sec-step .time {
	position: absolute;
	top: 0;
	right: 0;
	background-color: #006C3E;
	border-radius: 20px;
	padding: 7px 11px 8px 15px;
	color: #FFFFFF;
	letter-spacing: 0.1em;
}

.step-list {
	margin: 0 0 65px 45px;
}

.step-list li {
	position: relative;
	background: url(../img/share/border-dot-line.svg) repeat-x left bottom;
	background-size: 6px 2px;
	margin-bottom: 23px;
	padding: 0 0 7px 6px;
	color: #006C3E;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.08em;
}

.step-list li:last-of-type {
	margin-bottom: 0;
}

.step-list li:before {
	display: block;
	content: '';
	position: absolute;
	top: -4px;
	left: -50px;
	background-position: left top;
	background-repeat: no-repeat;
	width: 39px;
	height: 39px;
}

.step-list li:nth-of-type(1):before { background-image: url(../img/share/ico-num1.svg); }
.step-list li:nth-of-type(2):before { background-image: url(../img/share/ico-num2.svg); }
.step-list li:nth-of-type(3):before { background-image: url(../img/share/ico-num3.svg); }
.step-list li:nth-of-type(4):before { background-image: url(../img/share/ico-num4.svg); }
.step-list li:nth-of-type(5):before { background-image: url(../img/share/ico-num5.svg); }
.step-list li:nth-of-type(6):before { background-image: url(../img/share/ico-num6.svg); }
.step-list li:nth-of-type(7):before { background-image: url(../img/share/ico-num7.svg); }
.step-list li:nth-of-type(8):before { background-image: url(../img/share/ico-num8.svg); }
.step-list li:nth-of-type(9):before { background-image: url(../img/share/ico-num9.svg); }

/* .point
------------------------------------*/
.point {
	position: relative;
	border-image: url(../img/share/border-dot-l.svg) 24 round;
  border-style: solid;
  border-width: 24px;
}

.point:before {
	display: block;
	content: '';
	position: absolute;
	bottom: -10px;
	left: -79px;
	background: url(../img/recipe/tomato-point@2x.png) no-repeat;
	background-size: 100% auto;
	width: 70px;
	height: 138px;
	z-index: -1;
}

.point h3 {
	position: absolute;
	top: -45px;
	left: -5px;
}

.point-list {
	background-color: #FFFFFF;
	padding: 10px 0 5px 10px;
}

.point-list li {
	position: relative;
	margin-bottom: 5px;
	padding-left: 15px;
	color: #006C3E;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.1em;
	list-style: none;
}

.point-list li:last-of-type {
	margin-bottom: 0;
}

.point-list li:before {
	display: block;
	content: '';
	position: absolute;
	top: 10px;
	left: 0;
	background-color: #006C3E;
	border-radius: 50%;
	width: 4px;
	height: 4px;
}

/* .finish
------------------------------------*/
.finish {
	position: relative;
	margin-bottom: 45px;
}

.finish:before {
	display: block;
	content: '';
	position: absolute;
	bottom: 10px;
	left: -52px;
	background: url(../img/share/tomato-face.png) no-repeat;
	background-size: 100% auto;
	width: 72px;
	height: 81px;
	transform: rotate(-34deg);
	z-index: -1;
}

.finish h2 {
	position: relative;
	margin-bottom: -30px;
	text-align: center;
	z-index: 1;
}

.finish figure {
	position: relative;
	z-index: 0;
}

.finish .txt-share {
	position: absolute;
	bottom: 28px;
	left: 11px;
}

/* .share
------------------------------------*/
.share li {
	float: left;
	margin-right: 18px;
}

.share li:last-of-type {
	margin-right: 0;
}


/* aside
---------------------------------------------------------------------------*/
aside {
	position: relative;
	float: right;
	background-color: #FFFFFF;
	border: 1px solid #006C3E;
	border-radius: 14px;
	width: 344px;
	padding: 20px 5px 30px;
}

aside h2.box-green {
	display: inline-block;
	position: absolute;
	top: -85px;
	left: 50%;
	transform: translateX(-50%);
	padding: 12px 20px 13px;
	box-shadow: 3px 3px 0 #006C3E;
	white-space: nowrap;
}

aside h2.box-green:after {
	display: block;
	content: '';
	position: absolute;
	bottom: -37px;
	left: 50%;
	background-color: #006C3E;
	width: 2px;
	height: 37px;
	margin-left: -1px;
}

.recipe-list-s {
	padding: 0 20px;
}

.recipe-list-s .new-txt {
	display: block;
	position: absolute;
	top: -35px;
	left: -76px;
	width: 95px;
	height: 110px;
	transform-origin: right bottom;
	z-index: 0;
	opacity: 0;
}

.recipe-list-s .new-txt .txt {
	display: block;
	transform-origin: right bottom;
	opacity: 0;
}

.recipe-list-s .new-txt .img {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 51px;
	height: auto;
	transform: rotate(-23deg);
}

.recipe-list-s .new-txt .img img {
	width: 100%;
	height: auto;
}

.recipe-list-s article {
	position: relative;
	background: #FFFFFF url(../img/share/border-dot-line.svg) repeat-x left bottom;
	background-size: 7px 3px;
	padding-left: 5px;
	z-index: 1;
}

.recipe-list-s article a {
	display: -webkit-box;
	display: flex;
	padding: 20px 5px 21px 0;
}

.recipe-list-s article a:hover {
	opacity: 1;
}

.recipe-list-s article a figure img,
.recipe-list-s article a .inner {
	transition: .15s ease-out;
}

.recipe-list-s article a:hover figure img,
.recipe-list-s article a:hover .inner {
	opacity: 0.5;
}

.recipe-list-s figure {
	position: relative;
	overflow: hidden;
	background-color: #FFFFFF;
	border: 1px solid #006C3E;
	border-radius: 5px;
	width: 54px;
	min-width: 54px;
	height: 54px;
}

.recipe-list-s figure img {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%,-50%);
}

.recipe-list-s .inner {
	padding: 2px 0 0 17px;
}

.recipe-list-s h2 {
	display: inline-block;
	margin: 0 5px 2px 0;
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: 0.1em;
}

.recipe-list-s .update {
	display: none;
	position: relative;
	border-bottom: 2px solid #FFF101;
	margin-bottom: 3px;
	padding: 0 0 2px 1px;
	font-size: 10px;
	letter-spacing: 0.06em;
	transform: translateY(-2px);
}

.recipe-list-s article:first-of-type .update {
	display: inline-block;
}

.recipe-list-s h3 {
	margin-top: 4px;
	color: #E60013;
	font-size: 13px;
	letter-spacing: 0.1em;
}

.btn-index {
	position: relative;
	box-sizing: border-box;
	background-color: #FFFFFF;
	border: 2px solid #136E40;
	border-radius: 8px;
	width: calc(100% - 40px);
	margin: 32px auto 0;
}

.btn-index .face {
	display: block;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 8px;
	width: 82px;
	height: 72px;
}

.btn-index .face img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

.btn-index a {
	display: block;
	padding: 20px 20px 20px 120px;
}

/* .bnr
------------------------------------*/
aside .bnr {
	width: 334px;
	margin: 105px auto 0;
	transform: translateX(1px);
}

aside .bnr a {
	display: block;
	position: relative;
}

aside .bnr a:hover {
	opacity: 0.7;
}

aside .bnr .txt {
	position: absolute;
	top: -34px;
	left: 50%;
	margin-left: -141px;
}