/* ==================== saigaishoku/@.css ==================== */

.saigaishoku {
	display: grid;
	grid-gap: 1.5em;
	color: var(--black);
	line-height: 1.5;
	font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
}



/* ==================== saigaishoku/@reset.css ==================== */

.saigaishoku *,
.saigaishoku div::after,
.saigaishoku dl::after,
.saigaishoku ul::after {
	all: unset;
}

.saigaishoku button,
.saigaishoku a {
	cursor: pointer;
}

.saigaishoku strong {
	font-weight: bold;
}



/* ==================== saigaishoku/@responsive.css ==================== */

.saigaishoku,
.saigaishoku img {
	font-size: 20px;
}


@media (max-width: 640px) {

	.saigaishoku,
	.saigaishoku img {
		font-size: 4vw;
	}

}


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

	.saigaishoku,
	.saigaishoku img {
		font-size: 1.7985611510791vw;
	}

}



/* ==================== saigaishoku/@vars.css ==================== */

.saigaishoku {

	--black: black;

	--skyblue: #8fe3ff;
	--lightyellow: #fff194;
	--yellow: #ffd500;
	--brown: #734500;
	--lightbrown: #c75300;
	--red: #ff0000;
	--lightgray: #e9eff0;
	--orange: #ff6a00;

	--green: #4ead00;
	--blue: #0087db;
	--pink: #ff7575;
	--purple: #df57e0;

	--mayuko: #ff6d4c;

}


@media (max-width: 640px) {

	.saigaishoku {
		--size-m: 90%;
	}

}


@media (min-width: 641px) {

	.saigaishoku {
		--size-m: 80%;
	}

}



/* ==================== saigaishoku/<img>.css ==================== */

.saigaishoku img {
	max-width: 100%;
	vertical-align: bottom;
}



/* ==================== saigaishoku/<p>.css ==================== */

.saigaishoku p {
	font-size: var(--size-m);
}



/* ==================== saigaishoku/&.check/sheet/@.css ==================== */

.saigaishoku.check .sheet {
	display: grid;
	grid-gap: inherit;
}



/* ==================== saigaishoku/&.check/sheet/<h1>.css ==================== */

.saigaishoku.check .sheet h1 {
	justify-self: center;
}


@media (max-width: 640px) {

	.saigaishoku.check .sheet h1 img {
		width: 16em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.check .sheet h1 img {
		width: 31.2em;
	}

}



/* ==================== saigaishoku/&.check/sheet/download/@.css ==================== */

.saigaishoku.check .sheet .download {
	justify-self: center;
	display: grid;
	grid-gap: 1.5em 2em;
}


@media (min-width: 641px) {

	.saigaishoku.check .sheet .download {
		grid-template-columns: 1fr max-content;
		width: 36em;
	}

	.saigaishoku.check .sheet .download > img {
		grid-column: 2;
		grid-row: 1/3;
	}

}



/* ==================== saigaishoku/&.check/sheet/download/<a>.css ==================== */

.saigaishoku.check .sheet .download a {
	justify-self: center;
}

.saigaishoku.check .sheet .download a img {
	width: 14.4em;
}



/* ==================== saigaishoku/&.check/sheet/download/<p>.css ==================== */





/* ==================== saigaishoku/&.check/sheet/download/<ul>.css ==================== */

.saigaishoku.check .sheet .download ul {
	display: grid;
	grid-gap: 0.5em;
	font-size: var(--size-m);
}

.saigaishoku.check .sheet .download ul li {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 0.25em;
	justify-content: start;
}

.saigaishoku.check .sheet .download ul li::before {
	content: '★';
	color: var(--orange);
}


@media (min-width: 641px) {

	.saigaishoku.check .sheet .download ul {
		grid-column: span 2;
	}

}



/* ==================== saigaishoku/&.check/sheet/download/> img.css ==================== */

.saigaishoku.check .sheet .download > img {
	width: 10.3em;
}


@media (max-width: 640px) {

	.saigaishoku.check .sheet .download > img {
		justify-self: center;
	}

}



/* ==================== saigaishoku/&.check/sheet/sample/@.css ==================== */

.saigaishoku.check .sheet .sample {
	display: grid;
	grid-gap: 1.5em;
	justify-items: center;
	border-radius: 0.75em;
	background: #fceefc;
}


@media (max-width: 640px) {

	.saigaishoku.check .sheet .sample {
		padding: 1.25em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.check .sheet .sample {
		padding: 1.75em;
	}

}



/* ==================== saigaishoku/&.check/sheet/sample/<figure>.css ==================== */

.saigaishoku.check .sheet .sample figure img {
	width: 100%;
}



/* ==================== saigaishoku/&.check/sheet/sample/<h2>.css ==================== */

.saigaishoku.check .sheet .sample h2 img {
	height: 1.1em;
}



/* ==================== saigaishoku/&.meal/meal-recipe-intro/@.css ==================== */

.saigaishoku.meal .meal-recipe-intro {
	display: grid;
	grid-gap: 1.5em;
}


@media (max-width: 640px) {

	.saigaishoku.meal .meal-recipe-intro {
		padding: 0 1.25em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-recipe-intro {
		justify-self: center;
		width: 50em;
	}

}



/* ==================== saigaishoku/&.meal/meal-recipe-intro/lead/@.css ==================== */

.saigaishoku.meal .meal-recipe-intro .lead {
	display: grid;
}


@media (max-width: 640px) {

	.saigaishoku.meal .meal-recipe-intro .lead {
		grid-gap: 1em;
		justify-items: center;
	}

}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-recipe-intro .lead {
		justify-self: center;

		grid-auto-flow: column;
		grid-gap: 1.75em;
		align-items: center;
		padding: 0 0.5em;
	}

}



/* ==================== saigaishoku/&.meal/meal-recipe-intro/lead/<figure>.css ==================== */

.saigaishoku.meal .meal-recipe-intro .lead figure img {
	border-radius: 0.1em;
}


@media (max-width: 640px) {

.saigaishoku.meal .meal-recipe-intro .lead figure img {
	width: 16em;
}

}


@media (min-width: 641px) {

.saigaishoku.meal .meal-recipe-intro .lead figure img {
	width: 14em;
}

}



/* ==================== saigaishoku/&.meal/meal-recipe-intro/lead/<h2>.css ==================== */

.saigaishoku.meal .meal-recipe-intro .lead h2 {
	color: var(--brown);
	font-weight: bold;
}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-recipe-intro .lead h2 {
		display: none;
	}

}



/* ==================== saigaishoku/&.meal/meal-recipe-intro/lead/<p>.css ==================== */

.saigaishoku.meal .meal-recipe-intro .lead p strong {
	display: inline-block;
	margin-top: 0.25em;
	color: var(--orange);
}



/* ==================== saigaishoku/&.meal/meal-recipe-intro/meal-tabmenu/@.css ==================== */





/* ==================== saigaishoku/&.meal/meal-recipe-intro/meal-tabmenu/<ul>/@.css ==================== */

.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	justify-content: center;
	box-sizing: border-box;
	background: linear-gradient(var(--yellow), var(--yellow)) no-repeat left bottom / 100% 0.15em;
}


@media (max-width: 640px) {

	.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul {
		padding: 0 0.5em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul {
		grid-column-gap: 0.5em;
		padding: 0 1.5em;
	}

}



/* ==================== saigaishoku/&.meal/meal-recipe-intro/meal-tabmenu/<ul>/<li>/@.css ==================== */

@media (max-width: 640px) {

	.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li {
		margin: 0 -1px;
	}

}



/* ==================== saigaishoku/&.meal/meal-recipe-intro/meal-tabmenu/<ul>/<li>/<a>.css ==================== */

.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li a {
	display: grid;
	align-items: center;
	justify-content: center;
	border: solid rgba(255,213,0,0.4);
	border-width: 0.1em 0.1em 0;
	border-radius: 1em 1em 0 0;
	transition: border 150ms;
}

.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li a:hover {
	border-color: var(--yellow);
}


.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li a::before,
.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li a img {
	aspect-ratio: 180/52;
	grid-column: 1;
	grid-row: 1;
}

.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li a::before {
	content: '';
	background: no-repeat center center / contain;
}

.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li a img {
	object-fit: contain;
}

.rice.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li:nth-of-type(1) a,
.instant.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li:nth-of-type(2) a,
.oyupocha.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li:nth-of-type(3) a {
	border-color: var(--yellow);
	border-width: 0.15em 0.15em 0;
	background: white;
}

.rice.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li:nth-of-type(1) a::before,
.instant.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li:nth-of-type(2) a::before,
.oyupocha.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li:nth-of-type(3) a::before {
	transform: scale(1.05);
}

.rice.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li:nth-of-type(1) a::before { background-image: url(../images/meal_technique_title_1_on.svg); }
.instant.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li:nth-of-type(2) a::before { background-image: url(../images/meal_technique_title_2_on.svg); }
.oyupocha.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li:nth-of-type(3) a::before { background-image: url(../images/meal_technique_title_3_on.svg); }

.rice.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li:nth-of-type(1) a img { visibility: hidden; }
.instant.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li:nth-of-type(2) a img { visibility: hidden; }
.oyupocha.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li:nth-of-type(3) a img { visibility: hidden; }


@media (max-width: 640px) {

	.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li a {
		height: 3.25em;
	}

	.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li a::before,
	.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li a img {
		width: 6.25em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li a {
		height: 3.5em;
	}

	.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li a::before,
	.saigaishoku.meal .meal-recipe-intro .meal-tabmenu ul li a img {
		width: 8em;
	}

}



/* ==================== saigaishoku/&.meal/meal-recipe-intro/pagemenu/@.css ==================== */

.saigaishoku.meal .meal-recipe-intro .pagemenu {
	justify-self: center;
}



/* ==================== saigaishoku/&.meal/meal-recipe-intro/pagemenu/<ul>.css ==================== */

.saigaishoku.meal .meal-recipe-intro .pagemenu ul {
	display: grid;
	grid-gap: 0.75em;
}

.saigaishoku.meal .meal-recipe-intro .pagemenu ul li {
	color: var(--brown);
	font-weight: bold;
}

.saigaishoku.meal .meal-recipe-intro .pagemenu ul a {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 2.5em;
	border: 0.15em solid var(--yellow);
	border-radius: 1.25em;
	padding-left: 2.5em;
	padding-right: 1em;
	color: inherit;
	background: url(../images/meal_pagemenu_arrow.svg) no-repeat left 1em center / auto 0.75em;
}

.saigaishoku.meal .meal-recipe-intro .pagemenu ul a span {
	font-size: 90%;
}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-recipe-intro .pagemenu ul {
		grid-template-columns: repeat(2, 1fr);
	}

	.saigaishoku.meal .meal-recipe-intro .pagemenu ul li {
		font-size: 90%;
	}

	.saigaishoku.meal .meal-recipe-intro .pagemenu ul a {
		transition: background-color 150ms;
	}

	.saigaishoku.meal .meal-recipe-intro .pagemenu ul a:hover {
		background-color: var(--lightyellow);
	}

}



/* ==================== saigaishoku/&.meal/meal-recipes/@.css ==================== */

.saigaishoku.meal .meal-recipes {
	justify-self: center;
}



/* ==================== saigaishoku/&.meal/meal-recipes/<ul>/@.css ==================== */

.saigaishoku.meal .meal-recipes ul {
	display: grid;
}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-recipes ul {
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 3em;
	}

}



