@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

.sasteina-recipe {
  --cat1-txt1: #226600;
  --cat1-txt2: #479E04;
  --cat2-txt1: #226600;
  --cat2-txt2: #479E04;
  --cat3-txt1: #0060A1;
  --cat3-txt2: #30ACFF;
  --cat4-txt1: #B80000;
  --cat4-txt2: #FF4D4D;
  --cat1-base1: #F1FFB8;
  --cat2-base1: #FFE36B;
  --cat3-base1: #D9F6FF;
  --cat4-base1: #FFEDED;
  --cat1-shadow: #b2e356;
  --cat2-shadow: #ffe36b;
  --cat3-shadow: #87d4fa;
  --cat4-shadow: #ffadad;
}
.sasteina-recipe, .sasteina-recipe::after,
.sasteina-recipe *,
.sasteina-recipe *::after {
  all: unset;
}
.sasteina-recipe {
  display: grid;
  padding-bottom: 4em;
  color: black;
  letter-spacing: 0.05em;
  line-height: 1.5;
  font-feature-settings: "palt";
  overflow: hidden;
}
@media (max-width: 640px) {
  .sasteina-recipe {
    font-size: 5.1282051282vw;
  }
}
@media (min-width: 641px) {
  .sasteina-recipe {
    font-size: 2vw;
  }
}
@media (min-width: 1001px) {
  .sasteina-recipe {
    font-size: 20px;
  }
}
.sasteina-recipe[data-page=index] {
  grid-row-gap: 1.5em;
  background: no-repeat center top;
}
@media (max-width: 640px) {
  .sasteina-recipe[data-page=index] {
    background-size: 100%;
    background-image: url(../images/top_bg_sp.jpg);
  }
}
@media (min-width: 641px) {
  .sasteina-recipe[data-page=index] {
    margin-top: 1em;
    background-size: 61.1em;
    background-image: url(../images/top_bg_pc.jpg);
  }
}
@media (max-width: 640px) {
  .sasteina-recipe[data-page=recipe] {
    margin-top: 1em;
  }
}
.sasteina-recipe a {
  cursor: pointer;
}
.sasteina-recipe a:hover {
  color: inherit;
}
.sasteina-recipe img {
  max-width: 100%;
  vertical-align: bottom;
  overflow: clip;
}

.c-recipe-thum {
  position: relative;
  display: grid;
  /* shadow */
}
@media (max-width: 640px) {
  .c-recipe-thum {
    width: 8.5em;
    padding-top: 0.8em;
  }
}
@media (min-width: 641px) {
  .c-recipe-thum {
    width: 12em;
    padding-top: 1em;
  }
}
.c-recipe-thum::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1em;
  border-radius: 1px;
}
.c-recipe-thum[data-category="1"]::before {
  background-color: var(--cat1-shadow);
}

.c-recipe-thum[data-category="2"]::before {
  background-color: var(--cat2-shadow);
}

.c-recipe-thum[data-category="3"]::before {
  background-color: var(--cat3-shadow);
}

.c-recipe-thum[data-category="4"]::before {
  background-color: var(--cat4-shadow);
}

.p-recipe[data-category="1"] .c-recipe-thum::before {
  background-color: var(--cat1-shadow);
}

.p-recipe[data-category="2"] .c-recipe-thum::before {
  background-color: var(--cat2-shadow);
}

.p-recipe[data-category="3"] .c-recipe-thum::before {
  background-color: var(--cat3-shadow);
}

.p-recipe[data-category="4"] .c-recipe-thum::before {
  background-color: var(--cat4-shadow);
}

.c-recipe-thum:nth-of-type(odd)::before {
  transform-origin: right top;
  transform: skewY(-1.5deg);
}

.c-recipe-thum:nth-of-type(even)::before {
  transform-origin: left top;
  transform: skewY(1.5deg);
}

.c-recipe-thum::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  aspect-ratio: 55/96;
  background: no-repeat center center/100% 100%;
  transition: 200ms;
}
@media (max-width: 640px) {
  .c-recipe-thum::after {
    width: 1em;
  }
}
@media (min-width: 641px) {
  .c-recipe-thum::after {
    width: 1.4em;
  }
}
.c-recipe-thum[data-category="1"][data-group="1"]::after {
  background-image: url(../images/tape_yellow.png);
}

.c-recipe-thum[data-category="1"][data-group="2"]::after {
  background-image: url(../images/tape_red.png);
}

.c-recipe-thum[data-category="1"][data-group="3"]::after {
  background-image: url(../images/tape_blue.png);
}

.c-recipe-thum[data-category="2"][data-group="1"]::after {
  background-image: url(../images/tape_green.png);
}

.c-recipe-thum[data-category="3"][data-group="1"]::after {
  background-image: url(../images/tape_yellow.png);
}

.c-recipe-thum[data-category="3"][data-group="2"]::after {
  background-image: url(../images/tape_red.png);
}

.c-recipe-thum[data-category="4"][data-group="1"]::after {
  background-image: url(../images/tape_green.png);
}

.c-recipe-thum[data-category="4"][data-group="2"]::after {
  background-image: url(../images/tape_blue.png);
}

.c-recipe-thum:nth-of-type(odd)::after {
  transform: translateX(-50%) rotate(2deg);
}

.c-recipe-thum:nth-of-type(even)::after {
  transform: translateX(-50%) rotate(-2deg);
}

.c-recipe-thum:hover::after {
  opacity: 0;
}
.c-recipe-thum .base {
  position: relative;
  display: grid;
  border-radius: 1px;
  background: white;
  transition: 200ms;
}
@media (max-width: 640px) {
  .c-recipe-thum .base {
    padding: 0.5em;
  }
}
@media (min-width: 641px) {
  .c-recipe-thum .base {
    padding: 0.7em;
  }
}
.c-recipe-thum[data-category="1"] .base {
  border-bottom: 1px solid var(--cat1-shadow);
}

.c-recipe-thum[data-category="2"] .base {
  border-bottom: 1px solid var(--cat2-shadow);
}

.c-recipe-thum[data-category="3"] .base {
  border-bottom: 1px solid var(--cat3-shadow);
}

.c-recipe-thum[data-category="4"] .base {
  border-bottom: 1px solid var(--cat4-shadow);
}

.p-recipe[data-category="1"] .c-recipe-thum .base {
  border-bottom: 1px solid var(--cat1-shadow);
}

.p-recipe[data-category="2"] .c-recipe-thum .base {
  border-bottom: 1px solid var(--cat2-shadow);
}

.p-recipe[data-category="3"] .c-recipe-thum .base {
  border-bottom: 1px solid var(--cat3-shadow);
}

.p-recipe[data-category="4"] .c-recipe-thum .base {
  border-bottom: 1px solid var(--cat4-shadow);
}

