@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */

/* サブセクション */
.tsukurioki-header {
	height: 5em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	position: relative;
}

.tsukurioki-ttl {
	width: 100%;
	height: 100%;
	padding: .8em 0 0;
	font-weight: bold;
	background-image: url(images/bg-tsukurioki-ttl.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
}

.tsukurioki-yasai .tsukurioki-ttl {
	background-image: url(images/bg-tsukurioki-yasai-ttl.png);
}

/* 絶品献立 */
.recipe-use-main {
	background: #fff;
}

.recipe-header {
	background-image: url(images/bg-recipe-header-l.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	position: relative;
}

.recipe-header::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(images/bg-recipe-header-r.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

/* ====================================
	1023px以下専用スタイル
===================================== */
@media only screen and (max-width: 1023px) {
	article {
		padding-bottom: 4rem;
		font-size: 1.4rem;
		line-height: 1.8;
	}

	/* メインセクション */
	.main-section {
		padding: 10rem 0 4rem;
	}

	.main-sub-title {
		font-size: 1.6rem;
	}

	.main-title {
		font-size: 2.8rem;
		line-height: 1.8;
	}

	.main-text {
		margin-top: 1rem;
		text-align: center;
	}

	/* サブセクション */
	.tsukurioki-ttl {
		font-size: 2rem;
	}

	.tsukurioki-header {
		margin-bottom: 4rem;
	}

	/* 作りおき：メイン */
	.tsukurioki-main {
		padding-top: 7rem;
		position: relative;
	}

	.tsukurioki-main::before {
		content: '';
		width: 160px;
		padding-top: 90px;
		background: url(images/tsukurioki-comment-main.png) no-repeat center center;
		background-size: contain;
		position: absolute;
		top: 0;
		right: 0;
	}

	ul.list-tsukurioki-main {
		display: flex;
		flex-wrap: wrap;
	}

	ul.list-tsukurioki-main li {
		display: flex;
		flex-direction: column;
		margin-top: 4rem;
	}

	ul.list-tsukurioki-main .wrap {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	ul.list-tsukurioki-main li .ttl {
		margin: .4em 0 .8em;
		font-size: 1.8rem;
		line-height: 1.4;
		text-align: center;
	}

	ul.list-tsukurioki-main li .img {
		padding: 0 4%;
	}

	ul.list-tsukurioki-main li .btn-arrow {
		margin-top: auto;
	}

	/* 作りおき：野菜 */
	.tsukurioki-yasai {
		padding-top: 14%;
		position: relative;
	}

	.tsukurioki-yasai::before {
		content: '';
		width: 30%;
		padding-top: 22%;
		background: url(images/tsukurioki-comment-yasai.png) no-repeat center center;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 5%;
	}

	ul.list-tsukurioki-yasai {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	ul.list-tsukurioki-yasai li {
		width: 32%;
		margin-top: 4rem;
	}

	ul.list-tsukurioki-yasai li:nth-child(-n+3) {
		margin-top: 0;
	}

	ul.list-tsukurioki-yasai li .ttl {
		margin: 1em 0 0;
		font-size: 1.4rem;
		line-height: 1.4;
		text-align: center;
	}

	/* ドット吹き出し */
	.fukidashi-dot {
		margin-top: 4rem;
	}

	/* 絶品献立 */
	.recipe-header {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		align-items: center;
		width: 420px;
		height: 120px;
		margin: 4rem auto 0;
	}

	.recipe-container {
		margin: 6rem auto 0;
	}

	.recipe-main-copy {
		font-size: 1.8rem;
		text-align: center;
	}

	.recipe-main-ttl {
		font-size: 3rem;
		text-align: center;
	}

	.recipe-use-main {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		align-items: center;
		padding: 1rem 5% 3rem;
		font-size: 1.8rem;
	}

	.recipe-use-main .ttl {
		width: 28%;
		font-size: 2.6rem;
		line-height: 1.4;
	}

	.recipe-use-main .img {
		width: 66%;
		padding-left: 5%;
	}

	.recipe-use-main .btn-arrow {
		width: 258px;
		margin: 2rem 0 0;
		font-size: 1.4rem;
	}

	.recipe-text-container {
		margin-top: 2rem;
		font-size: 1.8rem;
	}

	.recipe-ttl {
		margin-bottom: .5em;
		font-size: 1.2em;
		line-height: 1.4;
	}

}

/* ====================================
	568px以上1023px以下専用スタイル
===================================== */
@media only screen and (min-width: 568px) and (max-width: 1023px) {

	/* 作りおき：メイン */
	ul.list-tsukurioki-main li {
		width: 30%;
		margin-left: 5%;
	}

	ul.list-tsukurioki-main li:nth-child(-n+3) {
		margin-top: 0;
	}

	ul.list-tsukurioki-main li:nth-child(3n-2) {
		margin-left: 0;
	}

	ul.list-tsukurioki-main {
		position: relative;
	}

	ul.list-tsukurioki-main::before {
		content: '';
		display: block;
		width: 34%;
		padding-top: 34%;
		background-image: url(images/illust01_sp.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		position: absolute;
		bottom: 6%;
		right: 0;
	}

	/* 作りおき：野菜 */
	ul.list-tsukurioki-yasai li {
		width: 30%;
	}


}

/* ====================================
	567px以下専用スタイル
===================================== */
@media only screen and (max-width: 567px) {
	article {
		font-size: 2.667vw;
	}

	/* メインセクション */
	.main-section {
		padding: 22vw 0 2rem;
	}

	.main-title {
		font-size: 2.6em;
	}

	.main-text {
		font-size: 1.4em;
	}

	.tsukurioki-header {
		height: 6em;
	}

	.tsukurioki-ttl {
		font-size: 1.8em;
	}

	/* 作りおき：メイン */
	.tsukurioki-main {
		padding-top: 18vw;
	}
	.tsukurioki-main::before {
		width: 34%;
		padding-top: 20%;
	}
	ul.list-tsukurioki-main {
		justify-content: space-between;
	}

	ul.list-tsukurioki-main li {
		width: 47%;
	}

	ul.list-tsukurioki-main li:nth-child(-n+2) {
		margin-top: 0;
	}

	ul.list-tsukurioki-main li.sp-illust {
		width: 100%;
		position: relative;
	}

	ul.list-tsukurioki-main li.sp-illust::before {
		content: '';
		display: block;
		width: 50%;
		padding-top: 50%;
		background-image: url(images/illust01_sp.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		position: absolute;
		top: 8%;
		right: 0;
	}

	ul.list-tsukurioki-main li.sp-illust .wrap {
		width: 47%;
	}

	ul.list-tsukurioki-main li .ttl {
		font-size: 1.4em;
	}

	ul.list-tsukurioki-main li .btn-arrow {
		font-size: 1.4em;
	}

	/* 作りおき：野菜 */
	.tsukurioki-yasai {
		padding-top: 0;
	}

	.tsukurioki-yasai::before {
		display: none;
	}

	ul.list-tsukurioki-yasai li .ttl {
		font-size: 1.4em;
	}

	ul.list-tsukurioki-yasai li {
		width: 30%;
		margin-top: 2rem;
	}

	/* 絶品献立 */
	.recipe-header {
		width: 100%;
		height: 26vw;
	}

	.recipe-main-copy {
		font-size: 1.6em;
	}

	.recipe-container {
		margin: 4rem auto 0;
	}

	.recipe-main-ttl {
		font-size: 2.8em;
	}

	.recipe-use-main {
		font-size: inherit;
	}

	.recipe-use-main .ttl {
		width: 30%;
		font-size: 1.6em;
	}

	.recipe-use-main .btn-arrow {
		width: 80%;
		font-size: 1.4em;
	}

	.recipe-text-container {
		font-size: 1.4em;
	}

}

/* ====================================
	1024px以上印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) {
	article {
		padding-bottom: 8rem;
		font-size: 1.6rem;
		line-height: 2;
	}

	/* フレックスコンテナ：ハーフ */
	.flex-container.half {
		justify-content: space-between;
	}

	.flex-container.half>.flex-item {
		width: 48%;
	}

	/* フレックスコンテナ：3カラム */
	.flex-container.col3 {
		justify-content: space-between;
	}

	.flex-container.col3>.flex-item {
		width: 30.47%;
	}

	/* メインセクション */
	.main-section {
		padding: 8rem 0 10rem;
		text-align: center;
		position: relative;
	}

	.main-section::before {
		content: '';
		display: block;
		width: 252px;
		height: 300px;
		background-image: url(images/illust01.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-540px, 100px);
	}

	.main-header {
		padding: 0 0 3rem;
	}

	.main-sub-title {
		font-size: 2.4rem;
	}

	.main-title {
		font-size: 5rem;
		line-height: 1.8;
	}

	.main-text {
		margin-top: 2rem;
	}

	/* サブセクション */
	.tsukurioki-header {
		height: 100px;
		margin-bottom: 4rem;
	}

	.tsukurioki-ttl {
		padding: .5em 0 0;
		font-size: 3rem;
	}

	/* 作りおき：メイン */
	.tsukurioki-main {
		position: relative;
	}

	.tsukurioki-main::before {
		content: '';
		width: 150px;
		height: 90px;
		background: url(images/tsukurioki-comment-main.png) no-repeat center center;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(210px,0);
	}

	ul.list-tsukurioki-main {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	ul.list-tsukurioki-main li {
		display: flex;
		flex-direction: column;
		width: 22%;
		padding: 1rem;
	}

	ul.list-tsukurioki-main li .wrap {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	ul.list-tsukurioki-main li.tare {
		width: 17%;
	}

	ul.list-tsukurioki-main li.tare .img {
		padding: 20% 0 5%;
	}

	ul.list-tsukurioki-main li .img {
		min-height: 0%;
		/* IE対応 */
		padding: 0 4%;
	}

	ul.list-tsukurioki-main li .ttl {
		margin: 1em 0;
		font-size: 1.8rem;
		line-height: 1.4;
		text-align: center;
	}

	ul.list-tsukurioki-main li .btn-arrow {
		width: 90%;
		margin: auto auto 0;
	}

	ul.list-tsukurioki-main li .btn-arrow.mini {
		width: 100%;
	}

	/* 作りおき：野菜 */
	.tsukurioki-yasai {
		position: relative;
	}

	.tsukurioki-yasai::before {
		content: '';
		width: 200px;
		height: 138px;
		background: url(images/tsukurioki-comment-yasai.png) no-repeat center center;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 10%;
	}

	ul.list-tsukurioki-yasai {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	ul.list-tsukurioki-yasai li {
		width: 16%;
		padding: 1rem;
	}

	ul.list-tsukurioki-yasai li .ttl {
		margin: 1em 0 0;
		font-size: 1.5rem;
		text-align: center;
	}

	/* ドット吹き出し */
	.fukidashi-dot {
		margin-top: 8rem;
	}

	/* 絶品献立 */
	.recipe-header {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		align-items: center;
		width: 700px;
		height: 200px;
		margin: 8rem auto 0;
	}

	.recipe-main-copy {
		width: 100%;
		font-size: 3rem;
		text-align: center;
	}

	.recipe-main-ttl {
		width: 100%;
		font-size: 4.5rem;
		text-align: center;
	}

	.recipe-container {
		display: flex;
		flex-wrap: wrap;
		margin: 10rem auto 0;
	}

	.recipe-img {
		width: 62%;
	}

	.recipe-use-main {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		width: 38%;
		padding: 0 4rem;
	}

	.recipe-use-main .ttl {
		width: 100%;
		margin-bottom: 3rem;
		font-size: 2rem;
		text-align: center;
	}

	.recipe-use-main .img {
		width: 100%;
	}

	.recipe-use-main .btn-arrow {
		width: 80%;
		margin: 5rem auto 0;
	}

	.recipe-text-container {
		width: 100%;
		margin: 3rem 0 0;
	}

	.recipe-ttl {
		margin-bottom: 2rem;
		font-size: 2.4rem;
		line-height: 1.4;
	}

	.recipe-copy {
		font-size: 1.5rem;
	}
}

/* ====================================
	768-1023px専用スタイル
===================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {}

/* ====================================
	1024-1199px専用スタイル
===================================== */
@media screen and (min-width: 1024px) and (max-width: 1199px) {}