/* ==================== detail.css ==================== */

.Detail {
	position: relative;
	margin: 2em auto 0;
}

.Detail .base {
	box-sizing: border-box;
	padding: 1px 1em 1em;
}

.Detail.babyfood .base {
	background-color: #FEF8DA;
}
.Detail.family .base {
	background-color: #F2FAD2;
}
.Detail.stock .base {
	background-color: #FFE3E3;
}

.Detail .base h3 {
	margin: 0 0 0.5em;
}
.Detail .base h3 small {

}

.Detail.babyfood .base h3 small {
	color: #914018;
}
.Detail.family .base h3 small {
	color: #3A6300;
}
.Detail.stock .base h3 small {
	color: #AB3939;
}

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

	.Detail .base {
		margin-top: 4em;
	}

	.Detail .base h3 {
		margin-top: -2em;
		margin-bottom: 1em;
	}
	.Detail .base h3 small {
		display: block;
		margin-top: 1em;
	}
	.Detail .base h3 img {
		transform: scale(1.2);
	}
}

@media all and (min-width: 641px) {
	.Detail {
		width: 46em;
	}

	.Detail .base {
		margin-top: 4.5em;
	}
	.Detail .base.nutrients {
		margin-top: 4em;
	}
	.Detail .base h3 {
		margin-top: -3em;
		text-align: left;
	}
	.Detail .base.nutrients h3 {
		margin-top: -2.75em;
	}
	.Detail .base h3 img,
	.Detail .base h3 small {
		display: inline-block;
		vertical-align: middle;
	}
	.Detail .base h3 {
		font-size: inherit;
	}
	.Detail .base h3 small {
		font-size: 0.8em;
	}

	.Detail .base {
		width: 22em;
	}
	.Detail .base.storage {
		width: 100%;
	}

	.Detail .materials,
	.Detail .storage {
		float: left;
	}
	.Detail .steps {
		float: right;
	}
	.Detail .storage,
	.Detail .onepoint {
		clear: both;
	}
}

/* ==================== 見出し ==================== */

.Detail .head h2 {

}

.Detail .head h2 small {
	display: block;
	margin-bottom: 0.25em;
	font-size: 70%;
}
.Detail .head h2 small span {
	display: block;
}

.Detail.babyfood .head h2 small {
	color: #EB6500;
}
.Detail.family .head h2 small {
	color: #599900;
}
.Detail.stock .head h2 small {
	color: #FF5757;
}

@media all and (max-width: 640px) {
	.Detail .head img[src*="title"] {
		width: 12em;
	}
	.Detail .head h2 {
		margin: 0.5em 0 0;
		font-size: 1.4em;
	}
}

@media all and (min-width: 641px) {
	.Detail .head {
		min-height: 16em;
		position: relative;
		text-align: left;
	}
	.Detail .head img[src*="title"] {
		width: 12em;
	}
	.Detail .head h2 {
		margin: 1em 0 0;
		font-size: 1.25em;
		min-height: 3.5em;
	}

	.Detail.family2 .head h2 small span,
	.Detail.family3 .head h2 small span,
	.Detail.family5 .head h2 small span,
	.Detail.family6 .head h2 small span,
	.Detail.family7 .head h2 small span,
	.Detail.family14 .head h2 small span,
	.Detail.family15 .head h2 small span,
	.Detail.family21 .head h2 small span {
		display: inline;
	}

}

/* ==================== カテゴリー ==================== */

.Detail .categories ul {
	display: inline-table;
	border-spacing: 0.25em;
	margin: 0;
	padding: 0;
	list-style-type: none;
	table-layout: fixed;
}
.Detail .categories li {
	display: table-cell;
}

.Detail .categories .bento {
	margin-top: 0.25em;
}

@media all and (max-width: 640px) {
	.Detail .categories {
		margin-top: 0.5em;
	}
}

@media all and (min-width: 641px) {
	.Detail .categories {
		position: absolute;
		right: 0;
		top: 3em;
		transform: translateY(-50%);
		text-align: right;
	}
	.Detail .categories .bento {
		padding-right: 0.25em;
	}
}

/* ==================== 写真 ==================== */

.Detail .pic figure {
	border: 2px solid;
	margin: 0;
	padding: 0.4em;
}
.Detail.babyfood .pic figure {
	border-color: #FFE136;
}
.Detail.family .pic figure {
	border-color: #CBF043;
}
.Detail.stock .pic figure {
	border-color: #FFC2C2;
}

