/* ==================== ContentsHeader.css ==================== */

.ContentsHeader {
	margin: 1em 0;
	padding: 1em 0;
	background: url(../images/header_base.png) repeat-x;
	background-size: contain;
}
.ContentsHeader > * {
	vertical-align: middle;
}
.ContentsHeader .logo {
	display: inline-block;
}
.ContentsHeader ul {
	display: inline-table;
	border-collapse: collapse;
	margin: 0 0 0 1.5em;
	padding: 0;
	list-style-type: none;
}

.ContentsHeader li {
	display: table-cell;
	vertical-align: middle;
	border: solid #FFCD2A;
	border-width: 0 2px;
	color: #B55800;

	line-height: 1.2;
	transition: color 150ms ease 0;
}

.ContentsHeader[data-path^="/babyfood"] li:nth-of-type(1),
.ContentsHeader[data-path^="/family"] li:nth-of-type(2),
.ContentsHeader[data-path^="/stock"] li:nth-of-type(3),
.ContentsHeader[data-path^="/soup"] li:nth-of-type(4),
.ContentsHeader[data-path^="/enjoy"] li:nth-of-type(5),
.ContentsHeader li:hover {
	color: #E36F00;
}
.ContentsHeader li a {
	display: block;
	padding: 0.25em 0.75em;
	color: inherit;
	text-decoration: none;
}
.ContentsHeader li a:hover {
	color: inherit;
}

.ContentsHeader li span {
	display: block !important;
}

@media all and (max-width: 640px) {
	.ContentsHeader .logo a {
		text-decoration: none;
	}
	.ContentsHeader .logo img {
		width: 16em;
		vertical-align: middle;
	}
	.ContentsHeader .logo a::after {
		content: '';
		display: inline-block;
		vertical-align: middle;
		width: 5.5em;
		height: 2em;
		background: url(../images/header_totop.svg) no-repeat center center;
		background-size: contain;
	}

	.ContentsHeader ul {
		display: none;
	}
}

@media all and (min-width: 641px) {
	.ContentsHeader .logo {
		width: 19em;
	}
	.ContentsHeader li {
		font-size: 0.7em;
	}
}



/* ==================== Recipes.Tab.css ==================== */

.Recipes.Tab .menu ul {
	display: table;
	table-layout: fixed;
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
}
.Recipes.Tab .menu ul::after {
	content: none;
}

.Recipes.Tab .menu li {
	display: table-cell;
	vertical-align: top;
}

.Recipes.Tab .menu-item button {
	border: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background: none;
	background: no-repeat center center;
	background-size: contain;
	outline: none;
}

.Recipes.Tab .menu-item button img {
	opacity: 0;
	transition: opacity 150ms ease;
}
.Recipes.Tab .menu-item button:hover img {
	opacity: 1;
}

.Recipes.Tab:not([data-tabselectedid="1"]) .menu-item[data-id="1"] .caption::after {
	visibility: hidden;
}
.Recipes.Tab:not([data-tabselectedid="1"]) .menu-item[data-id="1"] button {
	transform: scale(0.8);
}
.Recipes.Tab.babyfood .menu-item[data-id="1"] button {
	background-image: url(../images/recipes_icon_category_babyfood1_off.svg);
}
.Recipes.Tab.family .menu-item[data-id="1"] button {
	background-image: url(../images/recipes_icon_category_family1_off.svg);
}
.Recipes.Tab[data-tabselectedid="1"] .menu-item[data-id="1"] button img {
	opacity: 1;
}
.Recipes.Tab:not([data-tabselectedid="1"]) .content[data-id="1"] {
	display: none;
}
.Recipes.Tab:not([data-tabselectedid="2"]) .menu-item[data-id="2"] .caption::after {
	visibility: hidden;
}
.Recipes.Tab:not([data-tabselectedid="2"]) .menu-item[data-id="2"] button {
	transform: scale(0.8);
}
.Recipes.Tab.babyfood .menu-item[data-id="2"] button {
	background-image: url(../images/recipes_icon_category_babyfood2_off.svg);
}
.Recipes.Tab.family .menu-item[data-id="2"] button {
	background-image: url(../images/recipes_icon_category_family2_off.svg);
}
.Recipes.Tab[data-tabselectedid="2"] .menu-item[data-id="2"] button img {
	opacity: 1;
}
.Recipes.Tab:not([data-tabselectedid="2"]) .content[data-id="2"] {
	display: none;
}
.Recipes.Tab:not([data-tabselectedid="3"]) .menu-item[data-id="3"] .caption::after {
	visibility: hidden;
}
.Recipes.Tab:not([data-tabselectedid="3"]) .menu-item[data-id="3"] button {
	transform: scale(0.8);
}
.Recipes.Tab.babyfood .menu-item[data-id="3"] button {
	background-image: url(../images/recipes_icon_category_babyfood3_off.svg);
}
.Recipes.Tab.family .menu-item[data-id="3"] button {
	background-image: url(../images/recipes_icon_category_family3_off.svg);
}
.Recipes.Tab[data-tabselectedid="3"] .menu-item[data-id="3"] button img {
	opacity: 1;
}
.Recipes.Tab:not([data-tabselectedid="3"]) .content[data-id="3"] {
	display: none;
}
.Recipes.Tab:not([data-tabselectedid="4"]) .menu-item[data-id="4"] .caption::after {
	visibility: hidden;
}
.Recipes.Tab:not([data-tabselectedid="4"]) .menu-item[data-id="4"] button {
	transform: scale(0.8);
}
.Recipes.Tab.babyfood .menu-item[data-id="4"] button {
	background-image: url(../images/recipes_icon_category_babyfood4_off.svg);
}
.Recipes.Tab.family .menu-item[data-id="4"] button {
	background-image: url(../images/recipes_icon_category_family4_off.svg);
}
.Recipes.Tab[data-tabselectedid="4"] .menu-item[data-id="4"] button img {
	opacity: 1;
}
.Recipes.Tab:not([data-tabselectedid="4"]) .content[data-id="4"] {
	display: none;
}