/* ==================== saigaishoku/&.meal/meal-recipes/<ul>/<li>/@.css ==================== */

.saigaishoku.meal .meal-recipes ul li {
	display: grid;
	grid-template-rows: repeat(3, auto) 1fr;
	grid-gap: 0.75em;
	align-content: start;
	justify-items: center;
}

.saigaishoku.meal .meal-recipes ul li:nth-last-of-type(n+2) {
	position: relative;
}

.saigaishoku.meal .meal-recipes ul li:nth-last-of-type(n+2)::before {
	content: '';
	position: absolute;
	background-image: radial-gradient(circle, var(--yellow) 40%, white 40%);
}


@media (max-width: 640px) {

	.saigaishoku.meal .meal-recipes ul li {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
		'h3 figure'
		'p figure'
		'p a';
	}

	.saigaishoku.meal .meal-recipes ul li h3 { grid-area: h3; }
	.saigaishoku.meal .meal-recipes ul li figure { grid-area: figure; }
	.saigaishoku.meal .meal-recipes ul li p { grid-area: p; }
	.saigaishoku.meal .meal-recipes ul li > a { grid-area: a; }


	.saigaishoku.meal .meal-recipes ul li:nth-last-of-type(n+2) {
		margin-bottom: 1em;
		padding-bottom: 1em;

	}

	.saigaishoku.meal .meal-recipes ul li:nth-last-of-type(n+2)::before {
		left: 0;
		bottom: 0;
		width: 100%;
		height: 0.2em;
		background-repeat: repeat-x;
		background-size: 0.4em 0.2em;
		transform: translateY(-50%);
	}

}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-recipes ul li {
		padding: 0.5em 0;
	}

	.saigaishoku.meal .meal-recipes ul li:nth-last-of-type(n+2)::before {
		left: 0;
		top: 0;
		left: 100%;
		top: 0;
		width: 0.15em;
		height: 100%;
		background-repeat: repeat-y;
		background-size: 0.15em 0.3em;
		transform: translateX(calc(1.5em - 50%));
	}

}



/* ==================== saigaishoku/&.meal/meal-recipes/<ul>/<li>/<figure>.css ==================== */

.saigaishoku.meal .meal-recipes ul li figure {
	display: grid;
}

.saigaishoku.meal .meal-recipes ul li figure img {
	border-radius: 0.1em;
}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-recipes ul li figure a {
		overflow: hidden;
	}

	.saigaishoku.meal .meal-recipes ul li figure a img {
		transition: transform 250ms;
	}

	.saigaishoku.meal .meal-recipes ul li figure a:hover img {
		transform: scale(1.1);
	}

}



/* ==================== saigaishoku/&.meal/meal-recipes/<ul>/<li>/<h3>.css ==================== */

.saigaishoku.meal .meal-recipes ul li h3 img {
	width: 8.5em;
}



/* ==================== saigaishoku/&.meal/meal-recipes/<ul>/<li>/<p>.css ==================== */

.saigaishoku.meal .meal-recipes ul li p {
	line-height: 1.4;
}



/* ==================== saigaishoku/&.meal/meal-recipes/<ul>/<li>/> a.css ==================== */

.saigaishoku.meal .meal-recipes ul li > a img {
	width: 8em;
}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-recipes ul li > a {
		align-self: end;
	}

	.saigaishoku.meal .meal-recipes ul li > a:hover {
		background: url(../images/meal_technique_todetail_on.svg) no-repeat center center / contain;
	}

	.saigaishoku.meal .meal-recipes ul li > a img {
		transition: opacity 250ms;
	}
	.saigaishoku.meal .meal-recipes ul li > a:hover img {
		opacity: 0;
	}


}



/* ==================== saigaishoku/&.meal/meal-tools/@.css ==================== */

.saigaishoku.meal .meal-tools {
	justify-self: center;
	display: grid;
	grid-gap: 1em;
	position: relative;
}

.saigaishoku.meal .meal-tools::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	width: 100%;
	height: calc(100% - 1.1em);
	border: 0.2em solid #b2dbf4;
	border-radius: 1.5em;
	background: #f0f9ff;
}

.saigaishoku.meal .meal-tools > * {
	position: relative;
}


@media (max-width: 640px) {

	.saigaishoku.meal .meal-tools {
		justify-self: stretch;
		padding: 0 1.25em 1.25em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-tools {
		width: 36em;
		padding: 0 2em 2em;
	}

}



/* ==================== saigaishoku/&.meal/meal-tools/<button>.css ==================== */

.saigaishoku.meal .meal-tools button {
	justify-self: center;
}

.saigaishoku.meal .meal-tools button img {
	width: 7.8em;
}

.saigaishoku.meal .meal-tools.open button {
	display: none;
}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-tools button {
		margin-top: 0.5em;
	}

	.saigaishoku.meal .meal-tools button:hover {
		background: url(../images/meal_tools_openbtn_on.svg) no-repeat center center / contain;
	}

	.saigaishoku.meal .meal-tools button img {
		transition: opacity 250ms;
	}

	.saigaishoku.meal .meal-tools button:hover img {
		opacity: 0;
	}

}



/* ==================== saigaishoku/&.meal/meal-tools/<h1>.css ==================== */

.saigaishoku.meal .meal-tools h1 {
	justify-self: center;
}

.saigaishoku.meal .meal-tools h1 img {
	width: 15em;
}



/* ==================== saigaishoku/&.meal/meal-tools/body/@.css ==================== */

.saigaishoku.meal .meal-tools .body {
	display: grid;
	grid-gap: 1em;
}

.saigaishoku.meal .meal-tools:not(.open) .body {
	visibility: hidden;
	position: fixed;
	opacity: 0;
}

.saigaishoku.meal .meal-tools.open .body {
	transition: opacity 600ms;
}



/* ==================== saigaishoku/&.meal/meal-tools/body/<h2>.css ==================== */

.saigaishoku.meal .meal-tools .body h2 {
	justify-self: center;
	color: var(--green);
	color: var(--blue);
	font-weight: bold;
}

.saigaishoku.meal .meal-tools .body h2:nth-of-type(n+2) {
	margin-top: 0.5em;
}



/* ==================== saigaishoku/&.meal/meal-tools/body/<ul>/@.css ==================== */

.saigaishoku.meal .meal-tools .body ul {
	display: grid;
	grid-gap: 1em;
}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-tools .body ul {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

}



/* ==================== saigaishoku/&.meal/meal-tools/body/<ul>/<li>/@.css ==================== */

.saigaishoku.meal .meal-tools .body ul li {
	display: grid;
}



/* ==================== saigaishoku/&.meal/meal-tools/body/<ul>/<li>/<figure>.css ==================== */

.saigaishoku.meal .meal-tools .body ul li figure {
	display: grid;
	background: white;
	border-radius: 0.5em;
	padding: 0.75em;
}

.saigaishoku.meal .meal-tools .body ul li figure figcaption {
	line-height: 1.4;
}


@media (max-width: 640px) {

	.saigaishoku.meal .meal-tools .body ul li figure {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1em;
		align-items: center;
	}

	.saigaishoku.meal .meal-tools .body ul li figure figcaption {
		font-size: 85%;
	}

}


@media (min-width: 641px) {

	.saigaishoku.meal .meal-tools .body ul li figure {
		grid-gap: 0.5em;
		align-content: start;
		justify-items: center;
	}

	.saigaishoku.meal .meal-tools .body ul li figure img {
		width: 9em;
	}

	.saigaishoku.meal .meal-tools .body ul li figure figcaption {
		font-size: 70%;
	}

}



/* ==================== saigaishoku/&.practice/letstry/@.css ==================== */

.saigaishoku.practice .letstry {
	display: grid;
}

.saigaishoku.practice .letstry figure img {
	border-radius: 0.1em;
}

.saigaishoku.practice .letstry > img {
	justify-self: end;
}


