@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 li {
	position: relative;
}
@media (min-width: 768px) {
	#making .inner {
		max-width: 870px;
	}
	#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) li:nth-of-type(1)::after {
		content: '';
		position: absolute;
		bottom: -3rem;
		left: 50%;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 22px 14px 0 14px;
		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) li:nth-of-type(2)::after {
		content: '';
		position: absolute;
		top: 50%;
		right: -3.5rem;
		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) li:first-child {
		margin-bottom: 4.5rem;
	}
	#making .item:nth-of-type(2) {
		padding-top: 3.0rem;
		padding-bottom: 4.0rem;
		text-align: center;
	}
}
@media (max-width: 767px) {
	#making .inner {
		padding-bottom: calc(120 / 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(70 / 750 * 100vw);
	}
	#making .item:nth-of-type(1) ul:nth-of-type(1) {
		padding-bottom: calc(150 / 750 * 100vw);
	}
	#making .item:nth-of-type(1) ul:nth-of-type(1) li:nth-of-type(1)::after,
	#making .item:nth-of-type(1) ul:nth-of-type(1) li:nth-of-type(2)::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: calc(-90 / 750 * 100vw);
		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) li:nth-of-type(1) { margin-bottom: calc(150 / 750 * 100vw);}
	#making .item:nth-of-type(1) ul:nth-of-type(1) li:nth-of-type(1) img { width: calc(610 / 750 * 100vw);}
	#making .item:nth-of-type(1) ul:nth-of-type(1) li:nth-of-type(2) { text-align: left; padding-left: calc(73 / 750 * 100vw); }
	#making .item:nth-of-type(1) ul:nth-of-type(1) li:nth-of-type(2) img { width: calc(650 / 750 * 100vw);}
	
	#making .item:nth-of-type(1) ul:nth-of-type(2) li:nth-of-type(1) { text-align: left; padding-left: calc(73 / 750 * 100vw);}
	#making .item:nth-of-type(1) ul:nth-of-type(2) li:nth-of-type(1) img { width: calc(645 / 750 * 100vw);}

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


}

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