@media all and (min-width: 641px) {
	.Recipes.Tab .menu ul {
		width: 30em;
	}
}



/* ==================== Recipes.css ==================== */

.Recipes {
	margin-top: 3em;
}

.Recipes.top,
.Recipes.index,
.Recipes.bento2 {
	margin-top: 2em;
}



/* ==================== Recipes.top.css ==================== */

.Recipes.top .title p {

	text-align: left;
}

.Recipes.top .link {
	line-height: 3.5em;
}
.Recipes.top .link img {
	vertical-align: middle;
}

@media all and (max-width: 640px) {
	.Recipes.top .title {
		padding: 0 1em;
	}
	.Recipes.top .title p {
		font-size: 0.9em;
	}
	.Recipes.top .title p br {
		display: none;
	}
	.Recipes.top .body {
		margin-top: 1em;
	}
	.Recipes.top .link img {
		font-size: 4.5vw;
	}
}

@media all and (min-width: 641px) {
	.Recipes.top .title {
		display: table;
		position: relative;
		z-index: 1;
		width: 46em;
		border-spacing: 1em 0;
		margin: 0 auto -1em;
		text-align: left;
	}
	.Recipes.top .title h3,
	.Recipes.top .title p {
		display: table-cell;
		vertical-align: middle;
	}
	.Recipes.top .title h3 {
		width: 12.5em;
		font-size: inherit;
	}
	.Recipes.top .title h3 img {
		width: 100%;
	}
	.Recipes.top .title p {
		margin-left: 1em;
		font-size: 0.75em;
	}
	.Recipes.top .title p span {
		display: inline-block;
	}
}

/* 手作りのだし・野菜ブイヨン */
.Recipes.top.soup h4 {
	border-radius: 0.5em;
	background: #FFD37D;
	color: #8A5500;

	line-height: 2;
}

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

@media all and (min-width: 641px) {
	.Recipes.top.soup .body ul {
		margin-top: 2.5em;
	}
	.Recipes.top.soup h4 {
		position: absolute;
		top: 0;
	}
	.Recipes.top.soup h4:nth-of-type(1) {
		left: 1.75em;
		width: 30em;
	}
	.Recipes.top.soup h4:nth-of-type(2) {
		right: 1.75em;
		width: 9em;
	}
	.Recipes.top.soup h4 span {
		font-size: 0.8em;
	}
}



/* ==================== Recipes__body.css ==================== */

.Recipes .body {
	display: inline-block;
	position: relative;
	padding: 1em;
}

.Recipes.index .body {
	padding-top: 3em;
}
.Recipes.index.babyfood .body {
	padding-top: 4em;
}

.Recipes.bento2 .body {
	padding-top: 2em; background-color: #FFF7E6;
}


@media (max-width: 640px) {
	.Recipes .body {
		box-sizing: border-box;
		width: 100%;
	}
}


@media all and (min-width: 641px) {
	.Recipes .body {
		width: 42em;
	}
}



/* ==================== Recipes__body__<ul>.css ==================== */

.Recipes .body ul {
	display: inline-flex;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	text-align: left;
	max-width: 100%;
	width: max-content;
}
.Recipes.top .body ul {
	text-align: center;
}