@media all and (max-width: 640px) {
	.Detail .pic {
		margin-top: 1em;
	}
}

@media all and (min-width: 641px) {
	.Detail .pic {
		position: absolute;
		right: 0;
		bottom: 0;
		margin-top: 5em;
	}
	.Detail .pic img {
		width: 21.5em;
	}
}

/* ==================== 栄養価 ==================== */

.Detail .nutrients dt,
.Detail .nutrients dd {
	display: inline-block;
	box-sizing: border-box;
	border: solid;
	border-width: 1px 0;
	margin: 0;
	padding: 0.5em;
}
.Detail .nutrients dt {
	text-align: left;
}
.Detail .nutrients dd {
	text-align: right;
}

.Detail.babyfood .nutrients dt,
.Detail.babyfood .nutrients dd {
	border-color: #EDD182;
}
.Detail.family .nutrients dt,
.Detail.family .nutrients dd {
	border-color: #BEE62E;
}
.Detail.stock .nutrients dt,
.Detail.stock .nutrients dd {
	border-color: #FFCCCC;
}

@media all and (max-width: 640px) {
	.Detail .nutrients dt,
	.Detail .nutrients dd {
		width: 50%;
	}
	.Detail .nutrients dt:nth-of-type(n+2),
	.Detail .nutrients dd:nth-of-type(n+2) {
		border-top: none;
	}
}

@media all and (min-width: 641px) {
	.Detail .nutrients dt,
	.Detail .nutrients dd {
		width: 24%;
		font-size: 0.7em;
	}
	.Detail .nutrients dt:nth-of-type(n+3),
	.Detail .nutrients dd:nth-of-type(n+3) {
		border-top: none;
	}
	.Detail .nutrients dt:nth-of-type(even) {
		margin-left: 4%;
	}
}

/* ==================== 材料 ==================== */

.Detail .materials table {
	border-collapse: collapse;
	width: 100%;
	overflow: hidden;
}

.Detail .materials hr {
	background: none;
	border-top: 1px solid;
	height: 0;
	margin: 1em 0;
}
.Detail .materials hr:nth-of-type(1) {
	margin-top: 0;
}
.Detail .materials hr:nth-of-type(1):nth-last-of-type(1) {
	display: none;
}

.Detail.babyfood .materials hr {
	border-color: #EDD182;
}
.Detail.family .materials hr {
	border-color: #BEE62E;
}
.Detail.stock .materials hr {
	border-color: #FFCCCC;
}

.Detail .materials table th,
.Detail .materials table td {
	padding: 0.5em;
	vertical-align: top;
}

.Detail .materials table th {
	position: relative;
	z-index: 1;
	padding-left: 0;
	padding-right: 0;
	font-weight: normal;
	text-align: left;
}

.Detail .materials table th span {
	display: inline-block;
	padding: 0 0.5em;
}
.Detail.babyfood .materials table th span {
	background-color: #FEF8DA;
}
.Detail.family .materials table th span {
	background-color: #F2FAD2;
}
.Detail.stock .materials table th span {
	background-color: #FFE3E3;
}

.Detail .materials table td {
	position: relative;
	text-align: right;
}
.Detail .materials table td::before {
	content: '…………………………………………………………………………………………………………………………';
	display: inline-block;
	width: 0;
	transform-origin: 100% 0;
	transform: scaleX(-1);
	opacity: 0.5
}

.Detail .materials table + .caution {
	padding-right: 0.5em;
}

.Detail .materials .note {
	border-top: 1px solid;
	margin-top: 1.5em;
	padding: 1.5em 0.5em 0;
	text-align: left;
}

.Detail.babyfood .materials .note {
	border-color: #EDD182;
}
.Detail.family .materials .note {
	border-color: #BEE62E;
}
.Detail.stock .materials .note {
	border-color: #FFCCCC;
}

.Detail .materials .link {
	display: block;
	position: relative;
	margin-top: 0.5em;
	font-size: 90%;
}
.Detail .materials .link::before {
	content: 'A';
	display: block;
	visibility: hidden;
}
.Detail .materials .link a {
	position: absolute;
	right: 0;
	top: 0;
}

.Detail.family13 .materials table:nth-of-type(2) .link.caution {
	display: none;
}

.Detail .materials table caption {
	margin-bottom: 0.5em;
}

.Detail.babyfood .materials table caption {
	color: #914018;
}
.Detail.family .materials table caption {
	color: #3a6300;
}
.Detail.stock .materials table caption {
	color: #ab3939;
}

