/* ==================== banner.css ==================== */

.RecipeBanner {
	margin: 2em auto;
}

.RecipeBanner img {
	border: 1px solid #ffcf47;
	width: 16em;
}



/* ==================== index.css ==================== */

.Index .all {
	margin: 2em auto;
}

.Index h2 a {
	display: inline-block;
	transform-origin: 50% 100%;
	transition: transform 150ms ease;
}
.Index h2 a:hover {
	transform: scale(1.05);
}

.Index hr {
	border: none;
	border-top: 2px dashed #ffcf47;
}


.Index .category .list {
	margin-top: 1.5em;
}

@media all and (max-width: 640px) {
	.Index .category {
		margin: 1.5em auto;
	}
}

@media all and (min-width: 641px) {
	.Index {
		padding: 2em;
	}
	.Index .category {
		display: inline-table;
		width: 90%;
		margin: 1em auto;
	}
	.Index .category::after {
		content: none;
	}
	.Index .category > div {
		display: table-cell;
		vertical-align: middle;
	}
	.Index .category h2 {
		width: 13em;
	}
}

/* ==================== おすすめ ==================== */

.Index .recommend {
	margin: 3em 0 0;
}
.Index .recommend h2 {
	margin: 1.5em 0;
}



/* ==================== terms.css ==================== */

.Terms .body {
	background: #FFDE7A;
	border-radius: 2em;
}

.Terms h2 {
	margin-top: 0;
	padding-bottom: 1em;
	background: url(../images/border_white.png) no-repeat center bottom;
	background-size: 100% auto;
}

.Terms .body p {
	margin: 1em 0 0;
	text-align: left;
	color: #4F1F00;
}

@media all and (max-width: 640px) {
	.Terms {
		margin: 3em 0;
		padding: 0 1em;
	}
	.Terms .body {
		margin: 1em auto;
		padding: 1em;
	}
}

@media all and (min-width: 641px) {
	.Terms .body {
		margin: 2em;
		padding: 2em;
	}
}