.c-recipe-thum .base figure {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.4em;
  row-gap: 0.3em;
  align-items: center;
  justify-items: center;
  transition: 200ms;
  line-height: 1.3;
}
@media (max-width: 640px) {
  .c-recipe-thum .base figure img {
    aspect-ratio: 4/3;
    object-fit: cover;
  }
}
@media (max-width: 640px) {
  .c-recipe-thum .base figure figcaption {
    font-size: 0.6em;
  }
}
@media (min-width: 641px) {
  .c-recipe-thum .base figure figcaption {
    font-size: 0.7em;
  }
}
.c-recipe-thum .base figure figcaption.movie {
  display: flex;
  align-items: end;
  position: relative;
  width: 100%;
}
@media (max-width: 640px) {
  .c-recipe-thum .base figure figcaption.movie {
    height: 0.8em;
  }
}
@media (min-width: 641px) {
  .c-recipe-thum .base figure figcaption.movie {
    height: 0.9em;
  }
}
.c-recipe-thum .base figure figcaption.movie img {
  width: 100%;
  height: 280%;
  object-fit: contain;
}
.c-recipe-thum .base figure figcaption.material {
  margin-top: 0.2em;
  font-weight: bold;
}
.c-recipe-thum[data-category="1"] .base figure figcaption.material {
  color: var(--cat1-txt2);
}

.c-recipe-thum[data-category="2"] .base figure figcaption.material {
  color: var(--cat2-txt2);
}

.c-recipe-thum[data-category="3"] .base figure figcaption.material {
  color: var(--cat3-txt2);
}

.c-recipe-thum[data-category="4"] .base figure figcaption.material {
  color: var(--cat4-txt2);
}

.c-recipe-thum .base figure figcaption.time {
  display: flex;
  align-items: center;
  column-gap: 0.2em;
  border-radius: 1em;
  margin-left: auto;
}
.c-recipe-thum[data-category="1"] .base figure figcaption.time {
  color: var(--cat1-txt1);
}

.c-recipe-thum[data-category="2"] .base figure figcaption.time {
  color: var(--cat2-txt1);
}

.c-recipe-thum[data-category="3"] .base figure figcaption.time {
  color: var(--cat3-txt1);
}

.c-recipe-thum[data-category="4"] .base figure figcaption.time {
  color: var(--cat4-txt1);
}

.c-recipe-thum .base figure figcaption.time::before {
  content: "";
  width: 1em;
  aspect-ratio: 1;
  background: no-repeat center center/contain;
}
.c-recipe-thum[data-category="1"] .base figure figcaption.time::before {
  background-image: url(../images/recipe_thum_time_1.svg);
}

.c-recipe-thum[data-category="2"] .base figure figcaption.time::before {
  background-image: url(../images/recipe_thum_time_2.svg);
}

.c-recipe-thum[data-category="3"] .base figure figcaption.time::before {
  background-image: url(../images/recipe_thum_time_3.svg);
}

.c-recipe-thum[data-category="4"] .base figure figcaption.time::before {
  background-image: url(../images/recipe_thum_time_4.svg);
}

.c-recipe-thum .base figure figcaption.name {
  margin-inline: auto;
}
@media (min-width: 641px) {
  .c-recipe-thum .base:hover {
    transform: scale(1.05);
    z-index: 1;
  }
  .c-recipe-thum .base:hover figure {
    filter: brightness(115%);
  }
}

.p-footer {
  display: grid;
  grid-row-gap: 2em;
  justify-items: center;
}
@media (max-width: 640px) {
  .p-footer {
    padding: 0 1em;
  }
}
.p-footer .mame {
  position: relative;
  display: grid;
  grid-row-gap: 1em;
  justify-items: center;
  padding: 1.5em;
}
.p-footer .mame::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  background: #ffeded;
  border: 0.3em solid white;
  border-radius: 1.5em;
  box-shadow: 0 0.2em 0 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 640px) {
  .p-footer .mame::before {
    height: calc(100% - 3em);
  }
}
@media (min-width: 641px) {
  .p-footer .mame::before {
    height: calc(100% - 3.6em);
  }
}
.p-footer .mame > * {
  position: relative;
}
@media (max-width: 640px) {
  .p-footer .mame h2 img {
    width: 12em;
  }
}
@media (min-width: 641px) {
  .p-footer .mame h2 img {
    width: 15.4em;
  }
}
@media (max-width: 640px) {
  .p-footer .mame p {
    font-size: 0.7em;
  }
  .p-footer .mame p br {
    display: none;
  }
}
@media (min-width: 641px) {
  .p-footer .mame p {
    font-size: 0.8em;
    text-align: center;
  }
}
.p-footer .mame a {
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5em;
  border-radius: 1.25em;
  background: white url(../images/mame_link_arrow.svg) no-repeat right 1em center/1em;
  color: #ff4c4c;
  font-size: 0.8em;
  font-weight: bold;
  transition: 150ms;
}
.p-footer .mame a:hover {
  box-shadow: 0 0 0 0.2em white;
}
.p-footer .totop {
  display: grid;
  grid-row-gap: 0.5em;
  justify-items: center;
}
.p-footer .totop img[src*=title] {
  width: 8.6em;
}
.p-footer .totop img[src*=totop] {
  width: 4.4em;
}
@media (min-width: 641px) {
  .p-footer .totop img[src*=title] {
    transition: 150ms;
  }
  .p-footer .totop:hover img[src*=title] {
    transform: scale(1.05);
  }
}

.p-top-head {
  display: grid;
  grid-row-gap: 1.5em;
  justify-items: center;
}
@media (max-width: 640px) {
  .p-top-head {
    padding-top: 2em;
  }
}
@media (min-width: 641px) {
  .p-top-head {
    padding-top: 1.8em;
  }
}
@media (max-width: 640px) {
  .p-top-head h1 img {
    width: 11.7em;
  }
}
@media (min-width: 641px) {
  .p-top-head h1 img {
    width: 17em;
  }
}
.p-top-head .lead {
  display: grid;
  justify-items: center;
}
@media (max-width: 640px) {
  .p-top-head .lead {
    grid-row-gap: 6em;
  }
}
@media (min-width: 641px) {
  .p-top-head .lead {
    grid-row-gap: inherit;
  }
}
@media (max-width: 640px) {
  .p-top-head .lead h2 img {
    width: 11em;
  }
}
@media (min-width: 641px) {
  .p-top-head .lead h2 img {
    width: 14.3em;
  }
}
.p-top-head .lead p {
  text-align: center;
}
@media (max-width: 640px) {
  .p-top-head .lead p {
    font-size: 70%;
  }
}
@media (min-width: 641px) {
  .p-top-head .lead p {
    font-size: 80%;
  }
}

.p-top-category {
  display: grid;
  background: no-repeat center top;
}
@media (max-width: 640px) {
  .p-top-category {
    margin-top: -2.2em;
  }
}
@media (min-width: 641px) {
  .p-top-category {
    margin-top: -2em;
  }
}
.p-top-category[data-category="1"] {
  margin-top: 0;
}

@media (max-width: 640px) {
  .p-top-category {
    grid-row-gap: 1em;
    padding: 0.8em 1em 5em;
    background-size: 100%;
  }
}
@media (min-width: 641px) {
  .p-top-category {
    grid-row-gap: 1.5em;
    padding: 1.5em 0 5em;
    background-size: 100em;
  }
}
.p-top-category[data-category="4"] {
  padding-bottom: 3em;
}

