@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
/* カラー */
.recipe-container a {
	color: #718BBD;
	text-decoration: underline;
}

.recipe-container a:hover {
	text-decoration: none;
}

 /* レシピコンテナ */
.recipe-zairyo {
	background-color: #f6f6f6;
}

.zairyo-img {
	display: flex;
	position: absolute;
	top: -2rem;
	right: 1rem;
}

.zairyo-img .zairyo02,
.zairyo-img .zairyo01 {
	width: 50%;
}

table.table-zairyo {
	width: 100%;
}

table.table-zairyo th {
	padding: .5em 0 .5em 0;
	font-weight: normal;
	border-bottom: solid 1px #ddd;
}

table.table-zairyo td {
	padding: .5em 0 .5em 1em;
	font-weight: normal;
	border-bottom: solid 1px #ddd;
}

table.table-zairyo thead th {
	padding: .5em 0 1em 0;
	font-weight: bold;
}

/* ====================================
	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 0;
	}

	.main-header {
		margin-bottom: 3rem;
	}

	.recipe-title {
		margin: 2rem 0 1rem;
		font-size: 1.8rem;
		line-height: 1.4;
	}

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

	/* ホワイトボックス */
	.white-box-inner {
		padding: 5%;
	}

	/* レシピコンテナ */
	.recipe-zairyo {
		padding: 6rem 5% 4rem;
		position: relative;
	}

	.recipe-zairyo.no-ttl {
		padding: 2rem 5% 4rem;
	}

	.zairyo-img {
		width: 180px;
		right: 5%;
	}

	.recipe-zairyo .ttl {
		width: 6em;
		font-size: 1.6rem;
		text-align: center;
		position: absolute;
		left: 0;
		top: 2rem;
	}

	table.table-zairyo {
		font-size: 1.4rem;
		line-height: 1.8;
	}

	table.table-zairyo th {
		width: 60%;
	}

	table.table-zairyo td {
		width: 40%;
	}

	table.table-zairyo thead th {
		font-size: 1.2em;
	}

	.recipe-tsukurikata {
		margin-top: 3rem;
	}
	.recipe-tsukurikata .ttl {
		margin-bottom: 1em;
		font-size: 1.8rem;
	}
	ol.list-tsukurikata li {
		margin-top: 1em;
	}

	ol.list-tsukurikata li:first-child {
		margin-top: 0;
	}

	/* 関連レシピ */
	.aside-section {
		margin-top: 6rem;
	}

	.kanren-title {
		margin-bottom: 1em;
		font-size: 2.4rem;
	}

	ul.list-kanren {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		width: 100%;
	}

	ul.list-kanren li {
		margin-top: 2rem;
		font-size: 1.6rem;
		line-height: 1.4;
	}

	ul.list-kanren li a {
		display: block;
		text-decoration: none;
	}

	ul.list-kanren li .ttl {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 4em;
		padding: .5em;
		background: #fff;
		text-align: center;
	}

	ul.list-kanren li .btn-arrow {
		width: 80%;
		margin: 1em auto 0;
		font-size: .8em;
	}

	/* レシピ一覧ページへ */
	.back-list.btn-arrow {
		width: 360px;
		margin: 6rem auto 0;
	}

	.back-list.btn-arrow a {
		font-size: 1.4rem;
	}

}

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

	ul.list-kanren li {
		width: 31%;
		margin-left: 3.5%;
	}

	ul.list-kanren li:first-child {
		margin-left: 0;
	}

}

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

	.main-section {
		padding: 24vw 0 0;
	}

	.zairyo-img {
		width: 50%;
		top: -5vw;
	}

	.recipe-zairyo .ttl {
		font-size: 1.6em;
	}

	.recipe-title {
		font-size: 2em;
	}

	.recipe-copy {
		font-size: 1.4em;
	}

	table.table-zairyo {
		font-size: 1.4em;
	}

	.recipe-tsukurikata .ttl {
		font-size: 1.8em;
	}

	ol.list-tsukurikata li {
		font-size: 1.4em;
	}

	/* 関連レシピ */
	.kanren-title {
		font-size: 2.4em;
	}

	ul.list-kanren {
		justify-content: space-between;
	}
	
	ul.list-kanren li {
		width: 47%;
		font-size: 1.6em;
	}

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

	/* レシピ一覧ページへ */
	.back-list.btn-arrow {
		width: 100%;
	}

	.back-list.btn-arrow a {
		font-size: 1.4em;
	}

}

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

	.maxw880 {
		max-width: 880px;
	}

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

	.main-header {
		margin-bottom: 6rem;
	}

	.recipe-title {
		margin: 4rem 0 2rem;
		font-size: 2.8rem;
		line-height: 1.4;
	}

	/* ホワイトボックス */
	.white-box-inner {
		padding: 8rem 2.397%;
	}

	/* レシピコンテナ */
	.recipe-container {
		display: flex;
		justify-content: space-between;
	}

	.recipe-zairyo {
		width: 40%;
		padding: 6rem 3rem 4rem;
		background-color: #f6f6f6;
		position: relative;
	}

	.recipe-zairyo.no-ttl {
		padding: 2rem 3rem 4rem;
	}

	.zairyo-img {
		width: 180px;
	}

	.recipe-zairyo .ttl {
		width: 8em;
		text-align: center;
		position: absolute;
		left: 0;
		top: 2rem;
	}

	table.table-zairyo {
		font-size: 1.4rem;
		line-height: 1.8;
	}

	table.table-zairyo th {
		width: 60%;
	}

	table.table-zairyo td {
		width: 40%;
	}

	table.table-zairyo thead th {
		font-size: 1.8rem;
	}

	.recipe-tsukurikata {
		width: 55%;
	}

	.recipe-tsukurikata .ttl {
		margin-bottom: 2rem;
		font-size: 2rem;
	}

	ol.list-tsukurikata li {
		margin-top: 1em;
	}

	ol.list-tsukurikata li:first-child {
		margin-top: 0;
	}

	/* 関連レシピ */
	.aside-section {
		margin-top: 8rem;
	}

	.kanren-title {
		margin-bottom: 1em;
		font-size: 2.8rem;
	}

	ul.list-kanren {
		display: flex;
	}

	ul.list-kanren li {
		width: 30%;
		margin-left: 5%;
		font-size: 2rem;
		line-height: 1.4;
	}

	ul.list-kanren li:first-child {
		margin-left: 0;
	}

	ul.list-kanren li a {
		display: block;
		text-decoration: none;
	}

	ul.list-kanren li .ttl {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 4em;
		background: #fff;
	}

	ul.list-kanren li .btn-arrow {
		width: 12em;
		margin: 1em auto 0;
		font-size: .8em;
	}

	/* レシピ一覧ページへ */
	.back-list.btn-arrow {
		width: 420px;
		margin: 10rem auto 0;
	}

}