.Detail .materials table caption::before {
	content: '【';
}
.Detail .materials table caption::after {
	content: '】';
}

@media all and (max-width: 640px) {
	.Detail .materials .note {
		font-size: 0.8em;
	}
	.Detail .materials table th,
	.Detail .materials table td {
		font-size: 0.9em;
	}
	.Detail .materials table + .caution {
		font-size: 0.8em;
	}
}

@media all and (min-width: 641px) {
	.Detail .materials table caption {
		font-size: 0.8em;
	}
	.Detail .materials .note {
		font-size: 0.6em;
	}
	.Detail .materials table th,
	.Detail .materials table td {
		font-size: 0.7em;
	}
	.Detail .materials table + .caution {
		font-size: 0.7em;
	}
}

/* ==================== 作り方 ==================== */

.Detail .steps ol {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.Detail .steps ol li {
	position: relative;
	border-bottom: 1px solid;
	padding: 1em 0;
	padding-left: 2.5em;
	text-align: left;
	line-height: 1.5;
}
.Detail .steps ol li:nth-of-type(1) {
	border-top: 1px solid;
}

.Detail.babyfood .steps ol li span {
	color: #eb8900;
}
.Detail.family .steps ol li span {
	color: #599900;
}
.Detail.stock .steps ol li span {
	color: #ab3939;
}

.Detail.babyfood .steps ol li {
	border-color: #EDD182;
}
.Detail.family .steps ol li {
	border-color: #BEE62E;
}
.Detail.stock .steps ol li {
	border-color: #FFCCCC;
}

.Detail .steps ol li::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 2em;
	height: 2em;
	transform: translateY(-0.3em);
	background: no-repeat center center;
	background-size: 90%;
}

.Detail .steps figure {
	margin: 1em 0 0;
}

.Detail.babyfood .base ol li:nth-of-type(1)::before {
	background-image: url(../images/babyfood_step_num_1.svg);
}
.Detail.family .base ol li:nth-of-type(1)::before {
	background-image: url(../images/family_step_num_1.svg);
}
.Detail.stock .base ol li:nth-of-type(1)::before {
	background-image: url(../images/stock_step_num_1.svg);
}
.Detail.babyfood .base ol li:nth-of-type(2)::before {
	background-image: url(../images/babyfood_step_num_2.svg);
}
.Detail.family .base ol li:nth-of-type(2)::before {
	background-image: url(../images/family_step_num_2.svg);
}
.Detail.stock .base ol li:nth-of-type(2)::before {
	background-image: url(../images/stock_step_num_2.svg);
}
.Detail.babyfood .base ol li:nth-of-type(3)::before {
	background-image: url(../images/babyfood_step_num_3.svg);
}
.Detail.family .base ol li:nth-of-type(3)::before {
	background-image: url(../images/family_step_num_3.svg);
}
.Detail.stock .base ol li:nth-of-type(3)::before {
	background-image: url(../images/stock_step_num_3.svg);
}
.Detail.babyfood .base ol li:nth-of-type(4)::before {
	background-image: url(../images/babyfood_step_num_4.svg);
}
.Detail.family .base ol li:nth-of-type(4)::before {
	background-image: url(../images/family_step_num_4.svg);
}
.Detail.stock .base ol li:nth-of-type(4)::before {
	background-image: url(../images/stock_step_num_4.svg);
}
.Detail.babyfood .base ol li:nth-of-type(5)::before {
	background-image: url(../images/babyfood_step_num_5.svg);
}
.Detail.family .base ol li:nth-of-type(5)::before {
	background-image: url(../images/family_step_num_5.svg);
}
.Detail.stock .base ol li:nth-of-type(5)::before {
	background-image: url(../images/stock_step_num_5.svg);
}
.Detail.babyfood .base ol li:nth-of-type(6)::before {
	background-image: url(../images/babyfood_step_num_6.svg);
}
.Detail.family .base ol li:nth-of-type(6)::before {
	background-image: url(../images/family_step_num_6.svg);
}
.Detail.stock .base ol li:nth-of-type(6)::before {
	background-image: url(../images/stock_step_num_6.svg);
}
.Detail.babyfood .base ol li:nth-of-type(7)::before {
	background-image: url(../images/babyfood_step_num_7.svg);
}
.Detail.family .base ol li:nth-of-type(7)::before {
	background-image: url(../images/family_step_num_7.svg);
}
.Detail.stock .base ol li:nth-of-type(7)::before {
	background-image: url(../images/stock_step_num_7.svg);
}
.Detail.babyfood .base ol li:nth-of-type(8)::before {
	background-image: url(../images/babyfood_step_num_8.svg);
}
.Detail.family .base ol li:nth-of-type(8)::before {
	background-image: url(../images/family_step_num_8.svg);
}
.Detail.stock .base ol li:nth-of-type(8)::before {
	background-image: url(../images/stock_step_num_8.svg);
}
.Detail.babyfood .base ol li:nth-of-type(9)::before {
	background-image: url(../images/babyfood_step_num_9.svg);
}
.Detail.family .base ol li:nth-of-type(9)::before {
	background-image: url(../images/family_step_num_9.svg);
}
.Detail.stock .base ol li:nth-of-type(9)::before {
	background-image: url(../images/stock_step_num_9.svg);
}


