@charset 'utf-8';

/*====================
{{スマホを基本設計にする}}
 - 〜479px：SP縦
 - 480px〜599px：SP横
 - 600px〜959px：タブレット
 - 960px〜1279px：小型PC
 - 1280px〜：大型PC
====================*/
h3 {
	margin-bottom: 2rem;
	font-size: 2.6rem;
	color: #118A45;
	text-align: center;
}

.catch {
	margin-bottom: 2rem;
}

.recipe_summary {
	margin-bottom: 3rem;
}

.recipe_summary img {
	margin-bottom: 2rem;
}

.recipe_summary p {
	font-size: 1.6rem;
	color: #333;
}

.dishes {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.dish {
	width: 45.5%;
}

.dish img {
	margin-bottom: 1rem;
}

.dish p {
	font-size: 1.2rem;
	color: #4D4D4D;
	text-align: center;
}

.recipe_example {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 5rem;
}

.recipe_example h4 {
	margin-bottom: 3rem;
	font-size: 2.6rem;
	text-align: center;
	line-height: 1.6;
}

.recipe_example h4 span {
	display: block;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-size: 0.41em;
	color: #118A45;
}

.recipe_example p {
	margin-bottom: 2rem;
	font-size: 1.6rem;
}

@media screen and (min-width: 600px) {
	h3 {
		font-size: 3.6rem;
	}

	.catch {
		width: 76%;
		margin: 0 auto 6rem;
	}

	.dishes {
		max-width: 450px;
		margin: auto;
	}

	.dish p {
		font-size: 1.4rem;
	}

	.recipe_example {
		margin-bottom: 12rem;
	}

	.recipe_example h4 {
		font-size: 3.6rem;
	}

	.recipe_example p {
		width: 67%;
		margin: 0 auto 4rem;
		font-size: 1.5rem;
	}
}

@media screen and (min-width: 768px) {
	.recipe_summary {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 5rem;
	}

	.recipe_summary > img,
	.recipe_summary > p {
		width: 48%;
	}

	.recipe_summary > p {
		font-size: 1.5rem;
	}
}