@media (max-width: 640px) {

	.saigaishoku.practice .letstry {
		grid-gap: 1em;
	}

	.saigaishoku.practice .letstry > img {
		margin-top: -1em;
		margin-right: 1em;
		width: 4em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.practice .letstry {
/*
		grid-template-columns: max-content 1fr;
		grid-template-areas:
		'figure blank'
		'figure p'
		'figure img';
		grid-gap: 1em 2em;
		align-items: center;
*/
	}
/*
	.saigaishoku.practice .letstry figure { grid-area: figure; }
	.saigaishoku.practice .letstry p { grid-area: p; }
	.saigaishoku.practice .letstry > img { grid-area: img; }
*/


	.saigaishoku.practice .letstry {
		grid-template-columns: 1fr max-content;
		grid-column-gap: 2em;
	}

	.saigaishoku.practice .letstry figure img {
		width: 17.2em;
	}

	.saigaishoku.practice .letstry p {
		/* width: 25em; */
	}

	.saigaishoku.practice .letstry > img {
		width: 5em;
	}

}



/* ==================== saigaishoku/&.practice/lunch/@.css ==================== */

.saigaishoku.practice .lunch {
	display: grid;
	border: 0.2em solid #ffea80;
	border-radius: 0.75em;
}


@media (max-width: 640px) {

	.saigaishoku.practice .lunch {
		grid-gap: 1em;
		padding: 1.25em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.practice .lunch {
		grid-gap: 1.5em;
		padding: 1.75em;
	}

}



/* ==================== saigaishoku/&.practice/lunch/<h2>.css ==================== */

.saigaishoku.practice .lunch h2 {
	justify-self: center;
}


@media (max-width: 640px) {

	.saigaishoku.practice .lunch h2 img {
		width: 9em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.practice .lunch h2 img {
		width: 24em;
	}

}



/* ==================== saigaishoku/&.practice/merit/@.css ==================== */

@media (min-width: 641px) {

	.saigaishoku.practice .merit {
		width: 43em;
		justify-self: center;
	}

}



/* ==================== saigaishoku/&.practice/merit/<ul>/@.css ==================== */

.saigaishoku.practice .merit ul {
	display: grid;
}


@media (max-width: 640px) {

	.saigaishoku.practice .merit ul {
		grid-row-gap: 0.75em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.practice .merit ul {
		grid-template-columns: 428fr 438fr;
		grid-column-gap: 1em;
		align-items: start;
		background: url(../images/practice_saigainohi_merit_chara_2.png) no-repeat left bottom / 8.8em auto;
	}

}



/* ==================== saigaishoku/&.practice/merit/<ul>/<li>/@.css ==================== */

.saigaishoku.practice .merit ul li {
	display: grid;
	grid-gap: 0.5em;
	padding: 1.5em 0 1.75em;
	background: url(../images/practice_merit_base.png) no-repeat center top / 100% 100%;
}

.saigaishoku.practice .merit ul li:nth-of-type(2) {
	padding-bottom: 0;
	background-size: 100% calc(100% - 6em);
}


.saigaishoku.practice .merit ul li > img {
	justify-self: end;
	height: 8em;
}


@media (min-width: 641px) {

	.saigaishoku.practice .merit ul li:nth-of-type(2) {
		grid-row: span 3;
	}

	.saigaishoku.practice .merit ul li:nth-of-type(3) { margin-top: -1.5em; transform: translateX(2em); }
	.saigaishoku.practice .merit ul li:nth-of-type(4) { margin-top: -3em; transform: translateX(15.5em); }

}



/* ==================== saigaishoku/&.practice/merit/<ul>/<li>/<h3>.css ==================== */

.saigaishoku.practice .merit ul li h3 {
	justify-self: center;
}


@media (max-width: 640px) {

	.saigaishoku.practice .merit ul li h3 img {
		height: 1.2em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.practice .merit ul li h3 img {
		height: 1.3em;
	}

}



/* ==================== saigaishoku/&.practice/merit/<ul>/<li>/<p>.css ==================== */

.saigaishoku.practice .merit ul li p {
	padding: 0 3.25em;
	text-align: justify;
}


@media (max-width: 640px) {

	.saigaishoku.practice .merit ul li:nth-of-type(2) {
		position: relative;
	}

	.saigaishoku.practice .merit ul li:nth-of-type(2)::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		aspect-ratio: 177/103;
		width: 6.8em;
		background: url(../images/practice_saigainohi_merit_chara_2.png) no-repeat left bottom / contain;
	}

}



/* ==================== saigaishoku/&.practice/mieruka/@.css ==================== */





/* ==================== saigaishoku/&.practice/mieruka/<ul>/@.css ==================== */

.saigaishoku.practice .mieruka ul {
	display: grid;
	grid-gap: 0.75em;
}


@media (min-width: 641px) {

	.saigaishoku.practice .mieruka ul {
		grid-template-columns: repeat(3, 1fr);
	}

}



/* ==================== saigaishoku/&.practice/mieruka/<ul>/<li>.css ==================== */

.saigaishoku.practice .mieruka ul li {
	display: grid;
	grid-gap: 1em;
	border-radius: 0.75em;
	padding: 1em;
	background: #fff1f1;
	justify-items: center;
}

.saigaishoku.practice .mieruka ul li h3 img {
	width: 10em;
}


@media (max-width: 640px) {

	.saigaishoku.practice .mieruka ul li figure img {
		width: 15em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.practice .mieruka ul li figure img {
		aspect-ratio: 245/200;
		object-fit: contain;
	}

}



/* ==================== saigaishoku/&.stock/content1/@.css ==================== */

.saigaishoku.stock .content1 {
	display: grid;
	grid-gap: inherit;
}



/* ==================== saigaishoku/&.stock/content1/<h2>.css ==================== */

.saigaishoku.stock .content1 h2 {
	justify-self: center;
}

.saigaishoku.stock .content1 h2 img {
	height: 3.4em;
}

.saigaishoku.stock .content1 h2:nth-of-type(1) img {
	height: 3.6em;
}



/* ==================== saigaishoku/&.stock/content1/casette/@.css ==================== */

.saigaishoku.stock .content1 .casette {
	display: grid;
	grid-gap: 1em;
	justify-items: center;
}



/* ==================== saigaishoku/&.stock/content1/casette/<figure>.css ==================== */

.saigaishoku.stock .content1 .casette figure img {
	width: 12.8em;
}



/* ==================== saigaishoku/&.stock/content1/foods/@.css ==================== */

.saigaishoku.stock .content1 .foods {
	justify-self: center;
}



/* ==================== saigaishoku/&.stock/content1/foods/<ul>/@.css ==================== */

.saigaishoku.stock .content1 .foods ul {
	display: grid;
	grid-gap: 1em;
}



/* ==================== saigaishoku/&.stock/content1/foods/<ul>/<li>/@.css ==================== */

.saigaishoku.stock .content1 .foods ul li {
	display: grid;
}

.saigaishoku.stock .content1 .foods ul li::before {
	content: '';
	aspect-ratio: 186/120;
	width: 9.3em;
	background: no-repeat center center / contain;
}

.saigaishoku.stock .content1 .foods ul li:nth-of-type(1)::before { background-image: url(../images/stock_content1_eiyo_cap_1.svg); }
.saigaishoku.stock .content1 .foods ul li:nth-of-type(2)::before { background-image: url(../images/stock_content1_eiyo_cap_2.svg); }
.saigaishoku.stock .content1 .foods ul li:nth-of-type(3)::before { background-image: url(../images/stock_content1_eiyo_cap_3.svg); }


@media (max-width: 640px) {

	.saigaishoku.stock .content1 .foods ul li {
		grid-gap: 0.5em;
		justify-items: center;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .content1 .foods ul li {
		grid-gap: 0.25em 1em;
		grid-template-areas:
		'before blank1'
		'before h3'
		'before p'
		'before blank2';
		justify-content: start;
	}

	.saigaishoku.stock .content1 .foods ul li::before { grid-area: before; }
	.saigaishoku.stock .content1 .foods ul li h3 { grid-area: h3; }
	.saigaishoku.stock .content1 .foods ul li p { grid-area: p; }

}



/* ==================== saigaishoku/&.stock/content1/foods/<ul>/<li>/<h3>.css ==================== */

.saigaishoku.stock .content1 .foods ul li h3 {
	font-weight: bold;
	font-size: var(--size-m);
}

.saigaishoku.stock .content1 .foods ul li:nth-of-type(1) h3 { color: #ff7b00; }
.saigaishoku.stock .content1 .foods ul li:nth-of-type(2) h3 { color: #ff5487; }
.saigaishoku.stock .content1 .foods ul li:nth-of-type(3) h3 { color: #48a800; }


@media (max-width: 640px) {

	.saigaishoku.stock .content1 .foods ul li h3 {
		display: grid;
		justify-items: center;
	}

}



/* ==================== saigaishoku/&.stock/content1/foods/<ul>/<li>/<p>.css ==================== */

@media (min-width: 641px) {

	.saigaishoku.stock .content1 .foods ul li p {
		display: grid;
	}

}



/* ==================== saigaishoku/&.stock/content1/water/@.css ==================== */

.saigaishoku.stock .content1 .water {
	display: grid;
	position: relative;
}

.saigaishoku.stock .content1 .water::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	border-radius: 1em;
	background: #def5ff;
}


.saigaishoku.stock .content1 .water > * {
	position: relative;
}


@media (max-width: 640px) {

	.saigaishoku.stock .content1 .water {
		padding: 0 1em 1em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .content1 .water {
		justify-self: center;
		box-sizing: border-box;
		width: 34em;
	}

}



/* ==================== saigaishoku/&.stock/content1/water/&_1.css ==================== */

.saigaishoku.stock .content1 .water_1 {
	position: relative;
	justify-items: center;
}

.saigaishoku.stock .content1 .water_1::after {
	content: '';
	position: absolute;
	width: 100%;
	background: no-repeat center center / contain;
}


@media (max-width: 640px) {

	.saigaishoku.stock .content1 .water_1::before {
		height: calc(100% - 3em);
	}

	.saigaishoku.stock .content1 .water_1 figure {
		display: grid;
		justify-items: center;
		grid-gap: 1em;
	}

	.saigaishoku.stock .content1 .water_1 figure img {
		width: 17.5em;
	}

	.saigaishoku.stock .content1 .water_1 figcaption {
		justify-self: center;
	}

	.saigaishoku.stock .content1 .water_1 figcaption img {
		width: 6em;
	}

	.saigaishoku.stock .content1 .water_1::after {
		background-image: url(../images/stock_content1_water_chara_sp.png);
		left: 0;
		top: 0;
		height: 6em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .content1 .water_1 {
		padding: 3em 0 1.5em;
	}

	.saigaishoku.stock .content1 .water_1::before {
		height: calc(100% - 1.5em);
	}

	.saigaishoku.stock .content1 .water_1 figure {
		position: static;
	}

	.saigaishoku.stock .content1 .water_1 figure img {
		position: relative;
		width: 21.1em;
	}

	.saigaishoku.stock .content1 .water_1 figcaption {
		position: absolute;
		left: 0;
		top: 0;
		transform: translateX(-1.5em);
	}

	.saigaishoku.stock .content1 .water_1 figcaption img {
		width: 6.4em;
	}

	.saigaishoku.stock .content1 .water_1::after {
		left: 0;
		bottom: 0;
		aspect-ratio: 680/120;
		background-image: url(../images/stock_content1_water_chara_pc.png);
	}

}



/* ==================== saigaishoku/&.stock/content1/water/&_2.css ==================== */

.saigaishoku.stock .content1 .water_2 {
	justify-items: center;
	grid-gap: 1em;
}

.saigaishoku.stock .content1 .water_2::before {
	height: calc(100% - 1.3em);
}

.saigaishoku.stock .content1 .water_2 h3 img {
	height: 2.6em;
}

.saigaishoku.stock .content1 .water_2 ul {
	display: grid;
	grid-column-gap: 0.25em;
	grid-template-columns: repeat(2, auto);
	justify-content: center;
}

.saigaishoku.stock .content1 .water_2 li {
	font-size: var(--size-m);
}
.saigaishoku.stock .content1 .water_2 li::before {
	content: '・';
	color: #1b74cf;
	font-size: 112.5%;
}

.saigaishoku.stock .content1 .water_2 li strong {
	font-size: 112.5%;
	color: #1b74cf;
}

.saigaishoku.stock .content1 .water_2 p {
	display: grid;
	grid-gap: 1em;
}

.saigaishoku.stock .content1 .water_2 p img {
	width: 9.6em;
}

@media (max-width: 640px) {

	.saigaishoku.stock .content1 .water_2 p {
		justify-items: center;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .content1 .water_2 {
		padding: 0 1.5em 1.5em;
	}

	.saigaishoku.stock .content1 .water_2 p {
		grid-auto-flow: column;
		align-items: center;
	}

}



/* ==================== saigaishoku/&.stock/content2/@.css ==================== */

.saigaishoku.stock .content2 {
	display: grid;
	grid-gap: inherit;
}



/* ==================== saigaishoku/&.stock/content2/> figure.css ==================== */

.saigaishoku.stock .content2 > figure {
	justify-self: center;
}


@media (max-width: 640px) {

	.saigaishoku.stock .content2 > figure,
	.saigaishoku.stock .content2 > figure img {
		width: 100%;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .content2 > figure img {
		width: 32.4em;
	}

}



/* ==================== saigaishoku/&.stock/content2/phasefree/@.css ==================== */

.saigaishoku.stock .content2 .phasefree {
	display: grid;
	grid-gap: 1em;
	background: #d7fa96;
	border-radius: 1em;
	padding: 1.25em;
}



/* ==================== saigaishoku/&.stock/content2/phasefree/<h2>.css ==================== */

.saigaishoku.stock .content2 .phasefree h2 {
	justify-self: center;
}

.saigaishoku.stock .content2 .phasefree h2 img {
	height: 1.2em;
}



/* ==================== saigaishoku/&.stock/content3/@.css ==================== */

.saigaishoku.stock .content3 {
	display: grid;
}


@media (max-width: 640px) {

	.saigaishoku.stock .content3 {
		grid-gap: 1em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .content3 {
		grid-template-columns: 1fr auto;
		grid-template-areas:
		'blank1 figure'
		'p1 figure'
		'p2 figure'
		'blank2 figure';
		grid-gap: 1em 1.5em;
		align-content: center;
	}

	.saigaishoku.stock .content3 figure { grid-area: figure; }
	.saigaishoku.stock .content3 p:nth-of-type(1) { grid-area: p1; }
	.saigaishoku.stock .content3 p:nth-of-type(2) { grid-area: p2; }

}



/* ==================== saigaishoku/&.stock/content3/<figure>.css ==================== */

@media (max-width: 640px) {

	.saigaishoku.stock .content3 figure,
	.saigaishoku.stock .content3 figure img {
		width: 100%;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .content3 figure img {
		width: 20em;
	}

}



/* ==================== saigaishoku/&.stock/content3/<p>:nth-of-type(2).css ==================== */

.saigaishoku.stock .content3 p:nth-of-type(2) {
	display: grid;
	grid-gap: inherit;
}

.saigaishoku.stock .content3 p:nth-of-type(2) strong {
	border-radius: 0.5em;
	padding: 0.75em;
	background: var(--lightyellow);
	color: var(--brown);
	font-weight: bold;
	font-size: 112.5%;
}

.saigaishoku.stock .content3 p:nth-of-type(2) strong span {
	color: var(--orange);
}


@media (max-width: 640px) {

	.saigaishoku.stock .content3 p:nth-of-type(2) strong {
		text-align: center;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .content3 p:nth-of-type(2) strong {
		display: grid;
		grid-auto-flow: column;
		grid-gap: 0.25em;
		align-items: center;
		justify-content: center;
	}

	.saigaishoku.stock .content3 p:nth-of-type(2) strong br {
		display: none;
	}

}



/* ==================== saigaishoku/&.stock/content4/@.css ==================== */

.saigaishoku.stock .content4 {
	position: relative;
	display: grid;
	grid-gap: 1em;
}



/* ==================== saigaishoku/&.stock/content4/<dl>.css ==================== */

.saigaishoku.stock .content4 dl {
	display: grid;
	font-size: var(--size-m);
}

.saigaishoku.stock .content4 dl dt {
	color: var(--lightbrown);
	font-weight: bold;
	font-size: 112.5%;
}


@media (max-width: 640px) {

	.saigaishoku.stock .content4 dl {
		grid-gap: 0.5em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .content4 dl {
		grid-template-columns: max-content 1fr;
		grid-gap: 1em 2em;
		justify-content: start;
		align-items: start;
	}

	.saigaishoku.stock .content4 dl dt::after {
		position: absolute;
		content: '';
		width: 10em;
		height: 1.5em;
		background: radial-gradient(circle, var(--lightbrown) 40%, white 40%) repeat-x left center / 0.3em 0.15em;
		transform: translateX(0.5em);
	}

	.saigaishoku.stock .content4 dl dd {
		position: relative;
		padding-left: 0.5em;
		background: white;
	}

}



/* ==================== saigaishoku/&.stock/content4/<h3>.css ==================== */

.saigaishoku.stock .content4 h3 {
	color: var(--green);
	font-weight: bold;
}



/* ==================== saigaishoku/&.stock/content4/<hr>.css ==================== */

.saigaishoku.stock .content4 hr {
	height: 0.2em;
	background: radial-gradient(circle, var(--yellow) 40%, white 40%) repeat-x left center / 0.4em 0.2em;
}



/* ==================== saigaishoku/&.stock/content4/> p.css ==================== */

.saigaishoku.stock .content4 > p:nth-of-type(3) {
	color: var(--brown);
}


@media (min-width: 641px) {

	.saigaishoku.stock .content4 > p:nth-of-type(1) {
		width: 40em;
	}

}



/* ==================== saigaishoku/&.stock/content4/chara.css ==================== */

.saigaishoku.stock .content4 .chara img[src*="chara_1"] { width: 9.8em; }
.saigaishoku.stock .content4 .chara img[src*="chara_2"] { width: 11.6em; }
.saigaishoku.stock .content4 .chara img[src*="chara_3"] { width: 9.5em; }


@media (max-width: 640px) {

	.saigaishoku.stock .content4 .chara {
		justify-self: center;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .content4 .chara {
		position: relative;
	}

	.saigaishoku.stock .content4 .chara img {
		position: absolute;
		right: 1em;
		bottom: 0;
	}

}



/* ==================== saigaishoku/&.stock/content4/<figure>/@.css ==================== */

.saigaishoku.stock .content4 figure {
	display: grid;
	grid-gap: 0.5em;
	justify-items: center;
}


@media (min-width: 641px) {

	.saigaishoku.stock .content4 figure {
		width: 34em;
	}

}



/* ==================== saigaishoku/&.stock/content4/<figure>/<img>.css ==================== */

.saigaishoku.stock .content4 figure img[src*="products_1"] { width: 13.6em; }
.saigaishoku.stock .content4 figure img[src*="products_3"] { width: 15em; }


@media (max-width: 640px) {

	.saigaishoku.stock .content4 figure img[src*="products_2"] { width: 16.5em; }

}


@media (min-width: 641px) {

	.saigaishoku.stock .content4 figure img[src*="products_2"] { width: 28.75em; }

}



/* ==================== saigaishoku/&.stock/content4/<figure>/<figcaption>/@.css ==================== */

.saigaishoku.stock .content4 figure figcaption {

	position: relative;

	display: grid;
	grid-gap: inherit;
	font-weight: bold;
	font-size: var(--size-m);
}

.saigaishoku.stock .content4 figure figcaption a img {
	width: 13.6em;
}


@media (min-width: 641px) {

	.saigaishoku.stock .content4 figure figcaption a:hover {
		background: url(../images/btn_meiji_products_on.svg) no-repeat center center / contain;
	}
	.saigaishoku.stock .content4 figure figcaption a img {
		transition: opacity 250ms;
	}
	.saigaishoku.stock .content4 figure figcaption a:hover img {
		opacity: 0;
	}

}



/* ==================== saigaishoku/&.stock/content4/<figure>/<figcaption>/sublink.css ==================== */

.saigaishoku.stock .content4 figure figcaption .sublink {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 0.5em;
	position: absolute;
	left: 50%;
	bottom: 100%;
	padding: 0.5em;
	transform: translateX(-50%);
	white-space: nowrap;
	transition: opacity 150ms;
}

.saigaishoku.stock .content4 figure figcaption:not(:hover) .sublink {
	visibility: hidden;
	opacity: 0;
}


.saigaishoku.stock .content4 figure figcaption .sublink a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 2.5em;
	border: 1px solid var(--red);
	border-radius: 1.25em;
	padding: 0 1.25em;
	background: white;
	color: var(--red);
	transition: all 150ms;
}

.saigaishoku.stock .content4 figure figcaption .sublink a:hover {
	background: var(--red);
	color: white;
}


@media (max-width: 640px) {

	.saigaishoku.stock .content4 figure figcaption .sublink {
		font-size: 80%;
	}

	.saigaishoku.stock .content4 figure figcaption .sublink a {
		border-width: 0.5px;
	}

}



@media (min-width: 641px) {

	.saigaishoku.stock .content4 figure figcaption .sublink {
		font-size: 90%;
	}

}



/* ==================== saigaishoku/&.stock/content5/@.css ==================== */

.saigaishoku.stock .content5 {
	display: grid;
	grid-gap: inherit;
}



/* ==================== saigaishoku/&.stock/content5/<figure>.css ==================== */

.saigaishoku.stock .content5 figure {
	justify-self: center;
}


@media (max-width: 640px) {

	.saigaishoku.stock .content5 figure img {
		width: 100%;
	}

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

	.saigaishoku.stock .content5 figure img {
		width: 33.6em;
	}

}



/* ==================== saigaishoku/&.stock/content5/> p.css ==================== */

.saigaishoku.stock .content5 > p strong {
	color: var(--orange);
}



/* ==================== saigaishoku/&.stock/content6/@.css ==================== */

.saigaishoku.stock .content6 {
	display: grid;
	grid-gap: 0.5em;
}


@media (min-width: 641px) {

	.saigaishoku.stock .content6 {
		grid-template-columns: 1fr auto;
		align-items: end;
	}

}



/* ==================== saigaishoku/&.stock/content6/<h2>.css ==================== */

.saigaishoku.stock .content6 h2 {
	color: var(--green);
	font-weight: bold;
}



/* ==================== saigaishoku/&.stock/content6/<h3>.css ==================== */

.saigaishoku.stock .content6 h3 {
	margin-top: 0.5em;
	color: var(--lightbrown);
	font-size: var(--size-m);
	font-weight: bold;
}



/* ==================== saigaishoku/&.stock/content6/<img>.css ==================== */

@media (max-width: 640px) {
	.saigaishoku.stock .content6_baby img { height: 6em; }
	.saigaishoku.stock .content6_senior img { height: 8em; }

}



@media (min-width: 641px) {

	.saigaishoku.stock .content6 img {
		width: 13em;
		object-fit: contain;
		object-position: center bottom;
	}

	.saigaishoku.stock .content6_baby img { grid-row: span 2; height: 8.1em; }
	.saigaishoku.stock .content6_senior img { grid-row: span 5; height: 11.4em; }

}



/* ==================== saigaishoku/&.stock/content6/&_baby/@.css ==================== */

@media (max-width: 640px) {

	.saigaishoku.stock .content6_baby img,
	.saigaishoku.stock .content6_baby p {
		grid-column: 1;
		grid-row: 2;
	}

	.saigaishoku.stock .content6_baby img {
		justify-self: end;
	}

	.saigaishoku.stock .content6_baby p::before {
		content: '';
		display: block;
		float: right;
		aspect-ratio: 150/160;
		height: 7.5em;
	}

}



/* ==================== saigaishoku/&.stock/content6/&_senior/@.css ==================== */

@media (max-width: 640px) {

	.saigaishoku.stock .content6_senior * {
		grid-column: 1;
	}

	.saigaishoku.stock .content6_senior h2 { grid-row: 1; }
	.saigaishoku.stock .content6_senior h3:nth-of-type(1) { grid-row: 2; }
	.saigaishoku.stock .content6_senior p:nth-of-type(1) { grid-row: 3; }

	.saigaishoku.stock .content6_senior img {
		grid-row: 1/4;
		justify-self: end;
	}

	.saigaishoku.stock .content6_senior p:nth-of-type(1) {
		width: 16em;
	}

}



/* ==================== saigaishoku/&.stock/hohoemi/@.css ==================== */

.saigaishoku.stock .hohoemi {
	position: relative;
	display: grid;
	border: 0.2em solid #ffb2b2;
	padding: 1.5em;
}


@media (max-width: 640px) {

	.saigaishoku.stock .hohoemi {
		border-radius: 1em;
		grid-gap: 1.25em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .hohoemi {
		grid-template-columns: 1fr max-content;
		grid-template-areas:
		'h3 h3'
		'blank1 figure'
		'p figure'
		'milkis figure'
		'blank2 figure'
		'link link';
		grid-gap: 1em;
		align-items: center;
		border-radius: 2em;
	}

	.saigaishoku.stock .hohoemi h3 { grid-area: h3; }
	.saigaishoku.stock .hohoemi > p { grid-area: p; }
	.saigaishoku.stock .hohoemi figure { grid-area: figure; }
	.saigaishoku.stock .hohoemi .milkis { grid-area: milkis; }
	.saigaishoku.stock .hohoemi .link { grid-area: link; }

}



/* ==================== saigaishoku/&.stock/hohoemi/<figure>.css ==================== */

.saigaishoku.stock .hohoemi figure img {
	width: 14.7em;
}


@media (max-width: 640px) {

	.saigaishoku.stock .hohoemi figure {
		justify-self: center;
	}

}



/* ==================== saigaishoku/&.stock/hohoemi/<h3>.css ==================== */

.saigaishoku.stock .hohoemi h3 {
	justify-self: center;
}


@media (max-width: 640px) {

	.saigaishoku.stock .hohoemi h3 img {
		width: 15.6em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .hohoemi h3 img {
		width: 21em;
	}

}



/* ==================== saigaishoku/&.stock/hohoemi/link.css ==================== */

.saigaishoku.stock .hohoemi .link p {
	display: grid;
	grid-gap: 0.25em;
	justify-items: center;
}

.saigaishoku.stock .hohoemi .link p span {
	display: grid;
	grid-gap: 0.5em;
	grid-auto-flow: column;
	align-items: start;
	color: var(--red);
	font-weight: bold;
}

.saigaishoku.stock .hohoemi .link p span::before,
.saigaishoku.stock .hohoemi .link p span::after {
	content: '';
	width: 0;
	height: 1em;
	border: 1px solid var(--red);
}

.saigaishoku.stock .hohoemi .link p span::before {
	transform-origin: right bottom;
	transform: rotate(-30deg);
}
.saigaishoku.stock .hohoemi .link p span::after {
	transform-origin: left bottom;
	transform: rotate(30deg);
}

.saigaishoku.stock .hohoemi .link p img {
	width: 13.6em;
}


@media (max-width: 640px) {

	.saigaishoku.stock .hohoemi .link p {
		font-size: 80%;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .hohoemi .link a img {
		transition: opacity 250ms;
	}

	.saigaishoku.stock .hohoemi .link a:hover img {
		opacity: 0.7;
	}

}



/* ==================== saigaishoku/&.stock/hohoemi/milkis.css ==================== */

.saigaishoku.stock .hohoemi .milkis {
	display: grid;
	grid-gap: 0.5em;
}

.saigaishoku.stock .hohoemi .milkis h4 {
	color: var(--green);
	font-size: var(--size-m);
	font-weight: bold;
}


.saigaishoku.stock .hohoemi .milkis dl {
	display: grid;
	grid-row-gap: 0.25em;
	grid-template-columns: max-content 1fr;
	font-size: var(--size-m);
}

.saigaishoku.stock .hohoemi .milkis dt {
	color: var(--lightbrown);
}
.saigaishoku.stock .hohoemi .milkis dt::after {
	content: '…';
	margin: 0 0.25em;
}



/* ==================== saigaishoku/&.stock/meiji-recommend/@.css ==================== */

.saigaishoku.stock .meiji-recommend {
	position: relative;
	display: grid;
	grid-gap: 1em;
}

.saigaishoku.stock .meiji-recommend::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	width: 100%;
	height: calc(100% - 1.25em);
	border: 0.2em solid #ffb2b2;
}

.saigaishoku.stock .meiji-recommend > * {
	position: relative;
}


@media (max-width: 640px) {

	.saigaishoku.stock .meiji-recommend {
		padding: 0 1.5em 1.5em;
	}

	.saigaishoku.stock .meiji-recommend::before {
		border-radius: 1em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .meiji-recommend {
		padding: 0 1.5em 1.5em;
	}

	.saigaishoku.stock .meiji-recommend::before {
		border-radius: 2em;
	}

}



/* ==================== saigaishoku/&.stock/meiji-recommend/<a>.css ==================== */

.saigaishoku.stock .meiji-recommend a {
  display: flex;
  justify-content: center;
}
@media (min-width: 641px) {
  .saigaishoku.stock .meiji-recommend a:hover {
    background: url(../images/stock_recommend_todetail_on.svg) no-repeat center bottom/8.2em auto;
  }
}
@media (min-width: 641px) {
  .saigaishoku.stock .meiji-recommend a img {
    transition: opacity 250ms;
  }
}
.saigaishoku.stock .meiji-recommend a img[src*=todetail] {
  width: 8.2em;
}
@media (min-width: 641px) {
  .saigaishoku.stock .meiji-recommend a:hover img[src*=todetail] {
    opacity: 0;
  }
}



/* ==================== saigaishoku/&.stock/meiji-recommend/<h2>.css ==================== */

.saigaishoku.stock .meiji-recommend h2 {
	justify-self: center;
}

.saigaishoku.stock .meiji-recommend h2 img {
	height: 2.5em;
}



/* ==================== saigaishoku/&.stock/meiji-recommend/&_1/<p>.css ==================== */

.saigaishoku.stock .meiji-recommend_1 p {
	color: var(--red);
}


@media (min-width: 641px) {

	.saigaishoku.stock .meiji-recommend_1 p {
		display: grid;
		justify-items: center;
	}

}



/* ==================== saigaishoku/&.stock/meiji-recommend/&_1/<ul>/@.css ==================== */

.saigaishoku.stock .meiji-recommend_1 ul {
	display: grid;
	/* align-items: end;
	align-items: stretch; */
}


@media (max-width: 640px) {

	.saigaishoku.stock .meiji-recommend_1 ul {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .meiji-recommend_1 ul {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		grid-gap: 1.25em;
		padding: 0 1.25em;
	}

}



/* ==================== saigaishoku/&.stock/meiji-recommend/&_1/<ul>/<li>/@.css ==================== */

.saigaishoku.stock .meiji-recommend_1 ul li {
	display: grid;
	grid-gap: 1em;
	grid-template-rows: 1fr max-content;
}



/* ==================== saigaishoku/&.stock/meiji-recommend/&_1/<ul>/<li>/<figure>.css ==================== */

.saigaishoku.stock .meiji-recommend_1 ul li figure {
	display: grid;
	grid-template-rows: 1fr max-content;
	grid-gap: 0.25em;
	align-items: center;
}

.saigaishoku.stock .meiji-recommend_1 ul li figure figcaption {
	font-size: var(--size-m);
	font-weight: bold;
	line-height: 1.3;
	text-align:center;
}
.saigaishoku.stock .meiji-recommend_1 ul li figure figcaption span {
	display: inline-block;
}



/* ==================== saigaishoku/&.stock/meiji-recommend/&_2/body/@.css ==================== */

.saigaishoku.stock .meiji-recommend_2 .body {
	display: grid;
	align-items: center;
}


@media (max-width: 640px) {

	.saigaishoku.stock .meiji-recommend_2 .body {
		grid-gap: 1.5em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .meiji-recommend_2 .body {
		grid-auto-flow: column;
	}

}



/* ==================== saigaishoku/&.stock/meiji-recommend/&_2/body/<a>.css ==================== */

.saigaishoku.stock .meiji-recommend_2 .body a {
	display: grid;
	grid-gap: 1em;
	justify-items: center;
}

.saigaishoku.stock .meiji-recommend_2 .body a img[src*="logo"] {
	width: 8.6em;
}



/* ==================== saigaishoku/&.stock/meiji-recommend/&_2/body/<figure>.css ==================== */

.saigaishoku.stock .meiji-recommend_2 .body figure {
	display: grid;
	grid-gap: 0.25em;
	justify-items: center;
}

.saigaishoku.stock .meiji-recommend_2 .body figure img {
	width: 8.9em;
}

.saigaishoku.stock .meiji-recommend_2 .body figure figcaption {
	display: grid;
	font-size: var(--size-m);
	font-weight: bold;
	text-align: center;
	line-height: 1.3;
}



/* ==================== saigaishoku/&.stock/meiji-recommend/&_2/body/<ul>.css ==================== */

.saigaishoku.stock .meiji-recommend_2 .body ul {
	display: grid;
}


@media (max-width: 640px) {

	.saigaishoku.stock .meiji-recommend_2 .body ul {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 0.5em 1em;
	}

	.saigaishoku.stock .meiji-recommend_2 .body ul li:nth-of-type(3) {
		grid-column: span 2;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .meiji-recommend_2 .body ul {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		grid-gap: 1em;
	}

}



/* ==================== saigaishoku/&.stock/pagemenu/@.css ==================== */





/* ==================== saigaishoku/&.stock/pagemenu/<ul>.css ==================== */

.saigaishoku.stock .pagemenu ul {
	display: grid;
	align-items: end;
}


@media (max-width: 640px) {

	.saigaishoku.stock .pagemenu ul {
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 0.5em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.stock .pagemenu ul {
		width: 50em;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		grid-gap: 0.25em;
	}

	.saigaishoku.stock .pagemenu ul li img {
		transition: transform 250ms;
	}

	.saigaishoku.stock .pagemenu ul:hover li img {
		transform: scale(0.9);
	}

	.saigaishoku.stock .pagemenu ul li:hover img {
		transform: scale(1.05);
	}

	.saigaishoku.stock .pagemenu ul li:nth-of-type(odd) { padding-bottom: 1em; }
	.saigaishoku.stock .pagemenu ul li:nth-of-type(even) { padding-top: 1em; }

}



/* ==================== saigaishoku/&.top/intro/@.css ==================== */

.saigaishoku.top .intro {
	display: grid;
	grid-gap: 1.5em;
	justify-items: center;
}

.saigaishoku.top .intro::before {
	content: '';
	justify-self: stretch;
	background:
	url(../images/bg_city.png) repeat-x center bottom,
	linear-gradient(var(--skyblue), var(--skyblue)) no-repeat center top;
}


@media (max-width: 640px) {

	.saigaishoku.top .intro::before {
		height: 4.5em;
		margin-bottom: -1em;
		background-size: 37.5em auto, 100% calc(100% - 0.1em);
	}

}


@media (min-width: 641px) {

	.saigaishoku.top .intro::before {
		height: 7.5em;
		margin-bottom: -1.5em;
		background-size: 60em auto, 100% calc(100% - 0.1em);
	}

}



/* ==================== saigaishoku/&.top/intro/<h1>.css ==================== */

@media (max-width: 640px) {

	.saigaishoku.top .intro h1 img {
		width: 20.5em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.top .intro h1 img {
		width: 60em;
		max-width: 94vw;
	}

}



/* ==================== saigaishoku/&.top/intro/lead/@.css ==================== */

.saigaishoku.top .intro .lead {
	display: grid;
	justify-items: center;
	grid-gap: 1em;
}


@media (max-width: 640px) {

	.saigaishoku.top .intro .lead::before {
		grid-row: 2;
		content: '';
		width: 10.9em;
		aspect-ratio: 218/188;
		background: url(../images/lead_image.png) no-repeat center center / contain;
	}

	.saigaishoku.top .intro .lead {
		padding: 0 1.25em;
	}

}



/* ==================== saigaishoku/&.top/intro/lead/<h2>.css ==================== */

.saigaishoku.top .intro .lead h2 {
	color: var(--lightbrown);
	font-weight: bold;
}


@media (max-width: 640px) {

	.saigaishoku.top .intro .lead h2 {
		display: grid;
		justify-items: center;
		line-height: 1.3;
	}

}



/* ==================== saigaishoku/&.top/intro/lead/<p>.css ==================== */

@media (min-width: 641px) {

	.saigaishoku.top .intro .lead p {
		display: grid;
		justify-items: center;
	}

}



/* ==================== saigaishoku/&.top/intro/notes/@.css ==================== */

.saigaishoku.top .intro .notes {
	position: relative;
	display: grid;
	grid-gap: 1em;
	border: 0.15em solid #ffb2b2;
	border-radius: 1.5em;
	background: #fff2f2;
	color: var(--brown);
}

.saigaishoku.top .intro .notes::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background:
	url(../images/notes_image_1.png) no-repeat left 1.5em center / contain,
	url(../images/notes_image_2.png) no-repeat right 1.5em center / contain;
	transform: translateY(-50%);
}


@media (max-width: 640px) {

	.saigaishoku.top .intro .notes {
		margin: 1.5em 1.25em 0;
		padding: 1.25em;
	}

	.saigaishoku.top .intro .notes::before {
		height: 4em;
	}



}


@media (min-width: 641px) {

	.saigaishoku.top .intro .notes {
		padding: 1.5em;
		width: 40em;
	}

	.saigaishoku.top .intro .notes::before {
		height: 5em;
	}

}



/* ==================== saigaishoku/&.top/intro/notes/<h3>.css ==================== */

.saigaishoku.top .intro .notes h3 {
	justify-self: center;
	font-weight: bold;
}

.saigaishoku.top .intro .notes h3 strong {
	color: var(--red);
}


@media (max-width: 640px) {

	.saigaishoku.top .intro .notes h3 {
		display: grid;
		justify-items: center;
		line-height: 1.3;
	}

}


@media (min-width: 641px) {

	.saigaishoku.top .intro .notes h3 {
		font-size: 90%;
	}

}



/* ==================== saigaishoku/&.top/intro/notes/> p.css ==================== */

.saigaishoku.top .intro .notes > p strong:nth-of-type(1) {
	color: var(--red);
}



/* ==================== saigaishoku/&.top/intro/notes/link.css ==================== */

.saigaishoku.top .intro .notes .link {
	justify-self: center;
}

.saigaishoku.top .intro .notes .link p {
	display: grid;
}

.saigaishoku.top .intro .notes .link span {
	display: grid;
	align-items: center;
	height: 2.5em;
	border-radius: 1.25em;
	padding: 0 1em;
	background: var(--green);
	color: white;
}

.saigaishoku.top .intro .notes .link a {
	color: var(--green);
	display: grid;
	line-height: 1.3;
}


@media (max-width: 640px) {

	.saigaishoku.top .intro .notes .link p {
		grid-row-gap: 0.75em;
		justify-items: center;
		font-size: 80%;
	}

	.saigaishoku.top .intro .notes .link a {
		text-align: center;
		word-break: break-all;
	}

}


@media (min-width: 641px) {

	.saigaishoku.top .intro .notes .link p {
		grid-template-columns: max-content 1fr;
		grid-column-gap: 1em;
		align-items: center;
		font-size: 70%;
	}

	.saigaishoku.top .intro .notes .link a:hover {
		text-decoration: underline;
	}

}



/* ==================== saigaishoku/&.top/menu/@.css ==================== */

.saigaishoku.top .menu {
	justify-self: center;
}

.saigaishoku.top .menu ul {
	display: grid;
}


@media (max-width: 640px) {

	.saigaishoku.top .menu ul {
		grid-gap: 0.75em;
	}

	.saigaishoku.top .menu img {
		width: 20em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.top .menu ul {
		grid-template-columns: repeat(2, 1fr);
		grid-row-gap: 0.75em;
		grid-gap: 1em;
		align-items: end;
	}

	.saigaishoku.top .menu li {
		transition: transform 250ms;
	}

	.saigaishoku.top .menu li:hover {
		transform: scale(1.05);
	}

	.saigaishoku.top .menu img {
		width: 21em;
	}

}



/* ==================== saigaishoku/&.top/supervisor/@.css ==================== */

.saigaishoku.top .supervisor {
	display: grid;
	grid-row-gap: 1em;
}


@media (max-width: 640px) {

	.saigaishoku.top .supervisor {
		grid-template-columns: 1fr;
	}

	.saigaishoku.top .supervisor figure,
	.saigaishoku.top .supervisor p {
		grid-column: 1;
		grid-row: 2;
	}

}


@media (min-width: 641px) {

	.saigaishoku.top .supervisor {
		grid-template-columns: auto auto;
		grid-column-gap: 1.5em;
		width: 36em;
	}

	.saigaishoku.top .supervisor figure {
		grid-column: 2;
		grid-row: 1/3;
	}

}



/* ==================== saigaishoku/&.top/supervisor/<figure>.css ==================== */

.saigaishoku.top .supervisor figure img {
	border-radius: 0.25em;
}


@media (max-width: 640px) {

	.saigaishoku.top .supervisor figure {
		justify-self: end;
	}

	.saigaishoku.top .supervisor figure img {
		width: 8.6em;
	}

}


@media (min-width: 641px) {

	.saigaishoku.top .supervisor figure img {
		width: 10em;
	}

}



/* ==================== saigaishoku/&.top/supervisor/<h3>.css ==================== */

.saigaishoku.top .supervisor h3 {
	position: relative;
	display: grid;
	grid-gap: 0 0.5em;
	align-items: end;
	justify-content: start;
	grid-template-columns: auto auto;
	color: var(--mayuko);
	font-weight: bold;
	font-size: 120%;
}

.saigaishoku.top .supervisor h3 img[src*="cap"] {
	position: absolute;
	width: 10em;
}

.saigaishoku.top .supervisor h3 img[src*="title"] {
	grid-row: span 2;
	width: 3.9em;
}

.saigaishoku.top .supervisor h3 small {
	align-self: start;
	font-weight: normal;
	font-size: 60%;
}


@media (max-width: 640px) {

	.saigaishoku.top .supervisor h3 {
		justify-self: center;
	}

	.saigaishoku.top .supervisor h3 img[src*="cap"] {
		left: 50%;
		bottom: 100%;
		transform: translate(-50%, 0);
	}

}


@media (min-width: 641px) {

	.saigaishoku.top .supervisor h3 img[src*="cap"] {
		left: 0;
		bottom: 100%;
		transform: translate(-3.05em, -0.25em);
	}

}



/* ==================== saigaishoku/&.top/supervisor/<p>.css ==================== */

@media (max-width: 640px) {

	.saigaishoku.top .supervisor p {

	}

	.saigaishoku.top .supervisor p::before {
		content: '';
		display: block;
		float: right;
		width: 10.5em;
		aspect-ratio: 174/246;
	}

}

@media (min-width: 641px) {

	.saigaishoku.top .supervisor p {
		font-size: 70%;
		line-height: 1.6;
	}

}



/* ==================== saigaishoku/chara-talk/@.css ==================== */

.saigaishoku .chara-talk {
	display: grid;
}

.saigaishoku .chara-talk_center {
	justify-self: center;
}


@media (max-width: 640px) {

	.saigaishoku .chara-talk {
		grid-gap: 1em;
	}

}


@media (min-width: 641px) {

	.saigaishoku .chara-talk {
		grid-gap: 0.75em;
	}

}



/* ==================== saigaishoku/chara-talk/> div/@.css ==================== */

.saigaishoku .chara-talk > div {
	position: relative;
	display: grid;
	align-items: center;
	justify-content: start;
	grid-auto-flow: column;
}

.saigaishoku .chara-talk > div.chara {
	padding-left: 5em;
}
.saigaishoku .chara-talk > div.teacher {
	margin-left: auto;
	padding-right: 6em;
}

.saigaishoku .chara-talk > div::before {
	content: '';
	position: absolute;
	top: 50%;
	aspect-ratio: 1/1;
	transform: translateY(-50%);
	background: no-repeat center center / contain;
}
.saigaishoku .chara-talk > div.chara::before {
	left: 0;
	width: 5em;
}
.saigaishoku .chara-talk > div.teacher::before {
	right: 0;
	width: 6em;
}

.saigaishoku .chara-talk > div.chara_1_1::before { background-image: url(../images/chara_talk_1_1.png); }
.saigaishoku .chara-talk > div.chara_1_2::before { background-image: url(../images/chara_talk_1_2.png); }
.saigaishoku .chara-talk > div.chara_2_1::before { background-image: url(../images/chara_talk_2_1.png); }
.saigaishoku .chara-talk > div.chara_2_2::before { background-image: url(../images/chara_talk_2_2.png); }
.saigaishoku .chara-talk > div.chara_3_1::before { background-image: url(../images/chara_talk_3_1.png); }
.saigaishoku .chara-talk > div.teacher::before { background-image: url(../images/chara_talk_teacher.png); }

.saigaishoku .chara-talk > div::after {
	content: '';
	width: 1em;
	aspect-ratio: 1.1547/1;
	background: var(--lightgray);
	border-radius: 0.1em 0 0 0;

}
.saigaishoku .chara-talk > div.chara::after { transform: translateX(50%) rotate(-30deg) skewX(30deg); }
.saigaishoku .chara-talk > div.teacher::after { transform: translateX(-50%) rotate(-30deg) skewX(30deg); }

.saigaishoku .chara-talk > div.chara::after { order: 1; }
.saigaishoku .chara-talk > div.chara p { order: 2; }

.saigaishoku .chara-talk > div.teacher::after { order: 2; }
.saigaishoku .chara-talk > div.teacher p { order: 1; }



/* ==================== saigaishoku/chara-talk/> div/<p>.css ==================== */

.saigaishoku .chara-talk > div p {
	display: flex;
	align-items: center;
	border-radius: 1em;
	padding: 1em;
	background: var(--lightgray);
}


@media (min-width: 641px) {

	.saigaishoku .chara-talk > div p {
		max-width: 34em;
	}

}



/* ==================== saigaishoku/content-intro/@.css ==================== */

.saigaishoku .content-intro {
	display: grid;
	grid-gap: inherit;
}


@media (max-width: 640px) {

	.saigaishoku .content-intro {
		padding: 0 1.25em;
	}

}



/* ==================== saigaishoku/content-intro/lead/@.css ==================== */

.saigaishoku .content-intro .lead {
	display: grid;
	grid-gap: 1em;
}



/* ==================== saigaishoku/content-intro/lead/<h2>.css ==================== */

.saigaishoku .content-intro .lead h2 {
	display: grid;
	grid-gap: inherit;
	justify-items: center;
	color: var(--orange);
	font-weight: bold;
}

.saigaishoku .content-intro .lead h2 img {
	height: 3.8em;
}


@media (min-width: 641px) {

	.saigaishoku .content-intro .lead h2 {
	}

}



/* ==================== saigaishoku/content-intro/lead/<p>.css ==================== */

@media (min-width: 641px) {

	.saigaishoku .content-intro .lead p {
		display: grid;
		text-align: center;
	}

}



/* ==================== saigaishoku/content-title/@.css ==================== */

.saigaishoku .content-title {
	position: relative;
	display: grid;
	justify-items: center;
}


@media (min-width: 641px) {

	.saigaishoku .content-title::before {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 50em;
		aspect-ratio: 1050/186;
		transform: translate(-50%);
		background: url(../images/content_title_image.png) no-repeat center bottom / contain;
	}

}



/* ==================== saigaishoku/content-title/<h1>.css ==================== */

.saigaishoku .content-title h1 {
	position: relative;
}


@media (max-width: 640px) {

	.saigaishoku .content-title h1 img {
		width: 20em;
	}

}


@media (min-width: 641px) {

	.saigaishoku .content-title h1 img {
		width: 26em;
	}

}



/* ==================== saigaishoku/contents/@.css ==================== */

.saigaishoku .contents {
	display: grid;
	grid-gap: 2em;
	position: relative;
}

.top.saigaishoku .contents {
	grid-gap: 3em;
}

.stock.saigaishoku .contents {
	padding-top: 0;
}


.saigaishoku .contents::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background:
	url(../images/bg_ground.png) repeat-x center top,
	url(../images/bg_city.png) repeat-x center bottom,
	linear-gradient(var(--lightyellow), var(--lightyellow)) no-repeat center bottom 0.1em;
}

.saigaishoku .contents > * {
	position: relative;
}


@media (max-width: 640px) {

	.saigaishoku .contents {
		padding: 2.5em 1em 4em;
	}

	.saigaishoku .contents::before {
		background-size: auto 4em, 25em auto, 100% calc(100% - 4em);
	}

	.stock.saigaishoku .contents::before {
		height: calc(100% - 4em);
	}

}


@media (min-width: 641px) {

	.saigaishoku .contents {
		padding: 2.5em calc((100% - 50em) / 2) 5em;
	}

	.saigaishoku .contents::before {
		background-size: auto 6em, 37.5em auto, 100% calc(100% - 6em);
	}

	.stock.saigaishoku .contents::before {
		height: calc(100% - 5em);
	}

}



/* ==================== saigaishoku/contents/border-base/@.css ==================== */

.saigaishoku .contents .border-base {
	display: grid;
	position: relative;
}

.saigaishoku .contents .border-base::before,
.saigaishoku .contents .border-base::after {
	content: '';
	z-index: 0;
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.saigaishoku .contents .border-base::before {
	background: url(../images/bg_border.png) repeat left top / 8.2em auto;
}

.saigaishoku .contents .border-base::after {
	box-sizing: border-box;
	padding: 0.5em;
	background: linear-gradient(white, white) no-repeat center center / 100% 100%;
	background-clip: content-box;
}

.saigaishoku .contents .border-base > * {
	position: relative;
	z-index: 1;
}


@media (max-width: 640px) {

	.saigaishoku .contents .border-base {
		grid-gap: 1.25em;
		padding: 1.75em;
	}

	.saigaishoku .contents .border-base::before,
	.saigaishoku .contents .border-base::after {
		border-radius: 1.5em;
	}

}


@media (min-width: 641px) {

	.saigaishoku .contents .border-base {
		grid-gap: 1.75em;
		padding: 2.25em;
	}

	.saigaishoku .contents .border-base_flex {
		justify-self: center;
	}

	.saigaishoku .contents .border-base::before,
	.saigaishoku .contents .border-base::after {
		border-radius: 2em;
	}

}



/* ==================== saigaishoku/contents/border-base/&_practice/<h1>.css ==================== */

.saigaishoku .contents .border-base_practice h1 {
	justify-self: center;
}

.saigaishoku .contents .border-base_practice h1 img {
	height: 2.6em;
}


@media (max-width: 640px) {

	.saigaishoku .contents .border-base_practice h1 {
		max-width: 95%;
	}

}



/* ==================== saigaishoku/contents/border-base/&_practice/> h2.css ==================== */

.saigaishoku .contents .border-base_practice > h2 {
	justify-self: center;
}


@media (max-width: 640px) {

	.saigaishoku .contents .border-base_practice > h2 img {
		height: 1.8em;
	}

}


@media (min-width: 641px) {

	.saigaishoku .contents .border-base_practice > h2 img {
		height: 1.9em;
	}

}



/* ==================== saigaishoku/contents/border-base/&_recipe/@.css ==================== */

.saigaishoku .contents .border-base_recipe {
	padding-top: 0;
}

.saigaishoku .contents .border-base_recipe::before,
.saigaishoku .contents .border-base_recipe::after {
	height: calc(100% - 1em);
}



/* ==================== saigaishoku/contents/border-base/&_recipe/<h1>.css ==================== */

.saigaishoku .contents .border-base_recipe h1 {

	justify-self: center;

	display: grid;
	align-items: center;
	justify-items: center;
	padding: 0.5em 1.25em;
	box-sizing: border-box;
	min-height: 2.75em;
	border: 0.2em solid white;
	border-radius: 1.375em;
	background: var(--yellow);
	color: var(--brown);
	font-weight: bold;
	text-align: center;
	line-height: 1.3;

}

.saigaishoku .contents .border-base_recipe h1 span {
	font-size: 110%;
}


@media (max-width: 640px) {

	.saigaishoku .contents .border-base_recipe h1 {
		font-size: 105%;
	}

}


@media (min-width: 641px) {

	.saigaishoku .contents .border-base_recipe h1 {
		grid-auto-flow: column;
		grid-column-gap: 0.1em;
		font-size: 110%;
	}

}



/* ==================== saigaishoku/contents/border-base/&_recipe/> p.css ==================== */

.saigaishoku .contents .border-base_recipe > p {
	color: var(--brown);
}


@media (min-width: 641px) {

	.saigaishoku .contents .border-base_recipe > p {
		text-align: center;
	}

}



/* ==================== saigaishoku/contents/border-base/&_stock/<h1>.css ==================== */

.saigaishoku .contents .border-base_stock h1 {
	justify-self: center;
}

.saigaishoku .contents .border-base_stock h1 img {
	height: 2.4em;
}


@media (max-width: 640px) {

	.saigaishoku .contents .border-base_stock h1 img {
		max-width: 95%;
	}

}



/* ==================== saigaishoku/contents/content-footer/@.css ==================== */

.saigaishoku .contents .content-footer {
	display: grid;
	grid-gap: 1em;
	justify-items: center;
	background: linear-gradient(var(--lightyellow), var(--lightyellow)) no-repeat center top / 100% calc(100% - 0.1em);
}



/* ==================== saigaishoku/contents/content-footer/<h2>.css ==================== */

.saigaishoku .contents .content-footer h2 img {
	width: 15.5em;
}



/* ==================== saigaishoku/contents/content-footer/menu.css ==================== */

.saigaishoku .contents .content-footer .menu ul {
	display: grid;
}

.saigaishoku .contents .content-footer .menu li.on {
	display: none;
}


@media (max-width: 640px) {

	.saigaishoku .contents .content-footer .menu ul {
		grid-gap: 0.5em;
	}

	.saigaishoku .contents .content-footer .menu li img {
		width: 17em;
	}

}


@media (min-width: 641px) {

	.saigaishoku .contents .content-footer .menu ul {
		grid-auto-flow: column;
		grid-gap: 1em;
	}

	.saigaishoku .contents .content-footer .menu li img {
		width: 14.5em;
		transition: transform 250ms;
	}

	.saigaishoku .contents .content-footer .menu li:hover img {
		transform: scale(1.05);
	}

}



/* ==================== saigaishoku/contents/recipe/@.css ==================== */

.saigaishoku .contents .recipe {
	display: grid;
}



/* ==================== saigaishoku/contents/recipe/<h3>.css ==================== */

.saigaishoku .contents .recipe h3 {
	color: var(--green);
	font-size: var(--size-m);
	font-weight:  bold;
}



/* ==================== saigaishoku/contents/recipe/materials.css ==================== */

.saigaishoku .contents .recipe .materials dl {
	overflow: hidden;
	display: grid;
	align-items: end;
	grid-template-columns: auto auto;
	grid-gap: 0.25em 1em;
	position: relative;
}

.saigaishoku .contents .recipe .materials dt,
.saigaishoku .contents .recipe .materials dd {
	font-size: var(--size-m);
}

.saigaishoku .contents .recipe .materials dt {
	justify-self: start;
	position: relative;
}
.saigaishoku .contents .recipe .materials dt small {
	display: inline-block;
	font-size: 80%;
}

.saigaishoku .contents .recipe .materials dt::after {
	content: '';
	position: absolute;
	bottom: 0;
	width: 100vw;
	height: 1.5em;
	transform: translateX(0.5em);
	background: linear-gradient(#d9d9d9, #d9d9d9) no-repeat center center / 100% 1px;
	background: radial-gradient(circle, #ccc 40%, white 40%) repeat-x left center / 0.3em 0.15em;
}

.saigaishoku .contents .recipe .materials dd {
	justify-self: end;
	position: relative;
	padding-left: 0.5em;
	background: white;
	text-align: right;
}


@media (max-width: 640px) {

	.saigaishoku .contents .recipe_instant_5 dt:nth-of-type(2),
	.saigaishoku .contents .recipe_instant_5 dd:nth-of-type(2) {
		grid-column: 1/3;
		grid-row: 2;
	}

}



/* ==================== saigaishoku/contents/recipe/&_rice/@.css ==================== */

.saigaishoku .contents .recipe_rice {
	grid-gap: inherit;
}


@media (min-width: 641px) {

	.saigaishoku .contents .recipe_rice {
		grid-template-columns: max-content 1fr;
	}

}



/* ==================== saigaishoku/contents/recipe/&_rice/<h3>.css ==================== */

@media (max-width: 640px) {

	.saigaishoku .contents .recipe_rice h3 {
		font-size: 110%;
	}

	.saigaishoku .contents .recipe_rice h3:nth-of-type(n+2) {
		margin-top: 1em;
	}

}


@media (min-width: 641px) {

	.saigaishoku .contents .recipe_rice h3 {
		font-size: 90%;
	}

}



/* ==================== saigaishoku/contents/recipe/&_rice/materials.css ==================== */

@media (min-width: 641px) {

	.saigaishoku .contents .recipe_rice .materials {
		justify-self: start;
		min-width: 16em;
	}

}



/* ==================== saigaishoku/contents/recipe/&_rice/steps.css ==================== */

@charset "UTF-8";
.contents .recipe_rice .steps {
  display: grid;
  grid-gap: 0.75em;
}
.contents .recipe_rice .steps ol {
  display: grid;
  grid-row-gap: 0.75em;
}
.contents .recipe_rice .steps ol li {
  display: grid;
  grid-gap: 0.25em;
}
@media (min-width: 641px) {
  .contents .recipe_rice .steps ol li {
    grid-column-gap: 1em;
    grid-template-columns: 1fr max-content;
    grid-template-areas: "h4 figure" "p figure" ". figure";
  }
  .contents .recipe_rice .steps ol li h4 {
    grid-area: h4;
  }
  .contents .recipe_rice .steps ol li p {
    grid-area: p;
  }
  .contents .recipe_rice .steps ol li figure {
    grid-area: figure;
  }
}
.contents .recipe_rice .steps ol li h4 {
  color: var(--lightbrown);
  font-weight: bold;
  font-size: var(--size-m);
}
@media (max-width: 640px) {
  .contents .recipe_rice .steps ol li figure {
    margin: 1em;
  }
}
@media (min-width: 641px) {
  .contents .recipe_rice .steps ol li figure img {
    width: 12em;
  }
}
.contents .recipe_rice .steps .note {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 0.1em;
  justify-content: start;
  color: var(--orange);
  font-weight: bold;
}
.contents .recipe_rice .steps .note::before {
  content: "※";
}



/* ==================== saigaishoku/contents/recipe/&_tmpl/@.css ==================== */

.saigaishoku .contents .recipe_tmpl {
	display: grid;
	grid-row-gap: 1em;
}

.saigaishoku .contents .recipe_tmpl:nth-of-type(n+2) {
	padding-top: 1.65em;
	background: radial-gradient(circle, var(--yellow) 40%, white 40%) repeat-x left top / 0.4em 0.2em;
}



@media (min-width: 641px) {

	.saigaishoku .contents .recipe_tmpl {
		grid-template-columns: 15em 1fr;
		grid-column-gap: 2em;
		align-items: start;
	}

	.saigaishoku .contents .recipe_tmpl figure {
		order: -1;
		grid-column: 1;
		grid-row: span 4;
	}

}



/* ==================== saigaishoku/contents/recipe/&_tmpl/<figure>.css ==================== */

.saigaishoku .contents .recipe_tmpl figure img {
	border-radius: 2px;
}


@media (max-width: 640px) {

	.saigaishoku .contents .recipe_tmpl figure {
		justify-self: center;
		width: 90%;
	}

}



/* ==================== saigaishoku/contents/recipe/&_tmpl/<h2>.css ==================== */

.saigaishoku .contents .recipe_tmpl h2 {
	color: var(--lightbrown);
	font-weight: bold;
}


@media (max-width: 640px) {

	.saigaishoku .contents .recipe_tmpl h2 {
		font-size: 110%;
		text-align: center;
	}

}



/* ==================== saigaishoku/contents/recipe/&_tmpl/materials.css ==================== */

.saigaishoku .contents .recipe_tmpl .materials {
	display: grid;
	grid-gap: 0.5em;
}

.saigaishoku .contents .recipe_tmpl .materials h4 {
	margin-top: 0.5em;
	font-size: var(--size-m);
	font-weight: bold;
}
.saigaishoku .contents .recipe_tmpl .materials h4::before { content: '〈'; }
.saigaishoku .contents .recipe_tmpl .materials h4::after { content: '〉'; }


@media (min-width: 641px) {

	.saigaishoku .contents .recipe_tmpl .materials {
		justify-self: start;
		min-width: 70%;
	}

}



/* ==================== saigaishoku/contents/recipe/&_tmpl/notes.css ==================== */

.saigaishoku .contents .recipe_tmpl .notes {
	color: var(--lightbrown);
}

.saigaishoku .contents .recipe_tmpl .notes ul {
	display: grid;
	grid-gap: 0.25em;
}

.saigaishoku .contents .recipe_tmpl .notes li {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	font-size: var(--size-m);
}

.saigaishoku .contents .recipe_tmpl .notes li::before {
	content: '※';
}



/* ==================== saigaishoku/contents/recipe/&_tmpl/points.css ==================== */

.saigaishoku .contents .recipe_tmpl .points {
	color: var(--brown);
}

.saigaishoku .contents .recipe_tmpl .points ul {
	display: grid;
	grid-gap: 0.25em;
}

.saigaishoku .contents .recipe_tmpl .points li {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	font-size: var(--size-m);
}

.saigaishoku .contents .recipe_tmpl .points li::before {
	content: '★';
}



/* ==================== saigaishoku/contents/recipe/&_tmpl/steps.css ==================== */

.saigaishoku .contents .recipe_tmpl .steps {
	display: grid;
	grid-gap: 0.5em;
}

.saigaishoku .contents .recipe_tmpl .steps ol {
	display: grid;
	grid-gap: 0.25em;
}

.saigaishoku .contents .recipe_tmpl .steps li {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 0.25em;
	justify-content: start;
	font-size: var(--size-m);
}

.saigaishoku .contents .recipe_tmpl .steps li:nth-of-type(1)::before { content: '①'; }
.saigaishoku .contents .recipe_tmpl .steps li:nth-of-type(2)::before { content: '②'; }
.saigaishoku .contents .recipe_tmpl .steps li:nth-of-type(3)::before { content: '③'; }
.saigaishoku .contents .recipe_tmpl .steps li:nth-of-type(4)::before { content: '④'; }
.saigaishoku .contents .recipe_tmpl .steps li:nth-of-type(5)::before { content: '⑤'; }



/* ==================== saigaishoku/footer/@.css ==================== */

.saigaishoku .footer {
	justify-self: center;
}



/* ==================== saigaishoku/footer/<a>.css ==================== */

@media (max-width: 640px) {

	.saigaishoku .footer a img {
		width: 7em;
	}

}


@media (min-width: 641px) {

	.saigaishoku .footer a img {
		width: 10em;
	}

	.saigaishoku .footer a img {
		transition: transform 250ms;
	}

	.saigaishoku .footer a:hover img {
		transform: scale(1.05);
	}

}



/* ==================== saigaishoku/header/@.css ==================== */

.saigaishoku .header {
	display: grid;
	grid-auto-flow: column;
	background:
	url(../images/bg_city.png) repeat-x center bottom,
	linear-gradient(var(--skyblue), var(--skyblue)) no-repeat left top;
}


@media (max-width: 640px) {

	.saigaishoku .header {
		padding-bottom: 2.75em;
		background-size: 25em auto, 100% calc(100% - 0.1em);
	}

}


@media (min-width: 641px) {

	.saigaishoku .header {
		grid-gap: 3em;
		justify-content: center;
		padding-bottom: 3.25em;
		background-size: 37.5em auto, 100% calc(100% - 0.1em);
	}

}



/* ==================== saigaishoku/header/menu.css ==================== */

@media (max-width: 640px) {

	.saigaishoku .header .menu {
		display: none;
	}

}


@media (min-width: 641px) {

	.saigaishoku .header .menu ul {
		display: grid;
		grid-gap: 0.5em;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

	.saigaishoku .header .menu li img {
		width: 9em;
	}

	.saigaishoku .header .menu li a {
		display: grid;
		box-sizing: border-box;
		border: 0.15em solid white;
		border-top: none;
		border-radius: 0 0 1em 1em;
		padding: 0.5em 0.25em 0.4em;
		background: white;
		transition: border 150ms;
	}

	.saigaishoku .header .menu li:nth-of-type(1).on a, .saigaishoku .header .menu li:nth-of-type(1) a:hover { border-color: var(--green); }
	.saigaishoku .header .menu li:nth-of-type(2).on a, .saigaishoku .header .menu li:nth-of-type(2) a:hover { border-color: var(--blue); }
	.saigaishoku .header .menu li:nth-of-type(3).on a, .saigaishoku .header .menu li:nth-of-type(3) a:hover { border-color: var(--pink); }
	.saigaishoku .header .menu li:nth-of-type(4).on a, .saigaishoku .header .menu li:nth-of-type(4) a:hover { border-color: var(--purple); }


}



/* ==================== saigaishoku/header/totop.css ==================== */

@media (max-width: 640px) {

	.saigaishoku .header .totop {
		margin: 1em 1em 0;
	}

	.saigaishoku .header .totop img {
		width: 13.8em;
	}

}


@media (min-width: 641px) {

	.saigaishoku .header .totop {
		margin-top: 0.75em;
	}

	.saigaishoku .header .totop img {
		width: 8.5em;
	}

}