@charset 'utf-8';

/*====================
{{スマホを基本設計にする}}
 - 〜479px：SP縦
 - 480px〜599px：SP横
 - 600px〜959px：タブレット
 - 960px〜1279px：小型PC
 - 1280px〜：大型PC
====================*/
.recipe_inner {
	padding: 0 5% 4rem;
	border-bottom: 1px solid #118A45;
	margin-bottom: 4rem;
}

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

h2 {
	padding: 4rem 0;
	margin-top: 50px;
	margin-bottom: 2.5rem;
	font-size: 3.8rem;
	text-align: center;
	line-height: 1.2;
	letter-spacing: .3em;
	text-indent: .3em;
	background: url(../images/bg_recipe_title_sp.jpg) no-repeat;
	background-size: cover;
	background-position: bottom;
}

h2 span {
	display: block;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-size: 0.33em;
	font-weight: bold;
	color: #118A45;
	text-indent: 0;
	letter-spacing: 0;
}

.recipe_nav_wrap {
	padding-bottom: 2rem;
	border-bottom: 1px solid #118A45;
	margin-bottom: 4rem;
}

.recipe_nav {
	display: flex;
	justify-content: space-between;
	width: 90%;
	max-width: 1000px;
	margin: auto;
}

.recipe_nav li {
	width: 29%;
}

.recipe_nav li a > img {
	display: block;
	max-width: 100px;
	margin: 0 auto 1rem;
}

.recipe_nav li p {
	font-size: 3.5vw;
	color: #808080;
	text-align: center;
}

.recipe_nav li p span.active {
	color: #118A45;
}

.recipe_nav li p img {
	display: block;
	width: 33%;
	max-width: 54px;
	margin: 0 auto .5rem;
}


.next_step {
	margin-bottom: 4rem;
}

.next_step > p {
	margin-bottom: 2rem;
	font-size: 1.2rem;
	text-align: center;
}

.next_menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 1.5rem;
}

.next_menu > img {
	width: 22%;
}

.next_menu_text {
	display: flex;
	align-items: center;
	width: 72%;
}

.next_menu_text img {
	width: 24%;
	margin-right: 3%;
}

.next_menu_text p {
	font-size: 1.5rem;
	color: #118A45;
	line-height: 1.2;
}

#support {
	width: 90%;
	margin: auto;
}

.pconly {
	display: none;
}


@media screen and (min-width: 600px) {
	h2 {
		padding: 10rem 0;
		margin-top: 0;
		margin-bottom: 8rem;
		font-size: 4.6rem;
		background: url(../images/bg_recipe_title_pc.jpg) no-repeat;
	    background-size: cover;
    	background-position: bottom;
	}

	.recipe_nav li p {
		font-size: 1.6rem;
	}

	.pconly {
		display: block;
	}

	.recipe_nav.pconly {
		display: flex;
	}



}

@media screen and (min-width: 768px) {
	.recipe_nav_wrap {
		max-width: 1000px;
		padding-bottom: 4rem;
		margin: 0 auto 8rem;
	}

	.recipe_nav li {
		width: 32%;
		max-width: 300px;
	}

	.recipe_nav li a > img {
		display: block;
		width: 100px;
		margin: 0 auto 2rem;
	}

	.recipe_nav li a > p  {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.8rem;
		text-align: left;
		line-height: 1.2;
	}

	.recipe_nav li p img {
		width: 48px;
		margin: 0 1rem 0 0;
	}

	.recipe_inner {
		max-width: 1000px;
		padding: 0 0 8rem 0;
		margin: 0 auto 8rem;
	}

	.recipe_inner_last {
		max-width: 1000px;
		margin: 0 auto;
	}
}