@charset "utf-8";

/*
	recipe.css
---------------------------------------------------------------------------------------------------------------------------------------------*/
/* hero
--------------------------------------------------------------------------------------------------------*/
#hero .inner {
	padding-bottom: 6.0rem;
}
@media (max-width: 767px) {
	#hero .inner {
		padding-bottom: calc(82 / 750 * 100vw);
	}
}
/* making
--------------------------------------------------------------------------------------------------------*/
#making .inner {
	padding-bottom: 6.5rem;
}
#making .field {
	padding-top: 4.5rem;
}
#making .item:nth-of-type(1) ul:nth-of-type(1),
#making .item:nth-of-type(2) ul:nth-of-type(1) {
	position: relative;
}
#making .item:nth-of-type(2) ul li {
	position: relative;
}
#making .item:nth-of-type(2) ul li::after {
	content: '';
	position: absolute;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
@media (min-width: 768px) {
	#making .inner {
		max-width: 840px;
	}
	#making .item {
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	#making .item:nth-of-type(1) ul:nth-of-type(1)::after,
	#making .item:nth-of-type(2) ul:nth-of-type(1)::after {
		content: '';
		position: absolute;
		top: 50%;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 14px 0 14px 22px;
		border-color: transparent transparent transparent #461913;
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
	}
	#making .item:nth-of-type(1) ul:nth-of-type(1)::after {
		right: -4.5rem;
	}
	#making .item:nth-of-type(1) ul:nth-of-type(1) li:first-child {
		margin-bottom: 2.0rem;
	}
	#making .note {
		margin-top: 1.2rem;
	}
	#making .note img { width: 225px;}
	#making .item:nth-of-type(2) {
		padding-top: 7.0rem;
		padding-bottom: 3rem;
	}
	#making .item:nth-of-type(2) ul:nth-of-type(1)::after {
		right: -1.8rem;
	}
	#making .item:nth-of-type(2) ul:nth-of-type(1) li:nth-of-type(1)::after {
		top: -5.7rem;
		left: -4.2rem;
		width: 89px;
		height: 84px;
		background-image: url(../images/recipe/balloon.png);
	}
	#making .item:nth-of-type(2) ul:nth-of-type(2) li:nth-of-type(1)::after {
		top: -3.6rem;
		right: -4.6rem;
		width: 267px;
		height: 227px;
		background-image: url(../images/recipe/photo.png);
	}
	#making .headline a {
		display: inline-block;
	}
	#making .item:nth-of-type(3) {
		padding-bottom: 7.5rem;
		text-align: center;

	}
}
@media (max-width: 767px) {
	#making .inner {
		padding-bottom: calc(180 / 750 * 100vw);
	}
	#making .field {
		padding-top: calc(75 / 750 * 100vw);
	}
	#making h3 img {
		width: calc(600 / 750 * 100vw);
	}
	#making .item {
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	#making ul li {
		text-align: center;
	}
	#making .item:nth-of-type(1) {
		padding-bottom: calc(140 / 750 * 100vw);
	}
	#making .item:nth-of-type(1) ul:nth-of-type(1) {
		padding-bottom: calc(140 / 750 * 100vw);
	}
	#making .item:nth-of-type(2) {
		padding-bottom: calc(70 / 750 * 100vw);
	}
	#making .item:nth-of-type(2) ul:nth-of-type(1) {
		padding-bottom: calc(160 / 750 * 100vw);
	}
	#making .item:nth-of-type(1) ul:nth-of-type(1)::after,
	#making .item:nth-of-type(2) ul:nth-of-type(1)::after {
		content: '';
		position: absolute;
		left: 50%;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: calc(40 / 750 * 100vw) calc(27 / 750 * 100vw) 0 calc(27 / 750 * 100vw);
		border-color: #461913 transparent transparent transparent;
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
	}
	#making .item:nth-of-type(1) ul:nth-of-type(1)::after { bottom: calc(48 / 750 * 100vw);}
	#making .item:nth-of-type(2) ul:nth-of-type(1)::after { bottom: calc(56 / 750 * 100vw);}

	#making .item:nth-of-type(2) ul:nth-of-type(1) li:nth-of-type(1)::after {
		top: calc(58 / 750 * -100vw);
		right: calc(50 / 750 * 100vw);
		width: calc(152 / 750 * 100vw);
		height: calc(144 / 750 * 100vw);
		background-image: url(../images/recipe/balloon.png);
	}
	#making .item:nth-of-type(2) ul:nth-of-type(2) li:nth-of-type(1)::after {
		top: calc(38 / 750 * -100vw);
		right: calc(12 / 750 * 100vw);
		width: calc(370 / 750 * 100vw);
		height: calc(314 / 750 * 100vw);
		background-image: url(../images/recipe/photo.png);
	}

	#making .item:nth-of-type(1) ul:nth-of-type(1) li:nth-of-type(1) { margin-bottom: calc(35 / 750 * 100vw);}
	#making .item:nth-of-type(1) ul:nth-of-type(1) li:nth-of-type(1) img { width: calc(609 / 750 * 100vw);}
	#making .item:nth-of-type(1) ul:nth-of-type(1) li:nth-of-type(2) { margin-bottom: calc(20 / 750 * 100vw);}
	#making .item:nth-of-type(1) ul:nth-of-type(1) li:nth-of-type(2) img { width: calc(610 / 750 * 100vw);}
	#making .item:nth-of-type(1) ul:nth-of-type(1) li:nth-of-type(3) { text-align: left; padding-left: calc(75 / 750 * 100vw);}
	#making .item:nth-of-type(1) ul:nth-of-type(1) li:nth-of-type(3) img { width: calc(437 / 750 * 100vw);}

	#making .item:nth-of-type(1) ul:nth-of-type(2) li:nth-of-type(1) img { width: calc(614 / 750 * 100vw);}

	#making .item:nth-of-type(2) ul:nth-of-type(1) li:nth-of-type(1) { text-align: right; padding-right: calc(25 / 750 * 100vw);}
	#making .item:nth-of-type(2) ul:nth-of-type(1) li:nth-of-type(1) img { width: calc(662 / 750 * 100vw);}
	#making .item:nth-of-type(2) ul:nth-of-type(2) li:nth-of-type(1) img { width: calc(606 / 750 * 100vw);}

	#making .item:nth-of-type(3) ul:nth-of-type(1) li:nth-of-type(1) { text-align: left; padding-left: calc(50 / 750 * 100vw);; }
	#making .item:nth-of-type(3) ul:nth-of-type(1) li:nth-of-type(1) img { width: calc(624 / 750 * 100vw); }


}

/*
	recipe.css End
---------------------------------------------------------------------------------------------------------------------------------------------*/