.p-top-category[data-category="1"] {
  background: url(../images/category_base_1.png) repeat left top/1.5em;
}
@media (max-width: 640px) {
  .p-top-category[data-category="1"] {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 7.4em) top/3em 3em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 7.4em) top/3em 3em, linear-gradient(black, black) no-repeat center top/14.8em 1.5em, linear-gradient(black, black) no-repeat left top 1.5em/100% 100%;
  }
}
@media (min-width: 641px) {
  .p-top-category[data-category="1"] {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 9.7em) top/4em 4em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 9.7em) top/4em 4em, linear-gradient(black, black) no-repeat center top/19.4em 2em, linear-gradient(black, black) no-repeat left top 2em/100% 100%;
  }
}

.p-top-category[data-category="2"] {
  background: url(../images/category_base_2.png) repeat left top/1.5em;
}
@media (max-width: 640px) {
  .p-top-category[data-category="2"] {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 5.45em) top/3em 3em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 5.45em) top/3em 3em, linear-gradient(black, black) no-repeat center top/10.9em 1.5em, linear-gradient(black, black) no-repeat left top 1.5em/100% 100%;
  }
}
@media (min-width: 641px) {
  .p-top-category[data-category="2"] {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 14.05em) top/4em 4em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 14.05em) top/4em 4em, linear-gradient(black, black) no-repeat center top/28.1em 2em, linear-gradient(black, black) no-repeat left top 2em/100% 100%;
  }
}

.p-top-category[data-category="3"] {
  background: url(../images/category_base_3.png) repeat left top/1.5em;
}
@media (max-width: 640px) {
  .p-top-category[data-category="3"] {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 5.95em) top/3em 3em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 5.95em) top/3em 3em, linear-gradient(black, black) no-repeat center top/11.9em 1.5em, linear-gradient(black, black) no-repeat left top 1.5em/100% 100%;
  }
}
@media (min-width: 641px) {
  .p-top-category[data-category="3"] {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 7.8em) top/4em 4em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 7.8em) top/4em 4em, linear-gradient(black, black) no-repeat center top/15.6em 2em, linear-gradient(black, black) no-repeat left top 2em/100% 100%;
  }
}

.p-top-category[data-category="4"] {
  background: url(../images/category_base_4.png) repeat left top/1.5em;
}
@media (max-width: 640px) {
  .p-top-category[data-category="4"] {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 6.4em) top/3em 3em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 6.4em) top/3em 3em, linear-gradient(black, black) no-repeat center top/12.8em 1.5em, linear-gradient(black, black) no-repeat left top 1.5em/100% 100%;
  }
}
@media (min-width: 641px) {
  .p-top-category[data-category="4"] {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 8.4em) top/4em 4em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 8.4em) top/4em 4em, linear-gradient(black, black) no-repeat center top/16.8em 2em, linear-gradient(black, black) no-repeat left top 2em/100% 100%;
  }
}

.p-top-category h2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 640px) {
  .p-top-category h2 img {
    height: 1.3em;
  }
  .p-top-category[data-category="2"] h2 img {
    height: 2.5em;
  }
}
@media (min-width: 641px) {
  .p-top-category h2 img {
    height: 1.8em;
  }
}
@media (max-width: 640px) {
  .p-top-category h2 + p {
    font-size: 70%;
    text-align: center;
  }
}
@media (min-width: 641px) {
  .p-top-category h2 + p {
    font-size: 80%;
    text-align: center;
  }
}
.p-top-category[data-category="1"] h2 + p {
  color: var(--cat1-txt1);
}

.p-top-category[data-category="2"] h2 + p {
  color: var(--cat2-txt1);
}

.p-top-category[data-category="3"] h2 + p {
  color: var(--cat3-txt1);
}

.p-top-category[data-category="4"] h2 + p {
  color: var(--cat4-txt1);
}

@media (max-width: 640px) {
  .p-top-category[data-category="3"] h2 + p br {
    display: none;
  }
}

@media (max-width: 640px) {
  .p-top-category[data-category="4"] h2 + p br:nth-of-type(1) {
    display: none;
  }
}
@media (min-width: 641px) {
  .p-top-category[data-category="4"] h2 + p {
    margin-inline: auto;
  }
  .p-top-category[data-category="4"] h2 + p br {
    display: none;
  }
}
.p-top-category[data-category="4"] h2 + p span {
  display: block;
  position: relative;
}
@media (max-width: 640px) {
  .p-top-category[data-category="4"] h2 + p span {
    width: 18em;
    margin-inline: auto;
  }
}
.p-top-category[data-category="4"] h2 + p span::before, .p-top-category[data-category="4"] h2 + p span::after {
  position: absolute;
  bottom: 0;
}
.p-top-category[data-category="4"] h2 + p span::before {
  right: 100%;
  content: "＼";
}
.p-top-category[data-category="4"] h2 + p span::after {
  left: 100%;
  content: "／";
}
@media (max-width: 640px) {
  .p-top-category[data-category="4"] h2 + p span::before {
    transform: translateX(1em);
  }
  .p-top-category[data-category="4"] h2 + p span::after {
    transform: translateX(-1em);
  }
}
@media (min-width: 641px) {
  .p-top-category[data-category="4"] h2 + p span::before {
    transform: translateX(-0.2em);
  }
  .p-top-category[data-category="4"] h2 + p span::after {
    transform: translateX(0.2em);
  }
}
.p-top-category[data-category="4"] h2 + p span a {
  color: red;
  font-weight: bold;
  text-decoration: underline;
}

.p-top-category .groups {
  display: grid;
}
@media (max-width: 640px) {
  .p-top-category .groups {
    grid-row-gap: 1em;
  }
  .p-top-category[data-category="4"] .groups {
    grid-row-gap: 1.5em;
  }
}
@media (min-width: 641px) {
  .p-top-category .groups {
    grid-row-gap: 1.5em;
  }
}
@media (min-width: 641px) {
  .p-top-category[data-category="4"] .groups {
    grid-auto-flow: column;
    grid-column-gap: 2.5em;
    align-items: start;
    justify-content: center;
  }
}

.p-top-category .groups hr {
  height: 0.5em;
  background: no-repeat center center;
}
.p-top-category[data-category="1"] .groups hr {
  background-image: url(../images/top_recipes_border_1.png);
}

.p-top-category[data-category="3"] .groups hr {
  background-image: url(../images/top_recipes_border_3.png);
}

@media (max-width: 640px) {
  .p-top-category .groups hr {
    background-size: 40em;
  }
}
@media (min-width: 641px) {
  .p-top-category .groups hr {
    background-size: 42.6em;
  }
}
.p-top-category .link {
  display: grid;
  grid-gap: 0.5em;
  align-items: center;
  border-radius: 0.2em;
}
@media (max-width: 640px) {
  .p-top-category .link {
    position: relative;
    grid-template-areas: "img h4" "a a";
    margin-top: 2em;
    padding: 0.75em;
    grid-template-columns: 4em 1fr;
  }
}
@media (min-width: 641px) {
  .p-top-category .link {
    grid-template-areas: "img ." "img h4" "img a" "img .";
    margin-inline: auto;
    padding: 0.5em 1em;
  }
}
.p-top-category .link img {
  grid-area: img;
}
.p-top-category .link h4 {
  grid-area: h4;
}
.p-top-category .link a {
  grid-area: a;
}
.p-top-category[data-category="2"] .link {
  background: #479e04;
}

