/* ==================== detailBase.css ==================== */

.detailBase {
	position: relative;
	box-sizing: border-box;
	background: white;
	box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

@media all and (max-width: 640px) {
	.detailBase {
		padding: 1em;
	}
}

@media all and (min-width: 641px) {
	.detailBase {
		/* width: 46em; */
		margin: 0 auto;
		padding: 1.5em;
	}
}



/* ==================== detailBody.css ==================== */

.detailBody {
	padding-top: 1em;
}

.detailBody hr {
	width: 100%;
	height: 0.5em;
	border: none;
	margin: 0.75em 0;
	padding: 0;
	background: url(../images/border_bold_h.png) repeat-x left center;
	background-size: 20em auto;
}


.detailBody .info,
.detailBody .nutrition,
.detailBody .material,
.detailBody .step {
	position: relative;
	margin-top: 1em;
}

.detailBody .nutrition .body,
.detailBody .material .body,
.detailBody .step .body {
	border: 2px solid rgba(239,183,94,0.5);
	border-radius: 1em;
	padding: 1.5em 1em 1em;
}

.detailBody .nutrition h3,
.detailBody .material h3,
.detailBody .step h3 {
	/* position: absolute;
	left: 1em; */
	margin: 0;
	color: #822300;
	font-size: inherit;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	/* transform: translateY(-100%); */
}

.detailBody .nutrition h3,
.detailBody .material h3 {
	display: table;
}
.detailBody .nutrition h3 span,
.detailBody .material h3 span {
	display: table-cell;
	vertical-align: bottom;
}
.detailBody .nutrition h3 img,
.detailBody .material h3 img,
.detailBody .step h3 img {
	display: inline-block;
	max-width: none;
	margin-bottom: -1em;
	width: 6em;
}
.detailBody .nutrition h3 .text,
.detailBody .material h3 .text {
	padding-left: 0.5em;
	padding-bottom: 0.6em;
	line-height: 1.3;
}



/* ==================== detailBody@pc.css ==================== */

@media all and (min-width: 641px) {

	.detailBody {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 44% 1fr 44%;
		grid-template-columns: 44% 1fr 44%;
	}

	.detailBody > * {
		box-sizing: border-box;
	}

	.detailBody .pic {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		grid-column: 1/3;
		grid-row: 1/3;
		padding-right: 0.5em;
	}
	.detailBody .info {
		-ms-grid-column: 3;
		-ms-grid-row: 1;
		grid-column: 3;
		grid-row: 1;
		padding-left: 0.5em;
	}
	.detailBody .nutrition {
		-ms-grid-column: 3;
		-ms-grid-row: 2;
		grid-column: 3;
		grid-row: 2;
		-ms-grid-row-align: center;
		align-self: center;
		padding-left: 0.5em;
	}
	.detailBody .material {
		-ms-grid-column: 1;
		-ms-grid-row: 3;
		-ms-grid-row-span: 2;
		grid-column: 1;
		grid-row: 3/5;
		padding-right: 0.5em;
	}
	.detailBody .step {
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		-ms-grid-row: 3;
		grid-column: 2/4;
		grid-row: 3;
		padding-left: 0.5em;
	}
	.detailBody .download {
		-ms-grid-column: 3;
		-ms-grid-row: 4;
		grid-column: 3;
		grid-row: 4;
		-ms-grid-row-align: end;
		align-self: end;
		margin-top: 1.5em;
		text-align: right;
	}
	.detailBody .comment {
		-ms-grid-column: 1;
		-ms-grid-column-span: 3;
		-ms-grid-row: 5;
		grid-column: 1/4;
		grid-row: 5;
	}


	.detailBody .nutrition h3,
	.detailBody .material h3,
	.detailBody .step h3 {
		font-size: 0.8em;
	}
	.detailBody .nutrition dl,
	.detailBody .material dl,
	.detailBody .step ol {
		font-size: 0.75em;
	}
	.detailBody .material h4 {
		font-size: 0.8em;
	}
}



/* ==================== detailBody@sp.css ==================== */

@media all and (max-width: 640px) {

	.detailBody .nutrition h3,
	.detailBody .material h3,
	.detailBody .step h3 {
		font-size: 0.9em;
	}
	.detailBody .nutrition dl,
	.detailBody .material dl,
	.detailBody .step ol {
		font-size: 0.9em;
	}

}



/* ==================== detailBody__border-box.css ==================== */





/* ==================== detailBody__comment.css ==================== */

.detailBody .comment {
	margin-top: 2em;
	padding: 1em;
	background:
		no-repeat left top,
		no-repeat left bottom,
		no-repeat left top;
	background-size:
		100% auto,
		100% auto,
		100% 100%;
}
.detailBody .comment h3 {
	margin: 0;
	font-size: inherit;
}
.detailBody .comment h3 img {
	max-width: none;
	width: 9em;
}
.detailBody .comment p {
	margin: 0;
	color: #300d00;
	line-height: 1.6;
	text-align: left;
}

@media all and (max-width: 640px) {
	.detailBody .comment {
		background-image:
			url(../images/comment_base1_sp.png),
			url(../images/comment_base3_sp.png),
			url(../images/comment_base2_sp.png);
	}
	.detailBody .comment p {
		margin-top: 1em;
		font-size: 0.9em;
	}
}

@media all and (min-width: 641px) {
	.detailBody .comment {

		display: flex;
		align-items: center;

		background-image:
			url(../images/comment_base1_pc.png),
			url(../images/comment_base3_pc.png),
			url(../images/comment_base2_pc.png);
	}
	.detailBody .comment p {
		margin-left: 1.5em;
		font-size: 0.75em;
	}
}



/* ==================== detailBody__download.css ==================== */

.detailBody .download img {
	width: 10em;
}

@media all and (max-width: 640px) {
	.detailBody .download {
		margin: 2em auto 1em;
	}
}

@media all and (min-width: 641px) {
}



/* ==================== detailBody__list.css ==================== */

.detailBody .list {
	display: inline-block;
	overflow: hidden;
	position: relative;
	margin: 0;
	padding: 0;
}
.detailBody .material dl.list {
	width: 100%;
}

.detailBody .list::before {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 1em;
	height: 100%;
	background: white;
}
.detailBody .list::after {
	content: '';
	display: block;
	clear: both;
	height: 0;
}

.detailBody .list dt,
.detailBody .list dd {
	display: inline-block;
}

.detailBody .list dt {
	clear: both;
	float: left;
	position: relative;
	z-index: 2;
	background: white;
	margin-right: 1em;
	padding-right: 0.25em;
	text-align: left;
}

.detailBody .list dd {
	float: right;
	overflow: visible;
	position: relative;
	margin: 0;
	text-align: right;
}
.detailBody .list dt + dd {
	margin-left: 2em;
	padding-left: 0.25em;
}
.detailBody .list dt + dd::before {
	content: '........................................................................................';
	position: absolute;
	color: #999;
	right: 100%;
	white-space: nowrap;
}



/* ==================== detailBody__material.css ==================== */

.detailBody .material h4 {
	margin: 0.75em 0;
	color: #822300;
}

.detailBody .material h5 {
	margin: 0.75em 0 0.5em;
	color: #e35f00;
	font-weight: normal;
}

.detailBody .material dl + dl {
	margin-top: 1.5em;
}

.detailBody .material dl.list dd:not(:last-child) {
	margin-bottom: 0.5em;
}

.detailBody .material dl.list dd + dd {
	clear: right;
	z-index: 1;
	margin-top: -0.5em;
}

@media all and (max-width: 640px) {
	.detailBody .material h4 {
		font-size: 1em;
	}
	.detailBody .material h5 {
		font-size: 0.9em;
	}
}

@media all and (min-width: 641px) {
	.detailBody .material h4 {
		font-size: 0.85em;
	}
	.detailBody .material h5 {
		font-size: 0.75em;
	}
}



/* ==================== detailBody__notes.css ==================== */

.detailBody .notes p {
	margin: 0;
	color: #822300;
	text-align: left;
}

@media all and (max-width: 640px) {
	.detailBody .notes p {
		font-size: 0.8em;
	}
}

@media all and (min-width: 641px) {
	.detailBody .notes p {
		font-size: 0.7em;
	}
}



/* ==================== detailBody__nutrition.css ==================== */

.detailBody .nutrition {
	position: relative;
}
.detailBody .nutrition .listItem {
	display: table;
	margin: 0 auto;
}

.detailBody .nutrition h4,
.detailBody .nutrition dl {
	display: table-cell;
	vertical-align: top;
}
.detailBody .nutrition h4 {
	margin: 0;
	color: #e35f00;
	text-align: left;
}

.detailBody .nutrition dl.list dd:not(:last-child) {
	margin-bottom: 0.25em;
}

.recipe04_9 .detailBody .nutrition dt:nth-of-type(4),
.recipe04_9 .detailBody .nutrition dd:nth-of-type(4) {
	color: red;
}

@media all and (max-width: 640px) {
	.detailBody .nutrition h4 {
		font-size: 0.9em;
	}
}

@media all and (min-width: 641px) {
	.detailBody .nutrition h4 {
		font-size: 0.75em;
	}
}



/* ==================== detailBody__pic.css ==================== */

.detailBody .pic figure {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding-bottom: 1em;
}
.detailBody .pic figure::before {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 150%;
	-webkit-transform: translateY(-2%);
	transform: translateY(-2%);
	background: url(../images/pic_frame.png) no-repeat center top;
	background-size: contain;
}
.detailBody .pic figure img {
	position: relative;
	-webkit-transform: scale(0.92);
	transform: scale(0.92);
}



/* ==================== detailBody__step.css ==================== */

.detailBody .step .prepare {
	text-align: left;
}
.detailBody .step .prepare h4 {
	margin: 0;
	color: #e35f00;
}
.detailBody .step .prepare p {
	margin: 0;
	padding-left: 1.6em;
}

.detailBody .step ol {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
}
.detailBody .step li {
	position: relative;
	padding-left: 1.6em;
	line-height: 1.6;
}
.detailBody .step li:nth-of-type(n+2) {
	margin-top: 1em;
}
.detailBody .step li::before {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0.7em;
	-webkit-transform: translateY(-50%) scale(1.5);
	transform: translateY(-50%) scale(1.5);
	width: 1em;
	height: 1em;
	background: no-repeat center center;
	background-size: contain;
}

.detailBody .step li:nth-of-type(1)::before {background-image: url(../images/step_num1.png);}
.detailBody .step li:nth-of-type(2)::before {background-image: url(../images/step_num2.png);}
.detailBody .step li:nth-of-type(3)::before {background-image: url(../images/step_num3.png);}
.detailBody .step li:nth-of-type(4)::before {background-image: url(../images/step_num4.png);}
.detailBody .step li:nth-of-type(5)::before {background-image: url(../images/step_num5.png);}
.detailBody .step li:nth-of-type(6)::before {background-image: url(../images/step_num6.png);}
.detailBody .step li:nth-of-type(7)::before {background-image: url(../images/step_num7.png);}
.detailBody .step li:nth-of-type(8)::before {background-image: url(../images/step_num8.png);}
.detailBody .step li:nth-of-type(9)::before {background-image: url(../images/step_num9.png);}
.detailBody .step li:nth-of-type(10)::before {background-image: url(../images/step_num10.png);}

@media all and (max-width: 640px) {
	.detailBody .step .prepare h4,
	.detailBody .step .prepare p {
		font-size: 0.9em;
	}
}
@media all and (min-width: 641px) {
	.detailBody .step .prepare h4,
	.detailBody .step .prepare p {
		font-size: 0.75em;
	}
}



/* ==================== detailHead.css ==================== */

.detailHead {
	background: url(../images/border_bold_h.png) repeat-x left bottom;
	background-size: 40em auto;
	text-align: left;
}

.detailHead .anniversary {
	color: #1d8515;
	font-size: 0.9em;
	font-weight: bold;
}

.detailHead .anniversary[data-month="1"] {color: #d42b1c;}
.detailHead .anniversary[data-month="2"] {color: #4066d6;}
.detailHead .anniversary[data-month="3"] {color: #528500;}
.detailHead .anniversary[data-month="4"] {color: #c71e81;}
.detailHead .anniversary[data-month="5"] {color: #1f69c4;}
.detailHead .anniversary[data-month="6"] {color: #c22b2b;}
.detailHead .anniversary[data-month="7"] {color: #1d8515;}
.detailHead .anniversary[data-month="8"] {color: #0056c7;}
.detailHead .anniversary[data-month="9"] {color: #cc4214;}
.detailHead .anniversary[data-month="10"] {color: #5f4ac2;}
.detailHead .anniversary[data-month="11"] {color: #913700;}
.detailHead .anniversary[data-month="12"] {color: #bd2c7a;}

.detailHead .anniversary a {
	display: inline-block;
	border-bottom: 1px solid;
	padding-bottom: 0.1em;
	color: inherit;
	text-decoration: none;
	line-height: 1;
}

.detailHead h2 {
	position: relative;
	margin: 0.4em 0 0;
	padding-left: 1em;
	padding-bottom: 0.75em;
	color: #822300;
	font-size: 1.2em;
	line-height: 1.3;
}
.detailHead h2::before {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0.65em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 0.8em;
	height: 0.8em;
	background: #e35f00;
	border-radius: 50%;
}

.detailHead .icons ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-type: none;
	white-space: nowrap;
}
.detailHead .icons li {
	display: inline-block;
	vertical-align: bottom;
}
.detailHead .icons li:nth-of-type(n+2) {
	margin-left: 0.25em;
}

@media all and (max-width: 640px) {
	.detailHead {
		position: relative;
		margin-top: 1.5em;
	}
	.detailHead .text {
		padding-top: 0.75em;
	}
	.detailHead .icons {
		position: absolute;
		right: 0;
		bottom: 100%;
	}
	.detailHead .icons li {
		width: 4em;
	}
}
@media all and (min-width: 641px) {
	.detailHead {
		display: table;
		width: 100%;
	}
	.detailHead .text,
	.detailHead .icons {
		display: table-cell;
	}
	.detailHead .text {
		padding-right: 1em;
		vertical-align: middle;
	}
	.detailHead .icons {
		vertical-align: top;
		text-align: right;
		-webkit-transform: translateY(-1em);
		transform: translateY(-1em);
	}
	.detailHead .icons li {
		width: 4.5em;
	}
}