@media all and (max-width: 640px) {
	.Detail .steps ol li {
		font-size: 0.9em;
	}
}

@media all and (min-width: 641px) {
	.Detail .steps ol {
	}
	.Detail .steps ol li {
		font-size: 0.7em;
	}
}

/* ==================== 保存の仕方 ==================== */

.storage .text p {
	margin: 0;
	text-align: left;
}
.storage .image figure {
	margin: 0;
}
.storage .image figure img {
	display: inline-block;
}

@media all and (max-width: 640px) {
	.storage .text p {
		font-size: 0.9em;
	}
	.storage .image {
		margin-top: 1em;
	}

	.Detail.stock5 .storage .image img,
	.Detail.stock6 .storage .image img {
		width: 49%;
	}
	.storage .image img:nth-of-type(n+2) {
		margin-left: 2%;
	}
}

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

	.storage .body {
		display: table;
		width: 100%;
	}
	.storage .body > div {
		display: table-cell;
		vertical-align: top;
	}
	.storage .image {
		padding-left: 1em;
	}
	.storage .image figure {
		white-space: nowrap;
	}
	.storage .image img {
		max-width: none;
	}
	.storage .image img:nth-of-type(n+2) {
		margin-left: 0.5em;
	}
}

/* ==================== ワンポイント ==================== */

.Detail .onepoint .body {
	position: relative;
	border: 4px solid;
	border-radius: 1em;
	padding: 1em;
}

.Detail .onepoint.babyfood .body {
	border-color: #FEED8A;
}
.Detail .onepoint.family .body {
	border-color: #BEE62E;
}
.Detail .onepoint.stock .body {
	border-color: #FFCCCC;
}

.Detail .onepoint h3 {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
}
.Detail .onepoint h4 {
	margin: 0;

}

.Detail .onepoint.babyfood h4 {
	color: #EB8900;
}
.Detail .onepoint.family h4 {
	color: #599900;
}
.Detail .onepoint.stock h4 {
	color: #FF5454;
}

.Detail .onepoint p {
	margin: 1em 0 0;
	text-align: left;
}

@media all and (max-width: 640px) {
	.Detail .onepoint {
		margin-top: 5em;
	}
	.Detail .onepoint .body {
		padding-top: 1.5em;
	}
	.Detail .onepoint h3 {
		width: 100%;
		transform: translateY(-70%);
	}
	.Detail .onepoint h3 img {
		transform-origin: 50% 100%;
		transform: scale(1.2);
	}
	.Detail .onepoint h4 {
		font-size: 1.2em;
	}
	.Detail .onepoint h4 span {
		display: block;
	}
	.Detail .onepoint p {
		font-size: 0.9em;
	}
}

@media all and (min-width: 641px) {
	.Detail .onepoint .body {
		display: inline-block;
		margin-top: 4em;
		width: 30em;
	}
	.Detail .onepoint h3 {
		transform: translate(-50%, -50%);
	}
	.Detail .onepoint h4 {
		font-size: 1em;
	}
	.Detail .onepoint p {
		font-size: 0.7em;
	}
}



/* ==================== enjoylink.css ==================== */

.EnjoyLink {
	margin-top: 3em;
}

@media all and (max-width: 640px) {
	.EnjoyLink .body > div:nth-of-type(n+2) {
		margin-top: 2em;
	}
}

@media all and (min-width: 641px) {
	.EnjoyLink .body {
		display: inline-table;
		border-spacing: 1em 0;
		table-layout: fixed;
	}
	.EnjoyLink .body > div {
		display: table-cell;
		vertical-align: top;
	}
}