.p-top-category[data-category="3"] .link {
  background: #30acff;
}

.p-top-category .link img {
  width: 4em;
  aspect-ratio: 1/1;
}
@media (max-width: 640px) {
  .p-top-category .link img {
    position: absolute;
    bottom: 0;
  }
}
.p-top-category .link h4 {
  font-size: 70%;
  font-weight: bold;
  color: white;
}
.p-top-category .link a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.8em;
  border-radius: 1.4em;
  padding-right: 1.4em;
  background: white;
  font-size: 70%;
  font-weight: bold;
  background: white no-repeat right 1em center/1em;
  transition: 150ms;
}
.p-top-category .link a:hover {
  box-shadow: 0 0 0 0.2em white;
}
.p-top-category[data-category="2"] .link a {
  font-size: 80%;
  height: 2.4em;
  border-radius: 1.2em;
}

.p-top-category[data-category="1"] .link a {
  background-image: url(../images/top_link_arrow_1.svg);
  color: var(--cat1-txt1);
}

.p-top-category[data-category="2"] .link a {
  background-image: url(../images/top_link_arrow_2.svg);
  color: var(--cat2-txt1);
}

.p-top-category[data-category="3"] .link a {
  background-image: url(../images/top_link_arrow_3.svg);
  color: var(--cat3-txt1);
}

.p-top-category[data-category="4"] .link a {
  background-image: url(../images/top_link_arrow_4.svg);
  color: var(--cat4-txt1);
}

.p-top-category .column {
  display: grid;
  align-items: center;
  justify-items: center;
  border: 0.2em solid white;
  border-radius: 1em;
  padding: 1em;
  box-sizing: border-box;
  max-width: 25em;
}
@media (max-width: 640px) {
  .p-top-category .column {
    grid-gap: 0.8em;
    grid-template-areas: "h4 h4" "figure p" "a a";
  }
}
@media (min-width: 641px) {
  .p-top-category .column {
    grid-gap: 0.5em 1em;
    grid-template-areas: "figure ." "figure h4" "figure p" "figure a" "figure .";
    margin-inline: auto;
  }
}
.p-top-category .column figure {
  grid-area: figure;
}
.p-top-category .column h4 {
  grid-area: h4;
}
.p-top-category .column p {
  grid-area: p;
}
.p-top-category .column a {
  grid-area: a;
}
.p-top-category .column figure.bcMovie {
  cursor: pointer;
}
.p-top-category .column figure img {
  border-radius: 0.1em;
  box-sizing: border-box;
  padding: 0.1em;
  background: white;
}
@media (max-width: 640px) {
  .p-top-category .column figure img {
    width: 5em;
  }
}
@media (min-width: 641px) {
  .p-top-category .column figure img {
    width: 6.5em;
  }
}
.p-top-category .column h4 {
  font-size: 0.8em;
  font-weight: bold;
}
.p-top-category .column p {
  font-size: 0.7em;
}
.p-top-category .column a {
  font-size: 0.7em;
  font-weight: bold;
  text-decoration: underline;
}
.p-top-category[data-category="1"] .column {
  background: var(--cat1-base1);
}
.p-top-category[data-category="1"] .column h4 {
  color: var(--cat1-txt1);
}
.p-top-category[data-category="1"] .column a {
  color: var(--cat1-txt2);
}

.p-top-category[data-category="2"] .column {
  background: var(--cat2-base1);
}
.p-top-category[data-category="2"] .column h4 {
  color: var(--cat2-txt1);
}
.p-top-category[data-category="2"] .column a {
  color: var(--cat2-txt2);
}

.p-top-category[data-category="3"] .column {
  background: var(--cat3-base1);
}
.p-top-category[data-category="3"] .column h4 {
  color: var(--cat3-txt1);
}
.p-top-category[data-category="3"] .column a {
  color: var(--cat3-txt2);
}

.p-top-category[data-category="4"] .column {
  background: var(--cat4-base1);
}
.p-top-category[data-category="4"] .column h4 {
  color: var(--cat4-txt1);
}
.p-top-category[data-category="4"] .column a {
  color: var(--cat4-txt2);
}

.p-top-group {
  display: grid;
}
@media (max-width: 640px) {
  .p-top-group {
    grid-template-columns: repeat(2, max-content);
    justify-items: center;
    justify-content: center;
  }
}
@media (min-width: 641px) {
  .p-top-group {
    grid-auto-flow: column;
    grid-column-gap: 1.5em;
    justify-content: center;
  }
}
.p-top-group h3 {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  width: 8em;
  aspect-ratio: 1/1;
  border-radius: 50%;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
@media (max-width: 640px) {
  .p-top-group h3 {
    grid-column: 1;
    grid-row: 1;
    margin-inline: 1em;
    font-size: 0.7em;
  }
  .p-top-group[data-category="1"][data-group="2"] h3 {
    grid-column: 2;
  }
  .p-top-group[data-category="3"][data-group="2"] h3 {
    grid-column: 2;
  }
  .p-top-group[data-category="4"][data-group="2"] h3 {
    grid-column: 2;
  }
}
@media (min-width: 641px) {
  .p-top-group h3 {
    font-size: 0.9em;
  }
  .p-top-group[data-category="1"][data-group="2"] h3 {
    order: 1;
  }
  .p-top-group[data-category="3"][data-group="2"] h3 {
    order: 1;
  }
}
.p-top-group h3 strong {
  font-size: 133%;
}
.p-top-group[data-category="2"] h3 strong {
  font-size: 105%;
}

.p-top-group h3::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 75%;
  background: no-repeat center center/contain;
  width: 9.4em;
  transform: translateX(-50%);
}
.p-top-group[data-category="1"][data-group="1"] h3::after {
  aspect-ratio: 337/230;
}

.p-top-group[data-category="1"][data-group="2"] h3::after {
  aspect-ratio: 337/268;
}

.p-top-group[data-category="1"][data-group="3"] h3::after {
  aspect-ratio: 337/189;
}

.p-top-group[data-category="2"][data-group="1"] h3::after {
  aspect-ratio: 337/216;
}

.p-top-group[data-category="3"][data-group="1"] h3::after {
  aspect-ratio: 337/227;
}

.p-top-group[data-category="3"][data-group="2"] h3::after {
  aspect-ratio: 337/227;
}

.p-top-group[data-category="4"][data-group="1"] h3::after {
  aspect-ratio: 337/247;
}

.p-top-group[data-category="4"][data-group="2"] h3::after {
  aspect-ratio: 337/247;
}

.p-top-group[data-category="1"][data-group="2"] h3::after {
  transform: translate(-32%, -34%);
}

.p-top-group[data-category="1"] h3 {
  background: var(--cat1-base1);
  color: var(--cat1-txt1);
}
.p-top-group[data-category="1"] h3 strong {
  color: var(--cat1-txt2);
}

.p-top-group[data-category="1"][data-group="1"] h3::after {
  background-image: url(../images/top_group_img_1_1.png);
}

.p-top-group[data-category="1"][data-group="2"] h3::after {
  background-image: url(../images/top_group_img_1_2.png);
}