.Recipes .body li {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	text-align: center;
}
.Recipes .body li a {
	display: block;
	color: inherit;
	text-decoration: none;
}


@media all and (max-width: 640px) {
	.Recipes .body li {
		width: 10.5em;
		margin: 0.5em;
	}
}


@media all and (min-width: 641px) {
	.Recipes .body li {
		width: 9em;
		margin: 0.75em;
	}
}



/* ==================== Recipes__caption.css ==================== */

.Recipes.bento2 .caption {
	position: relative;
	z-index: 1;
	transform: translateY(50%);
}

.Recipes .caption::after {
	content: '';
	display: block;
	width: 3em;
	height: 3em;
	margin: 0.5em auto -2em;
	transform: scaleY(0.8) rotate(45deg);
}
.Recipes.bento2 .caption::after {
	content: none;
}

.Recipes.babyfood .caption::after, .Recipes.babyfood .body { background-color: #FEF6C4; }
.Recipes.babyfood .caption.babyfood2::after, .Recipes.babyfood .body.babyfood2 { background-color: #FEF3AA; }
.Recipes.babyfood .caption.babyfood3::after, .Recipes.babyfood .body.babyfood3 { background-color: #FEDC93; }

.Recipes.family .caption::after, .Recipes.family .body { background-color: #E2F5B5; }
.Recipes.family .caption.family1::after, .Recipes.family .body.family1 { background-color: #FFEFBA; }
.Recipes.family .caption.family2::after, .Recipes.family .body.family2 { background-color: #E2F5B5; }
.Recipes.family .caption.family3::after, .Recipes.family .body.family3 { background-color: #D5E9F5; }
.Recipes.family .caption.family4::after, .Recipes.family .body.family4 { background-color: #FFE0E0; }

.Recipes.stock .caption::after, .Recipes.stock .body { background-color: #FFE3E3; }
.Recipes.bento .caption::after, .Recipes.bento .body { background-color: #FFF0CF; }
.Recipes.party .caption::after, .Recipes.party .body { background-color: #FFE3F4; }
.Recipes.soup .caption::after, .Recipes.soup .body { background-color: #FFEFD1; }



/* ==================== Recipes__copy.css ==================== */

.Recipes .copy {
	display: inline-block;
	margin-top: 0.75em;
	text-align: left;
}
.Recipes .copy br {
	display: none;
}

.Recipes.babyfood .copy {
	color: #914018;
}
.Recipes.family .copy {
	color: #3A6300;
}
.Recipes.family .family1 .copy {
	color: #6B3A00;
}
.Recipes.family .family2 .copy {
	color: #325417;
}
.Recipes.family .family3 .copy {
	color: #2E6B8F;
}
.Recipes.family .family4 .copy {
	color: #b54848;
}

.Recipes.stock .copy {
	color: #cf1f1f;
}
.Recipes.bento .copy {
	color: #663000;
}
.Recipes.bento2 .copy {
	display: none;
}
.Recipes.party .copy {
	color: #80003D;
}


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


@media all and (min-width: 641px) {
	.Recipes .copy {
		font-size: 0.6em;
	}
}



/* ==================== Recipes__icon.css ==================== */

.Recipes .icon {
	overflow: hidden;
}
.Recipes.top.babyfood .icon {
	padding-bottom: 0.5em;
}
.Recipes.top.family .icon {
	height: 3.25em;
}
.Recipes.detail.stock .icon,
.Recipes.enjoy .icon {
	height: 2.75em;
}
.Recipes.bento2 .icon {
	display: none;
}

.Recipes.index.babyfood .icon,
.Recipes.detail.babyfood .icon,
.Recipes.index.family .icon,
.Recipes.detail.family .icon {
	display: none;
}

.Recipes .icon img {
	max-width: none;
	width: auto;
}
.Recipes.top.babyfood .icon img {
	height: 7em;
}
.Recipes.top.family .icon img {
	height: 3.75em;
}
.Recipes.detail.stock .icon img,
.Recipes.enjoy .icon img {
	height: 3.25em;
}



/* ==================== Recipes__name.css ==================== */

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

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



/* ==================== Recipes__new.css ==================== */

.Recipes .new .pic {
	position: relative;
}
.Recipes .new .pic::before {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	right: 0;
	top: 0;
	width: 2em;
	height: 2em;
	background: url(../images/new.svg) no-repeat center center;
	background-size: cover;
	transform: translate(40%, -40%);
	animation-name: newIcon;
	animation-duration: 2s;
	animation-timing-function: steps(1);
	animation-iteration-count: infinite;
}

@keyframes newIcon {
	0% {
		width: 1.9em;
		height: 1.9em;
	}
	50% {
		width: 2em;
		height: 2em;
	}
}



/* ==================== Recipes__pic.css ==================== */

.Recipes .pic {
	padding: 0.5em;
	background: white;
}

.Recipes .pic img,
.Recipes .pic .name {
	transition: opacity 200ms ease;
}
.Recipes .pic:hover img,
.Recipes .pic:hover .name {
	opacity: 0.7;
}

.Recipes .pic img {
	display: block;
}
.Recipes .pic .name {
	display: inline-table;
	vertical-align: top;
	margin-top: 0.5em;

}
.Recipes .pic .name > span,
.Recipes .pic .name::before,
.Recipes .pic .name::after {
	display: table-cell;
	vertical-align: middle;
	line-height: 1.2;
}
.Recipes .pic .name::before,
.Recipes .pic .name::after {
	content: '';
	width: 0;
	height: 2.4em;
	white-space: pre;
}
.Recipes .pic .name > span span {
	display: inline-block;
}



/* ==================== Recipes__showLimit.css ==================== */

.Recipes .showLimit:not(.open) li:nth-of-type(n+5) {
	position: fixed;
	visibility: hidden;
	opacity: 0;
}
.Recipes .showLimit.open li:nth-of-type(n+5) {
	opacity: 1;
	transition: opacity 200ms ease;
}

.Recipes .showLimit button {
	position: relative;
	border: none;
	outline: none;
	padding: 0.5em 0;
	background: none;
	cursor: pointer;
}
.Recipes .showLimit:not(.open) button img:nth-of-type(2),
.Recipes .showLimit.open button img:nth-of-type(1) {
	display: none;
}



/* ==================== Title.css ==================== */

.Title h2 + p {

}


@media all and (max-width: 640px) {
	.Title h2 {
		margin: 2em 1em 0;
	}
	.Title.enjoy h2 {
		margin: 0;
	}

	.Title h2 + p {
		display: inline-block;
		padding: 0 1em;
		line-height: 1.4;
		text-align: left;
	}
	.Title h2 + p span {
		display: block;
	}
	.Title h2 + p br {
		display: none;
	}
	.Title.soup h2 + p br,
	.Title.enjoy h2 + p br {
		display: none;
	}

	.Title.caution h2 img {
		width: 15.2em;
	}

}

@media all and (min-width: 641px) {
	.Title {
		margin: 2em auto 0;
	}
	.Title h2 + p {
		font-size: 0.8em;
	}
	.Title.babyfood h2 + p {
		font-size: 0.75em;
	}
}



/* ==================== contentsmenu.css ==================== */

.ContentsMenu {
	margin: 1.5em auto;
}
.ContentsMenu ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.ContentsMenu li {
	display: inline-block;
	margin: 0.25em;
}
.ContentsMenu li:last-child {
	display: block;
	margin-top: 1em;
}

/*
.ContentsMenu li a img {
	transform-origin: 50% 100%;
	transition: all 150ms ease;
}
.ContentsMenu li:not(:last-child) a:hover img {
	transform: scale(1.05);
}
.ContentsMenu li:last-child a:hover img {
	opacity: 0.7;
}
*/

@media all and (max-width: 640px) {
	.ContentsMenu li img {
		font-size: 3.5vw;
	}
	.ContentsMenu li:nth-of-type(3) {
		display: block;
		margin-top: -0.25em;
	}
}

@media all and (min-width: 641px) {
	.ContentsMenu ul {
		width: 40em;
	}
	.ContentsMenu li {
	}
}



/* ==================== footer.css ==================== */

.RecipeFooter {
	margin-top: 3em;
}
.RecipeFooter .logo {
	margin-top: 1.5em;
}

.RecipeFooter .logo a img {
	transform-origin: 50% 100%;
	transition: all 150ms ease;
}
.RecipeFooter .logo a:hover img {
	opacity: 0.7;
}



/* ==================== frame.css ==================== */

.Recipe {
	text-align: center;
}
.Recipe img {
	max-width: 100%;
}
.Recipe hr {
	border: none;
	margin: 0;
	width: 100%;
	height: 0.5em;
	background: url(../images/hr.png) repeat-x;
	background-size: 6.4em;
}

@media all and (max-width: 640px) {
	.Recipe,
	.Recipe img {
		font-size: 4vw;
	}
}

@media all and (min-width: 641px) {
	.Recipe,
	.Recipe img {
		font-size: 20px;
	}
}



/* ==================== link.css ==================== */

img.linkImage {
	transition: opacity 200ms ease;
}

img.linkImage:hover {
	opacity: 0.7;
}



/* ==================== override.css ==================== */