.p-top-group[data-category="1"][data-group="3"] h3::after {
  background-image: url(../images/top_group_img_1_3.png);
}

.p-top-group[data-category="2"] h3 {
  background: var(--cat2-base1);
  color: var(--cat2-txt1);
}
.p-top-group[data-category="2"] h3 strong {
  color: var(--cat2-txt2);
}

.p-top-group[data-category="2"][data-group="1"] h3::after {
  background-image: url(../images/top_group_img_2_1.png);
}

.p-top-group[data-category="2"][data-group="2"] h3::after {
  background-image: url(../images/top_group_img_2_2.png);
}

.p-top-group[data-category="2"][data-group="3"] h3::after {
  background-image: url(../images/top_group_img_2_3.png);
}

.p-top-group[data-category="3"] h3 {
  background: var(--cat3-base1);
  color: var(--cat3-txt1);
}
.p-top-group[data-category="3"] h3 strong {
  color: var(--cat3-txt2);
}

.p-top-group[data-category="3"][data-group="1"] h3::after {
  background-image: url(../images/top_group_img_3_1.png);
}

.p-top-group[data-category="3"][data-group="2"] h3::after {
  background-image: url(../images/top_group_img_3_2.png);
}

.p-top-group[data-category="3"][data-group="3"] h3::after {
  background-image: url(../images/top_group_img_3_3.png);
}

.p-top-group[data-category="4"] h3 {
  background: var(--cat4-base1);
  color: var(--cat4-txt1);
}
.p-top-group[data-category="4"] h3 strong {
  color: var(--cat4-txt2);
}

.p-top-group[data-category="4"][data-group="1"] h3::after {
  background-image: url(../images/top_group_img_4_1.png);
}

.p-top-group[data-category="4"][data-group="2"] h3::after {
  background-image: url(../images/top_group_img_4_2.png);
}

.p-top-group[data-category="4"][data-group="3"] h3::after {
  background-image: url(../images/top_group_img_4_3.png);
}

.p-top-group .recipes {
  display: grid;
  align-items: start;
}
@media (max-width: 640px) {
  .p-top-group .recipes {
    grid-template-columns: subgrid;
    grid-column: 1/3;
    grid-row: 1;
    grid-gap: 0.75em;
  }
  .p-top-group[data-category="1"][data-group="1"] .recipes {
    margin-top: 1em;
  }
  .p-top-group[data-category="1"][data-group="2"] .recipes {
    margin-top: 1em;
  }
  .p-top-group .recipes::before {
    content: "";
  }
  .p-top-group[data-category="1"][data-group="2"] .recipes::before {
    grid-column: 2;
    grid-row: 1;
  }
  .p-top-group[data-category="3"][data-group="2"] .recipes::before {
    grid-column: 2;
    grid-row: 1;
  }
  .p-top-group[data-category="4"][data-group="2"] .recipes::before {
    grid-column: 2;
    grid-row: 1;
  }
  .p-top-group[data-category="1"][data-group="1"] .recipes > div:nth-of-type(even) {
    margin-top: -2.5em;
  }
  .p-top-group[data-category="1"][data-group="2"] .recipes > div:nth-of-type(2n+3) {
    margin-top: -2.5em;
  }
  .p-top-group[data-category="3"] .recipes > div:nth-of-type(1) {
    margin-top: 3em;
  }
  .p-top-group[data-category="3"] .recipes > div:nth-of-type(2) {
    margin-top: -5em;
  }
  .p-top-group[data-category="3"][data-group="2"] .recipes > div:nth-of-type(2) {
    grid-column: 2;
  }
}
@media (min-width: 641px) {
  .p-top-group .recipes {
    grid-auto-flow: column;
    grid-column-gap: 1em;
  }
  .p-top-group .recipes > div:nth-of-type(even) {
    margin-top: 1em;
  }
}

.p-recipe {
  position: relative;
  display: grid;
  padding-bottom: 2em;
}
@media (max-width: 640px) {
  .p-recipe {
    grid-row-gap: 1.5em;
  }
}
@media (min-width: 641px) {
  .p-recipe {
    grid-row-gap: 2em;
  }
}
.p-recipe::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
@media (max-width: 640px) {
  .p-recipe::before {
    height: calc(100% - 2.9em);
  }
}
@media (min-width: 641px) {
  .p-recipe::before {
    height: calc(100% - 1.2em);
  }
}
.p-recipe[data-category="1"]::before {
  background: url(../images/category_base_1.png) repeat left top/1.5em;
}
@media (max-width: 640px) {
  .p-recipe[data-category="1"]::before {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 5.92em) top/3em 3em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 5.92em) top/3em 3em, linear-gradient(black, black) no-repeat center top/11.84em 1.5em, linear-gradient(black, black) no-repeat left top 1.5em/100% 100%;
  }
}
@media (min-width: 641px) {
  .p-recipe[data-category="1"]::before {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 6.208em + 6em) top/3em 3em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 6.208em + 6em) top/3em 3em, linear-gradient(black, black) no-repeat calc(50% + 6em) top/12.416em 1.5em, linear-gradient(black, black) no-repeat left top 1.5em/100% 100%;
  }
}

.p-recipe[data-category="2"]::before {
  background: url(../images/category_base_2.png) repeat left top/1.5em;
}
@media (max-width: 640px) {
  .p-recipe[data-category="2"]::before {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 4.36em) top/3em 3em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 4.36em) top/3em 3em, linear-gradient(black, black) no-repeat center top/8.72em 1.5em, linear-gradient(black, black) no-repeat left top 1.5em/100% 100%;
  }
}
@media (min-width: 641px) {
  .p-recipe[data-category="2"]::before {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 8.992em + 6em) top/3em 3em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 8.992em + 6em) top/3em 3em, linear-gradient(black, black) no-repeat calc(50% + 6em) top/17.984em 1.5em, linear-gradient(black, black) no-repeat left top 1.5em/100% 100%;
  }
}

.p-recipe[data-category="3"]::before {
  background: url(../images/category_base_3.png) repeat left top/1.5em;
}
@media (max-width: 640px) {
  .p-recipe[data-category="3"]::before {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 4.76em) top/3em 3em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 4.76em) top/3em 3em, linear-gradient(black, black) no-repeat center top/9.52em 1.5em, linear-gradient(black, black) no-repeat left top 1.5em/100% 100%;
  }
}
@media (min-width: 641px) {
  .p-recipe[data-category="3"]::before {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 4.992em + 6em) top/3em 3em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 4.992em + 6em) top/3em 3em, linear-gradient(black, black) no-repeat calc(50% + 6em) top/9.984em 1.5em, linear-gradient(black, black) no-repeat left top 1.5em/100% 100%;
  }
}

.p-recipe[data-category="4"]::before {
  background: url(../images/category_base_4.png) repeat left top/1.5em;
}
@media (max-width: 640px) {
  .p-recipe[data-category="4"]::before {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 5.12em) top/3em 3em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 5.12em) top/3em 3em, linear-gradient(black, black) no-repeat center top/10.24em 1.5em, linear-gradient(black, black) no-repeat left top 1.5em/100% 100%;
  }
}
@media (min-width: 641px) {
  .p-recipe[data-category="4"]::before {
    mask: radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% - 5.376em + 6em) top/3em 3em, radial-gradient(circle, black 70%, transparent 71%) no-repeat calc(50% + 5.376em + 6em) top/3em 3em, linear-gradient(black, black) no-repeat calc(50% + 6em) top/10.752em 1.5em, linear-gradient(black, black) no-repeat left top 1.5em/100% 100%;
  }
}

.p-recipe > * {
  position: relative;
}
.p-recipe .p-recipe-head {
  display: grid;
}
@media (max-width: 640px) {
  .p-recipe .p-recipe-head {
    grid-row-gap: 1.2em;
    justify-items: center;
  }
}
@media (min-width: 641px) {
  .p-recipe .p-recipe-head {
    grid-column-gap: 0.5em;
    grid-auto-flow: column;
    justify-content: center;
    height: 3em;
  }
}
@media (min-width: 641px) {
  .p-recipe .p-recipe-head .logo {
    align-self: start;
  }
}
.p-recipe .p-recipe-head .logo img {
  width: 11.5em;
}
.p-recipe .p-recipe-head .category-title {
  padding: 0 1.5em;
}
@media (min-width: 641px) {
  .p-recipe .p-recipe-head .category-title {
    align-self: end;
  }
}
@media (max-width: 640px) {
  .p-recipe[data-category="1"] .p-recipe-head .category-title img {
    width: 11.84em;
  }
}
@media (min-width: 641px) {
  .p-recipe[data-category="1"] .p-recipe-head .category-title img {
    width: 12.416em;
  }
}

@media (max-width: 640px) {
  .p-recipe[data-category="2"] .p-recipe-head .category-title img {
    width: 8.72em;
  }
}
@media (min-width: 641px) {
  .p-recipe[data-category="2"] .p-recipe-head .category-title img {
    width: 17.984em;
  }
}

@media (max-width: 640px) {
  .p-recipe[data-category="3"] .p-recipe-head .category-title img {
    width: 9.52em;
  }
}
@media (min-width: 641px) {
  .p-recipe[data-category="3"] .p-recipe-head .category-title img {
    width: 9.984em;
  }
}

@media (max-width: 640px) {
  .p-recipe[data-category="4"] .p-recipe-head .category-title img {
    width: 10.24em;
  }
}
@media (min-width: 641px) {
  .p-recipe[data-category="4"] .p-recipe-head .category-title img {
    width: 10.752em;
  }
}

.p-recipe .p-recipe-detail {
  display: grid;
  grid-row-gap: 0.8em;
  position: relative;
  border-radius: 1px;
  background: white;
}
.p-recipe[data-category="1"] .p-recipe-detail {
  border: solid var(--cat1-shadow);
  border-width: 0 1px 1px 0;
}

.p-recipe[data-category="2"] .p-recipe-detail {
  border: solid var(--cat2-shadow);
  border-width: 0 1px 1px 0;
}

.p-recipe[data-category="3"] .p-recipe-detail {
  border: solid var(--cat3-shadow);
  border-width: 0 1px 1px 0;
}

.p-recipe[data-category="4"] .p-recipe-detail {
  border: solid var(--cat4-shadow);
  border-width: 0 1px 1px 0;
}

@media (max-width: 640px) {
  .p-recipe .p-recipe-detail {
    margin: 0 0.75em;
    padding: 2em 0.75em;
  }
}
@media (min-width: 641px) {
  .p-recipe .p-recipe-detail {
    grid-column-gap: 1.5em;
    box-sizing: border-box;
    width: 49em;
    margin-inline: auto;
    padding: 2em;
    grid-template-columns: 20em 1fr 20em;
    grid-template-areas: "pic pic ." "pic pic h1" "pic pic material" "pic pic time" "pic pic lead" "pic pic info" "pic pic ." "nutrients process process" "materials process process" ". process process";
  }
  .p-recipe .p-recipe-detail h1 {
    grid-area: h1;
  }
  .p-recipe .p-recipe-detail .pic {
    grid-area: pic;
  }
  .p-recipe .p-recipe-detail .material {
    grid-area: material;
  }
  .p-recipe .p-recipe-detail .time {
    grid-area: time;
  }
  .p-recipe .p-recipe-detail .lead {
    grid-area: lead;
  }
  .p-recipe .p-recipe-detail .info {
    grid-area: info;
  }
  .p-recipe .p-recipe-detail .nutrients {
    grid-area: nutrients;
  }
  .p-recipe .p-recipe-detail .process {
    grid-area: process;
  }
  .p-recipe .p-recipe-detail .materials {
    grid-area: materials;
  }
}
.p-recipe .p-recipe-detail::before, .p-recipe .p-recipe-detail::after {
  content: "";
  position: absolute;
  aspect-ratio: 55/96;
  background: no-repeat center center/contain;
}
.p-recipe[data-category="1"][data-group="1"] .p-recipe-detail::before, .p-recipe[data-category="1"][data-group="1"] .p-recipe-detail::after {
  background-image: url(../images/tape_yellow.png);
}

.p-recipe[data-category="1"][data-group="2"] .p-recipe-detail::before, .p-recipe[data-category="1"][data-group="2"] .p-recipe-detail::after {
  background-image: url(../images/tape_red.png);
}

.p-recipe[data-category="1"][data-group="3"] .p-recipe-detail::before, .p-recipe[data-category="1"][data-group="3"] .p-recipe-detail::after {
  background-image: url(../images/tape_blue.png);
}

.p-recipe[data-category="2"][data-group="1"] .p-recipe-detail::before, .p-recipe[data-category="2"][data-group="1"] .p-recipe-detail::after {
  background-image: url(../images/tape_green.png);
}

.p-recipe[data-category="3"][data-group="1"] .p-recipe-detail::before, .p-recipe[data-category="3"][data-group="1"] .p-recipe-detail::after {
  background-image: url(../images/tape_yellow.png);
}

.p-recipe[data-category="3"][data-group="2"] .p-recipe-detail::before, .p-recipe[data-category="3"][data-group="2"] .p-recipe-detail::after {
  background-image: url(../images/tape_red.png);
}

.p-recipe[data-category="4"][data-group="1"] .p-recipe-detail::before, .p-recipe[data-category="4"][data-group="1"] .p-recipe-detail::after {
  background-image: url(../images/tape_green.png);
}

.p-recipe[data-category="4"][data-group="2"] .p-recipe-detail::before, .p-recipe[data-category="4"][data-group="2"] .p-recipe-detail::after {
  background-image: url(../images/tape_blue.png);
}

@media (max-width: 640px) {
  .p-recipe .p-recipe-detail::before, .p-recipe .p-recipe-detail::after {
    top: -0.75em;
    width: 1em;
  }
}
@media (min-width: 641px) {
  .p-recipe .p-recipe-detail::before, .p-recipe .p-recipe-detail::after {
    top: -1.25em;
    width: 1.6em;
  }
}
.p-recipe .p-recipe-detail::before {
  left: 0.75em;
  transform: rotate(2deg);
}
.p-recipe .p-recipe-detail::after {
  right: 0.75em;
  transform: rotate(-2deg);
}
.p-recipe .p-recipe-detail h1 {
  display: flex;
  font-weight: bold;
  justify-content: center;
}
@media (max-width: 640px) {
  .p-recipe .p-recipe-detail h1 {
    font-size: 90%;
  }
}
.p-recipe .p-recipe-detail .pic img {
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 1px;
}
.p-recipe .p-recipe-detail .material {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 80%;
}
.p-recipe[data-category="1"] .p-recipe-detail .material {
  color: var(--cat1-txt2);
}

.p-recipe[data-category="2"] .p-recipe-detail .material {
  color: var(--cat2-txt2);
}

.p-recipe[data-category="3"] .p-recipe-detail .material {
  color: var(--cat3-txt2);
}

.p-recipe[data-category="4"] .p-recipe-detail .material {
  color: var(--cat4-txt2);
}

.p-recipe .p-recipe-detail .time {
  display: flex;
  box-sizing: border-box;
  height: 2em;
  border-radius: 1em;
  overflow: hidden;
  justify-self: center;
}
.p-recipe[data-category="1"] .p-recipe-detail .time {
  border: 1px solid var(--cat1-txt2);
}

.p-recipe[data-category="2"] .p-recipe-detail .time {
  border: 1px solid var(--cat2-txt2);
}

.p-recipe[data-category="3"] .p-recipe-detail .time {
  border: 1px solid var(--cat3-txt2);
}

.p-recipe[data-category="4"] .p-recipe-detail .time {
  border: 1px solid var(--cat4-txt2);
}

@media (max-width: 640px) {
  .p-recipe .p-recipe-detail .time {
    font-size: 70%;
  }
}
@media (min-width: 641px) {
  .p-recipe .p-recipe-detail .time {
    font-size: 80%;
  }
}
.p-recipe .p-recipe-detail .time dt,
.p-recipe .p-recipe-detail .time dd {
  display: flex;
  align-items: center;
}
.p-recipe .p-recipe-detail .time dt {
  display: flex;
  align-items: center;
  column-gap: 0.25em;
  padding: 0 0.5em;
  font-size: smaller;
  color: white;
}
.p-recipe .p-recipe-detail .time dt::before {
  content: "";
  width: 1.2em;
  aspect-ratio: 1/1;
  background: url(../images/recipe_detail_time.svg) no-repeat center center/contain;
}
.p-recipe[data-category="1"] .p-recipe-detail .time dt {
  background-color: var(--cat1-txt2);
}

.p-recipe[data-category="2"] .p-recipe-detail .time dt {
  background-color: var(--cat2-txt2);
}

.p-recipe[data-category="3"] .p-recipe-detail .time dt {
  background-color: var(--cat3-txt2);
}

.p-recipe[data-category="4"] .p-recipe-detail .time dt {
  background-color: var(--cat4-txt2);
}

.p-recipe .p-recipe-detail .time dd {
  padding: 0 0.6em;
}
.p-recipe[data-category="1"] .p-recipe-detail .time dd {
  color: var(--cat1-txt1);
}

.p-recipe[data-category="2"] .p-recipe-detail .time dd {
  color: var(--cat2-txt1);
}

.p-recipe[data-category="3"] .p-recipe-detail .time dd {
  color: var(--cat3-txt1);
}

.p-recipe[data-category="4"] .p-recipe-detail .time dd {
  color: var(--cat4-txt1);
}

.p-recipe .p-recipe-detail .time dd small {
  font-size: smaller;
}
.p-recipe .p-recipe-detail .lead {
  font-size: 70%;
}
.p-recipe .p-recipe-detail .info {
  justify-self: center;
}
.p-recipe .p-recipe-detail .nutrients,
.p-recipe .p-recipe-detail .materials,
.p-recipe .p-recipe-detail .process {
  display: grid;
  grid-row-gap: 1em;
  margin-top: 0.6em;
  align-content: start;
}
.p-recipe .p-recipe-detail .nutrients h2,
.p-recipe .p-recipe-detail .materials h2,
.p-recipe .p-recipe-detail .process h2 {
  display: flex;
  column-gap: 0.5em;
  align-items: center;
  height: 2.5em;
  border-radius: 1.25em;
  padding: 0 1.1em;
}
.p-recipe .p-recipe-detail .nutrients h2 img,
.p-recipe .p-recipe-detail .materials h2 img,
.p-recipe .p-recipe-detail .process h2 img {
  height: 0.9em;
}
.p-recipe .p-recipe-detail .nutrients h2 small,
.p-recipe .p-recipe-detail .materials h2 small,
.p-recipe .p-recipe-detail .process h2 small {
  font-size: 70%;
}
.p-recipe[data-category="1"] .p-recipe-detail .nutrients h2, .p-recipe[data-category="1"] .p-recipe-detail .materials h2, .p-recipe[data-category="1"] .p-recipe-detail .process h2 {
  background: var(--cat1-base1);
}
.p-recipe[data-category="1"] .p-recipe-detail .nutrients h2 small, .p-recipe[data-category="1"] .p-recipe-detail .materials h2 small, .p-recipe[data-category="1"] .p-recipe-detail .process h2 small {
  color: var(--cat1-txt2);
}

.p-recipe[data-category="2"] .p-recipe-detail .nutrients h2, .p-recipe[data-category="2"] .p-recipe-detail .materials h2, .p-recipe[data-category="2"] .p-recipe-detail .process h2 {
  background: var(--cat2-base1);
}
.p-recipe[data-category="2"] .p-recipe-detail .nutrients h2 small, .p-recipe[data-category="2"] .p-recipe-detail .materials h2 small, .p-recipe[data-category="2"] .p-recipe-detail .process h2 small {
  color: var(--cat2-txt2);
}

.p-recipe[data-category="3"] .p-recipe-detail .nutrients h2, .p-recipe[data-category="3"] .p-recipe-detail .materials h2, .p-recipe[data-category="3"] .p-recipe-detail .process h2 {
  background: var(--cat3-base1);
}
.p-recipe[data-category="3"] .p-recipe-detail .nutrients h2 small, .p-recipe[data-category="3"] .p-recipe-detail .materials h2 small, .p-recipe[data-category="3"] .p-recipe-detail .process h2 small {
  color: var(--cat3-txt2);
}

.p-recipe[data-category="4"] .p-recipe-detail .nutrients h2, .p-recipe[data-category="4"] .p-recipe-detail .materials h2, .p-recipe[data-category="4"] .p-recipe-detail .process h2 {
  background: var(--cat4-base1);
}
.p-recipe[data-category="4"] .p-recipe-detail .nutrients h2 small, .p-recipe[data-category="4"] .p-recipe-detail .materials h2 small, .p-recipe[data-category="4"] .p-recipe-detail .process h2 small {
  color: var(--cat4-txt2);
}

.p-recipe .p-recipe-detail .nutrients > *:not(h2),
.p-recipe .p-recipe-detail .materials > *:not(h2),
.p-recipe .p-recipe-detail .process > *:not(h2) {
  margin-inline: 0.45em;
}
.p-recipe .p-recipe-detail .nutrients dl,
.p-recipe .p-recipe-detail .materials dl {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 1em;
  grid-row-gap: 0.75em;
  justify-content: space-between;
  font-size: 70%;
  overflow: hidden;
  line-height: 1.3;
}
.p-recipe .p-recipe-detail .nutrients dl dt,
.p-recipe .p-recipe-detail .nutrients dl dd,
.p-recipe .p-recipe-detail .materials dl dt,
.p-recipe .p-recipe-detail .materials dl dd {
  display: flex;
  align-items: center;
  background: white;
}
.p-recipe .p-recipe-detail .nutrients dl dt,
.p-recipe .p-recipe-detail .materials dl dt {
  justify-self: start;
  position: relative;
}
.p-recipe .p-recipe-detail .nutrients dl dt::after,
.p-recipe .p-recipe-detail .materials dl dt::after {
  display: inline- block;
  vertical-align: middle;
  content: "";
  position: absolute;
  left: 100%;
  width: 100vw;
  height: 1em;
  margin-left: 0.5em;
  background: linear-gradient(#e3e3e3, #e3e3e3) no-repeat left center/100% 1px;
}
.p-recipe .p-recipe-detail .nutrients dl dd,
.p-recipe .p-recipe-detail .materials dl dd {
  position: relative;
  justify-self: end;
  padding-left: 0.5em;
}
.p-recipe .p-recipe-detail .nutrients {
  position: relative;
}
.p-recipe .p-recipe-detail .nutrients .caution {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  bottom: calc(100% - 3.5714285714em);
  color: #ff8000;
  font-size: 70%;
  margin-right: 1.5714285714em;
}
.p-recipe .p-recipe-detail .materials h3 {
  font-weight: bold;
  font-size: 80%;
}
.p-recipe[data-category="1"] .p-recipe-detail .materials h3 {
  color: var(--cat1-txt2);
}

.p-recipe[data-category="2"] .p-recipe-detail .materials h3 {
  color: var(--cat2-txt2);
}

.p-recipe[data-category="3"] .p-recipe-detail .materials h3 {
  color: var(--cat3-txt2);
}

.p-recipe[data-category="4"] .p-recipe-detail .materials h3 {
  color: var(--cat4-txt2);
}

.p-recipe .p-recipe-detail .process {
  position: relative;
}
.p-recipe .p-recipe-detail .process .movie {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  bottom: calc(100% - 2.5em);
}
.p-recipe .p-recipe-detail .process .movie img {
  width: auto;
  height: 1.6em;
  cursor: pointer;
}
.p-recipe .p-recipe-detail .process ol {
  display: grid;
  grid-row-gap: 1em;
}
.p-recipe .p-recipe-detail .process ol li {
  display: grid;
  grid-column-gap: 0.5em;
  grid-row-gap: 1em;
  align-items: start;
  font-size: 70%;
}
@media (max-width: 640px) {
  .p-recipe .p-recipe-detail .process ol li {
    grid-template-columns: 1.5em 1fr;
  }
}
@media (min-width: 641px) {
  .p-recipe .p-recipe-detail .process ol li {
    grid-template-columns: 1.5em 1fr auto;
  }
}
.p-recipe .p-recipe-detail .process ol li::before {
  content: "";
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: no-repeat center center/auto 50%;
}
.p-recipe[data-category="1"] .p-recipe-detail .process ol li::before {
  background-color: var(--cat1-txt2);
}

.p-recipe[data-category="2"] .p-recipe-detail .process ol li::before {
  background-color: var(--cat2-txt2);
}

.p-recipe[data-category="3"] .p-recipe-detail .process ol li::before {
  background-color: var(--cat3-txt2);
}

.p-recipe[data-category="4"] .p-recipe-detail .process ol li::before {
  background-color: var(--cat4-txt2);
}

.p-recipe .p-recipe-detail .process ol li:nth-of-type(1)::before {
  background-image: url(../images/recipe_detail_step_1.svg);
}
.p-recipe .p-recipe-detail .process ol li:nth-of-type(2)::before {
  background-image: url(../images/recipe_detail_step_2.svg);
}
.p-recipe .p-recipe-detail .process ol li:nth-of-type(3)::before {
  background-image: url(../images/recipe_detail_step_3.svg);
}
.p-recipe .p-recipe-detail .process ol li:nth-of-type(4)::before {
  background-image: url(../images/recipe_detail_step_4.svg);
}
.p-recipe .p-recipe-detail .process ol li:nth-of-type(5)::before {
  background-image: url(../images/recipe_detail_step_5.svg);
}
.p-recipe .p-recipe-detail .process ol li:nth-of-type(6)::before {
  background-image: url(../images/recipe_detail_step_6.svg);
}
.p-recipe .p-recipe-detail .process ol li:nth-of-type(7)::before {
  background-image: url(../images/recipe_detail_step_7.svg);
}
.p-recipe .p-recipe-detail .process ol li:nth-of-type(8)::before {
  background-image: url(../images/recipe_detail_step_8.svg);
}
.p-recipe .p-recipe-detail .process ol li:nth-of-type(9)::before {
  background-image: url(../images/recipe_detail_step_9.svg);
}
.p-recipe .p-recipe-detail .process ol li p small {
  display: block;
  margin-top: 0.5em;
  font-size: smaller;
  color: #666;
}
.p-recipe .p-recipe-detail .process ol li figure {
  display: grid;
  grid-row-gap: 0.5em;
  justify-items: center;
}
@media (max-width: 640px) {
  .p-recipe .p-recipe-detail .process ol li figure {
    grid-column: 2;
  }
}
.p-recipe .p-recipe-detail .process ol li figure img {
  border-radius: 0.1em;
}
@media (max-width: 640px) {
  .p-recipe .p-recipe-detail .process ol li figure img {
    width: 16em;
  }
}
@media (min-width: 641px) {
  .p-recipe .p-recipe-detail .process ol li figure img {
    width: 10em;
  }
}
.p-recipe .recommend {
  display: grid;
  grid-row-gap: 1em;
}
@media (max-width: 640px) {
  .p-recipe .recommend {
    padding: 0 1em;
  }
}
.p-recipe .recommend h2 {
  display: flex;
  height: 1.3em;
}
.p-recipe .recommend h2 img {
  width: 100%;
  height: 100%;
}
@media (max-width: 640px) {
  .p-recipe .recommend h2 img {
    object-fit: cover;
  }
}
@media (min-width: 641px) {
  .p-recipe .recommend h2 img {
    object-fit: contain;
  }
}
.p-recipe .recommend .recipes {
  display: grid;
  align-items: start;
}
@media (max-width: 640px) {
  .p-recipe .recommend .recipes {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (min-width: 641px) {
  .p-recipe .recommend .recipes {
    grid-auto-flow: column;
    grid-column-gap: 1em;
    justify-content: center;
    align-items: start;
  }
  .p-recipe .recommend .recipes > div:nth-of-type(even) {
    margin-top: 1em;
  }
}

.p-top-menu ul {
  all: unset;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(2, auto);
}
@media (max-width: 640px) {
  .p-top-menu ul {
    grid-gap: 0.4em;
    padding: 0 1em;
  }
}
@media (min-width: 641px) {
  .p-top-menu ul {
    grid-gap: 0.6em;
  }
}
@media (min-width: 641px) {
  .p-top-menu ul li img {
    width: 11.7em;
    transition: transform 200ms;
  }
  .p-top-menu ul li img:hover {
    transform: scale(1.05);
  }
}