@charset "UTF-8";
/* =======================================================
about
======================================================= */
.p-about {
  --_padding-block: 96px;
  padding-block: var(--_padding-block);
  background-image: url("../images/top/about-bg.avif");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 767px) {
  .p-about {
    background-image: url("../images/top/about-bg-sm.avif");
  }
}
.p-about__title {
  --_font-size: 44px;
  --_margin-bottom: 68px;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  line-height: calc(60/44);
  text-align: center;
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-about__title {
    --_font-size: 48px;
    --_margin-bottom: 64px;
    line-height: calc(68/48);
  }
}
.p-about__lead {
  --_font-size: 24px;
  --_margin-bottom: 48px;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(44/24);
  text-align: center;
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-about__lead {
    --_font-size: 36px;
    --_margin-bottom: 64px;
    line-height: calc(64/36);
  }
}
.p-about__list {
  --_gap: 23px;
  display: block grid;
  gap: var(--_gap);
}
@media (width >= 768px) {
  .p-about__list {
    --_columns: 3;
    grid-template-columns: repeat(var(--_columns), 1fr);
  }
}
@media (width <= 767px) {
  .p-about__list {
    --_gap: 48px;
    --_max-width: 590px;
    max-width: var(--_max-width);
    margin-inline: auto;
  }
}
.p-about__item {
  --_background-color: var(--color-brightest);
  --_padding-block: 31px;
  --_padding-inline: 23px;
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
  background-color: var(--_background-color);
  border: 1px solid var(--color-base);
}
@media (width <= 767px) {
  .p-about__item {
    --_padding-block: 47px;
    --_padding-inline: 43px;
  }
}
@media (width <= 767px) {
  .p-about__item:first-of-type .p-about__item-text {
    letter-spacing: 0.04em;
  }
}
.p-about__item-imgwrapper {
  --_margin-bottom: 24px;
  margin-bottom: var(--_margin-bottom);
}
@media (width <= 767px) {
  .p-about__item-imgwrapper {
    --_margin-bottom: 32px;
  }
}
.p-about__item-title {
  --_font-size: 20px;
  --_margin-bottom: 16px;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(28/20);
  text-align: center;
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-about__item-title {
    --_font-size: 32px;
    --_margin-bottom: 32px;
    line-height: calc(52/32);
  }
}
.p-about__item-text {
  letter-spacing: 0.08em;
}

/* =======================================================
attention
======================================================= */
.p-attention {
  --_padding-block: 96px;
  padding-block: var(--_padding-block);
  background-image: url("../images/top/attention-bg.avif");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 767px) {
  .p-attention {
    background-image: url("../images/top/attention-bg-sm.avif");
  }
}
@media (width <= 767px) {
  .p-attention .c-title {
    --_margin-bottom: 64px;
  }
}
.p-attention__lead {
  --_font-size: 24px;
  --_margin-bottom: 64px;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(44/24);
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-attention__lead {
    --_font-size: 36px;
    line-height: calc(64/36);
  }
}
.p-attention__about {
  --_margin-bottom: 32px;
  margin-bottom: var(--_margin-bottom);
}
@media (width <= 767px) {
  .p-attention__about {
    --_margin-bottom: 40px;
  }
}
.p-attention__about-title {
  --_background-color: var(--color-contrast);
  --_color: var(--color-brightest);
  --_font-size: 32px;
  --_padding-block: 28px;
  padding-block: var(--_padding-block);
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(52/32);
  color: var(--_color);
  text-align: center;
  letter-spacing: 0.08em;
  background-color: var(--_background-color);
}
.p-attention__about-text-wrapper {
  --_background-color: var(--color-brightest);
  --_padding-block: 40px;
  padding-block: var(--_padding-block);
  text-align: center;
  background-color: var(--_background-color);
  border-top: 1px solid var(--color-contrast);
}
.p-attention__about-text {
  --_font-size: 20px;
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(36/20);
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-attention__about-text {
    --_font-size: 28px;
  }
}
.p-attention__end {
  --_margin-bottom: 96px;
  margin-bottom: var(--_margin-bottom);
  text-align: center;
  paint-order: stroke;
  -webkit-text-stroke: 4px var(--color-brightest);
}
@media (width <= 767px) {
  .p-attention__end {
    --_margin-bottom: 128px;
  }
}
.p-attention__note {
  --_font-size: 14px;
  --_margin-bottom: 96px;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  line-height: calc(22/14);
  text-align: center;
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-attention__note {
    --_font-size: 24px;
    --_margin-bottom: 128px;
    line-height: calc(36/24);
  }
}
.p-attention__other-title {
  --_font-size: 28px;
  --_margin-bottom: 56px;
  --_width: fit-content;
  width: var(--_width);
  margin-inline: auto;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(44/28);
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-attention__other-title {
    --_font-size: 36px;
    line-height: calc(58/36);
    text-align: center;
  }
}
@media (width <= 767px) {
  .p-attention__other-title .u-underline[data-underline=md] {
    background: transparent;
  }
}
.p-attention__other-list {
  --_gap: 40px;
  display: block grid;
  gap: var(--_gap);
}
@media (width >= 768px) {
  .p-attention__other-list {
    --_columns: 2;
    grid-template-columns: repeat(var(--_columns), 1fr);
  }
}
@media (width <= 767px) {
  .p-attention__other-list {
    --_gap: 48px;
  }
}
.p-attention__other-item {
  --_background-color: var(--color-brightest);
  --_gap: 8px 24px;
  --_padding-block: 30px;
  --_padding-inline: 32px;
  display: block grid;
  gap: var(--_gap);
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
  background-color: var(--_background-color);
}
@media (width >= 768px) {
  .p-attention__other-item {
    grid-template: "imgwrapper title" "imgwrapper text";
    grid-template-rows: auto 1fr;
    grid-template-columns: 186px 1fr;
  }
}
@media (width <= 767px) {
  .p-attention__other-item {
    --_gap: 32px 24px;
    --_padding-block: 40px;
    --_padding-inline: 26px;
    grid-template: "title title" "imgwrapper text";
    grid-template-columns: 294px 1fr;
  }
}
.p-attention__other-item-imgwrapper {
  grid-area: imgwrapper;
  align-self: start;
}
.p-attention__other-item-title {
  --_color: var(--color-accent);
  grid-area: title;
  color: var(--_color);
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-attention__other-item-title {
    --_font-size: 32px;
    justify-self: center;
    font-size: var(--_font-size);
    line-height: calc(42/32);
  }
}
.p-attention__other-item-text {
  grid-area: text;
}

/* =======================================================
common
======================================================= */
/* =======================================================
history
======================================================= */
.p-history {
  --_background-color: var(--color-contrast-secondary);
  --_padding-block: 96px;
  padding-block: var(--_padding-block);
  background-color: var(--_background-color);
}
@media (width <= 767px) {
  .p-history .l-inner {
    --inner-padding-inline: 40px;
  }
}
@media (width <= 767px) {
  .p-history .c-title {
    --_margin-bottom: 64px;
  }
}
.p-history__lead {
  --_font-size: 24px;
  --_margin-bottom: 48px;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(44/24);
  text-align: center;
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-history__lead {
    --_font-size: 36px;
    --_margin-bottom: 64px;
    line-height: calc(64/36);
  }
}
.p-history__conts {
  --_background-color: var(--color-brightest);
  --_gap: 32px 40px;
  --_padding-block: 43px;
  --_padding-inline: 47px;
  display: block grid;
  gap: var(--_gap);
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
  background-color: var(--_background-color);
  border: 1px solid var(--color-base);
}
@media (width <= 767px) {
  .p-history__conts {
    --_gap: 48px;
  }
}
@media (width >= 768px) {
  .p-history__conts:nth-of-type(odd) {
    grid-template: "title imgwrapper" "body imgwrapper";
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 456px;
  }
}
@media (width >= 768px) {
  .p-history__conts:nth-of-type(even) {
    grid-template: "imgwrapper title" "imgwrapper body";
    grid-template-rows: auto 1fr;
    grid-template-columns: 456px 1fr;
  }
}
.p-history__conts-wrapper {
  --_gap: 40px;
  display: block grid;
  gap: var(--_gap);
}
.p-history__conts-title {
  --_font-size: 28px;
  font-size: var(--_font-size);
  line-height: calc(38/28);
  letter-spacing: 0.08em;
}
@media (width >= 768px) {
  .p-history__conts-title {
    grid-area: title;
  }
}
@media (width <= 767px) {
  .p-history__conts-title {
    --_font-size: 36px;
    line-height: calc(52/36);
    text-align: center;
  }
}
.p-history__conts-body {
  --_gap: 1em;
  display: block grid;
  gap: var(--_gap);
  align-self: start;
}
@media (width >= 768px) {
  .p-history__conts-body {
    grid-area: body;
  }
}
.p-history__conts-imgwrapper {
  align-self: start;
  flex-direction: column;
}
@media (width >= 768px) {
  .p-history__conts-imgwrapper {
    grid-area: imgwrapper;
  }
}
.p-history__note{
  color: var(--color-base);
  margin-top: 0.5em;
  --_font-size: 14px;
    font-size: var(--_font-size);
    line-height: calc(22 / 14);
    letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-history__note {
    --_font-size: 24px;
    --_margin-bottom: 128px;
    line-height: calc(36/24);
  }
}
/* =======================================================
mechanism
======================================================= */
.p-mechanism {
  --_padding-block: 96px;
  padding-block: var(--_padding-block);
  background-image: url("../images/top/mechanism-bg.avif");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 767px) {
  .p-mechanism {
    background-image: url("../images/top/mechanism-bg-sm.avif");
  }
}
@media (width <= 767px) {
  .p-mechanism .l-inner {
    --inner-padding-inline: 40px;
  }
}
.p-mechanism__flow-list {
  --_gap: 48px;
  --_margin-bottom: 48px;
  gap: var(--_gap);
  margin-bottom: var(--_margin-bottom);
}
@media (width >= 768px) {
  .p-mechanism__flow-list {
    display: block flex;
  }
}
@media (width <= 767px) {
  .p-mechanism__flow-list {
    --_gap: 24px;
    --_max-width: 496px;
    display: block grid;
    max-width: var(--_max-width);
    margin-inline: auto;
  }
}
.p-mechanism__flow-item {
  --_gap: 16px;
  display: block grid;
  gap: var(--_gap);
}
@media (width >= 768px) {
  .p-mechanism__flow-item {
    --_max-width: 220px;
    grid-template-rows: auto 1fr;
    max-width: var(--_max-width);
  }
}
@media (width <= 767px) {
  .p-mechanism__flow-item {
    --_gap: 48px;
    grid-template-columns: 220px 1fr;
  }
}
@media (width <= 767px) {
  .p-mechanism__flow-item:first-of-type .p-mechanism__flow-item-text {
    letter-spacing: 0.04em;
  }
}
.p-mechanism__flow-item:not(:last-of-type) .p-mechanism__flow-item-text::after {
  --_triangle-color: var(--color-accent);
  --_triangle-height: 34px;
  --_triangle-width: 18px;
  position: absolute;
  width: var(--_triangle-width);
  height: var(--_triangle-height);
  content: "";
  background-color: var(--_triangle-color);
}
@media (width >= 768px) {
  .p-mechanism__flow-item:not(:last-of-type) .p-mechanism__flow-item-text::after {
    top: 50%;
    right: -36px;
    clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
    translate: 0 -50%;
  }
}
@media (width <= 767px) {
  .p-mechanism__flow-item:not(:last-of-type) .p-mechanism__flow-item-text::after {
    --_triangle-height: 24px;
    --_triangle-width: 46px;
    bottom: calc((var(--_triangle-height) + 4px) * -1);
    left: 50%;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    translate: -50%;
  }
}
.p-mechanism__flow-item-imgwrapper {
  --_border-radius: calc(infinity * 1px);
  overflow: clip;
  border-radius: var(--_border-radius);
}
.p-mechanism__flow-item-text {
  --_font-size: 24px;
  position: relative;
  align-self: center;
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(38/24);
  text-align: center;
  letter-spacing: 0.06em;
}
@media (width <= 767px) {
  .p-mechanism__flow-item-text {
    --_font-size: 36px;
    --_height: 100%;
    display: block flex;
    align-items: center;
    justify-content: center;
    height: var(--_height);
    line-height: calc(56/36);
  }
}
.p-mechanism__about {
  --_background-color: var(--color-brightest);
  --_margin-bottom: 48px;
  --_max-width: 750px;
  --_padding-block: 40px;
  --_padding-inline: 64px;
  max-width: var(--_max-width);
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
  margin-inline: auto;
  margin-bottom: var(--_margin-bottom);
  background-color: var(--_background-color);
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}
@media (width <= 767px) {
  .p-mechanism__about {
    --_padding-inline: 56px;
  }
}
.p-mechanism__about-title {
  --_font-size: 28px;
  --_margin-bottom: 16px;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(44/28);
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-mechanism__about-title {
    --_font-size: 36px;
    --_margin-bottom: 30px;
    margin-inline: calc(50% - 50vw);
    line-height: calc(54/36);
    text-align: center;
  }
}
.p-mechanism__caution {
  width: fit-content;
  margin-inline: auto;
}
.p-mechanism__caution-text {
  --_font-size: 16px;
  font-size: var(--_font-size);
  line-height: calc(26/16);
  text-align: center;
}
@media (width <= 767px) {
  .p-mechanism__caution-text {
    --_font-size: 24px;
    line-height: calc(36/24);
  }
}

/* =======================================================
mv
======================================================= */
.p-mv {
  --_padding-block: 154px 117px;
  padding-block: var(--_padding-block);
  background-image: url("../images/top/mv-bg.avif");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 767px) {
  .p-mv {
    --_padding-block: 288px 128px;
    background-image: url("../images/top/mv-bg-sm.avif");
  }
}
@media (width <= 767px) {
  .p-mv .l-inner {
    --inner-padding-inline: 56px;
  }
}
.p-mv__lead {
  --_font-size: 28px;
  --_margin-bottom: 27px;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(44/28);
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-mv__lead {
    --_font-size: 32px;
    --_margin-bottom: 71px;
    line-height: calc(52/32);
    -webkit-text-stroke: 10px var(--color-brightest);
    paint-order: stroke;
  }
}
@media (width <= 767px) {
  .p-mv__lead-deco {
    --_font-size: 36px;
    font-size: var(--_font-size);
    line-height: calc(52/36);
  }
}
.p-mv__title {
  --_margin-bottom: 48px;
  --_width: fit-content;
  position: relative;
  width: var(--_width);
  margin-bottom: var(--_margin-bottom);
}
@media (width <= 767px) {
  .p-mv__title {
    --_margin-bottom: 96px;
  }
}
.p-mv__title-row {
  --_font-size: 72px;
  display: block;
  font-size: var(--_font-size);
  font-weight: 500;
  line-height: calc(100/72);
  letter-spacing: 0.06em;
}
@media (width <= 767px) {
  .p-mv__title-row {
    --_font-size: 70px;
    line-height: calc(98/70);
  }
}
.p-mv__title-row[data-row-num="2"] {
  position: relative;
}
.p-mv__title-row span[data-letter-spacing="-0.4"] {
  letter-spacing: -0.4em;
}
.p-mv__title-row-sm {
  --_font-size: 56px;
  font-size: var(--_font-size);
  line-height: calc(100/56);
}
@media (width <= 767px) {
  .p-mv__title-row-sm {
    --_font-size: 54px;
    line-height: calc(98/54);
  }
}
.p-mv__title-row-md {
  --_font-size: 68px;
  font-size: var(--_font-size);
  line-height: calc(100/68);
}
@media (width <= 767px) {
  .p-mv__title-row-md {
    --_font-size: 70px;
    line-height: calc(98/70);
  }
}
.p-mv__title-attention {
  --_width: 148px;
  position: absolute;
  right: 10px;
  bottom: 103px;
  width: var(--_width);
  aspect-ratio: 148/138;
}
@media (width <= 767px) {
  .p-mv__title-attention {
    --_width: 167px;
    right: 3px;
    bottom: 104px;
    aspect-ratio: 167/153;
  }
}
.p-mv__title-deco {
  -webkit-text-stroke: 10px var(--color-brightest);
  paint-order: stroke;
}
.p-mv__point {
  --_padding-block: 16px;
  --_padding-inline: 45px 72px;
  --_width: fit-content;
  position: relative;
  width: var(--_width);
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
  text-align: center;
}
@media (width <= 767px) {
  .p-mv__point {
    --_padding-block: 23px;
    --_padding-inline: 0px 56px;
  }
}
.p-mv__point::before {
  --_background-color: var(--color-secondary);
  --_height: 100%;
  --_width: calc(100% + ((min(max(100vw, var(--viewport-width)), 2000px) - (var(--inner-max-width) - var(--inner-padding-inline) * 2)) / 2));
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--_width);
  height: var(--_height);
  content: "";
  background-color: var(--_background-color);
  translate: 0 -50%;
}
.p-mv__point-inner {
  --_color: var(--color-brightest);
  --_font-size: 20px;
  position: relative;
  z-index: var(--z-index-on);
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(44/20);
  color: var(--_color);
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-mv__point-inner {
    --_font-size: 28px;
    line-height: calc(52/28);
  }
}
.p-mv__point-deco {
  --_font-size: 32px;
  display: block flex;
  font-size: var(--_font-size);
  line-height: calc(44/32);
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-mv__point-deco {
    --_font-size: 36px;
    line-height: calc(52/36);
  }
}
.p-mv__point-deco::before, .p-mv__point-deco::after {
  content: "＼";
}
.p-mv__point-deco::after {
  scale: -1 1;
}

/* =======================================================
recipe
======================================================= */
.p-recipe {
  --_padding-block: 96px;
  padding-block: var(--_padding-block);
  background-image: url("../images/top/recipe-bg.avif");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 767px) {
  .p-recipe {
    background-image: url("../images/top/recipe-bg-sm.avif");
  }
}
.p-recipe .c-title {
  --_margin-bottom: 72px;
}
@media (width <= 767px) {
  .p-recipe .c-title {
    --_margin-bottom: 64px;
  }
}
.p-recipe__lead {
  --_font-size: 24px;
  --_margin-bottom: 45px;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(44/24);
  text-align: center;
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-recipe__lead {
    --_font-size: 36px;
    --_margin-bottom: 64px;
    line-height: calc(64/36);
  }
}
.p-recipe__list {
  --_gap: 24px;
  --_margin-bottom: 64px;
  display: block grid;
  gap: var(--_gap);
  margin-bottom: var(--_margin-bottom);
}
@media (width >= 768px) {
  .p-recipe__list {
    --_columns: 4;
    grid-template-columns: repeat(var(--_columns), 1fr);
  }
}
@media (width <= 767px) {
  .p-recipe__list {
    --_gap: 48px;
    --_max-width: 500px;
    max-width: var(--_max-width);
    margin-inline: auto;
  }
}
.p-recipe__item-title {
  --_background-color: var(--color-brightest);
  --_font-size: 17px;
  --_padding-block: 24px;
  padding-block: var(--_padding-block);
  font-size: var(--_font-size);
  text-align: center;
  background-color: var(--_background-color);
}
@media (width <= 767px) {
  .p-recipe__item-title {
    --_font-size: 36px;
    --_padding-block: 55px;
    line-height: calc(54/36);
  }
}
.p-recipe__choise-wrapper {
  --_gap: 16px;
  --_margin-bottom: 64px;
  --_width: fit-content;
  display: block grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--_gap);
  align-items: center;
  width: var(--_width);
  margin-inline: auto;
  margin-bottom: var(--_margin-bottom);
  text-align: center;
}
@media (width <= 767px) {
  .p-recipe__choise-wrapper {
    --_gap: 8px;
  }
}
.p-recipe__choise-wrapper::before, .p-recipe__choise-wrapper::after {
  width: 76px;
  height: 104px;
  content: "";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 767px) {
  .p-recipe__choise-wrapper::before, .p-recipe__choise-wrapper::after {
    width: 90px;
    height: 124px;
  }
}
.p-recipe__choise-wrapper::before {
  background-image: url("../images/top/recipe-choice-deco-l.svg");
}
.p-recipe__choise-wrapper::after {
  background-image: url("../images/top/recipe-choice-deco-r.svg");
}
.p-recipe__choise {
  position: relative;
}
@media (width >= 768px) {
  .p-recipe__choise::before {
    --_border-radius: calc(infinity * 1px);
    --_height: calc(100% + 82px);
    --_width: calc(100% + 40px);
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--_width);
    height: var(--_height);
    content: "";
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
    border-radius: var(--_border-radius);
    translate: -50% -50%;
  }
}
.p-recipe__choise-inner {
  --_font-size: 28px;
  position: relative;
  z-index: var(--z-index-on);
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(52/28);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
}
@media (width <= 767px) {
  .p-recipe__choise-inner {
    --_font-size: 36px;
    line-height: calc(64/36);
  }
}
.p-recipe__choise-deco {
  --_font-size: 32px;
  font-size: var(--_font-size);
  line-height: calc(52/32);
}
@media (width <= 767px) {
  .p-recipe__choise-deco {
    --_font-size: 40px;
    line-height: calc(64/40);
  }
}

/* =======================================================
recommendation
======================================================= */
.p-recommendation {
  --_padding-bottom: 96px;
  padding-bottom: var(--_padding-bottom);
  background-image: url("../images/top/recommendation-bg.avif");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 2000px 615px;
}
@media (width <= 767px) {
  .p-recommendation {
    background-image: url("../images/top/recommendation-bg-sm.avif");
    background-size: 750px 1098px;
  }
}
.p-recommendation__title-wrapper {
  position: relative;
}
.p-recommendation__title-wrapper::before {
  --_background-color: var(--color-secondary);
  --_height: calc(100% + 50px);
  --_min-width: 1024px;
  position: absolute;
  top: 0;
  left: 50%;
  width: min(max(100vw, var(--viewport-width)), 2000px);
  height: var(--_height);
  content: "";
  background-color: var(--_background-color);
  translate: -50%;
}
@media (width <= 767px) {
  .p-recommendation__title-wrapper::before {
    --_height: calc(100% + 44px);
    --_min-width: 750px;
  }
}
.p-recommendation__title {
  --_color: var(--color-brightest);
  --_font-size: 32px;
  --_gap: 20px;
  --_padding-block: 96px 64px;
  --_width: fit-content;
  position: relative;
  z-index: var(--z-index-on);
  display: block grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--_gap);
  width: var(--_width);
  padding-block: var(--_padding-block);
  margin-inline: auto;
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(56/32);
  color: var(--_color);
  text-align: center;
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-recommendation__title {
    --_font-size: 36px;
    --_gap: 15px;
    --_padding-block: 96px 48px;
    line-height: calc(68/36);
  }
}
.p-recommendation__title::before, .p-recommendation__title::after {
  --_width: 100px;
  align-self: end;
  width: var(--_width);
  aspect-ratio: 1;
  content: "";
  background-image: url("../images/top/recommendation-ttl-deco.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 767px) {
  .p-recommendation__title::before, .p-recommendation__title::after {
    --_width: 98px;
  }
}
.p-recommendation__title::after {
  scale: -1 1;
}
.p-recommendation__title-deco {
  --_font-size: 44px;
  font-size: var(--_font-size);
  line-height: calc(56/44);
}
@media (width <= 767px) {
  .p-recommendation__title-deco {
    --_font-size: 48px;
    line-height: calc(68/48);
  }
}
.p-recommendation__list {
  --_column-gap: 32px;
  --_row-gap: 32px;
  position: relative;
  z-index: var(--z-index-on);
  display: block flex;
  flex-wrap: wrap;
  gap: var(--_row-gap) var(--_column-gap);
  justify-content: center;
}
@media (width >= 768px) {
  .p-recommendation__list {
    --_list-max-width: 868px;
    max-width: var(--_list-max-width);
    margin-inline: auto;
  }
}
@media (width <= 767px) {
  .p-recommendation__list {
    --_column-gap: 30px;
    --_list-max-width: 100%;
    --_row-gap: 24px;
  }
}
.p-recommendation__item {
  --_column: 3;
  --_width: calc((var(--_list-max-width) - var(--_column-gap) * calc(var(--_column) - 1)) / var(--_column));
  width: var(--_width);
  aspect-ratio: 1;
  overflow: clip;
  text-align: center;
}
@media (width <= 767px) {
  .p-recommendation__item {
    --_column: 2;
  }
}
@media (width >= 768px) {
  .p-recommendation__item:nth-of-type(-n + 2) {
    --_width: calc((var(--_list-max-width) - var(--_column-gap)) / 2);
    aspect-ratio: revert;
  }
}
@media (width >= 768px) {
  .p-recommendation__item:nth-of-type(-n + 2) .p-recommendation__item-inner {
    --_width: calc((var(--_list-max-width) - var(--_column-gap) * calc(var(--_column) - 1)) / var(--_column));
    aspect-ratio: 1;
  }
}
@media (width <= 767px) {
  .p-recommendation__item:first-of-type {
    aspect-ratio: revert;
  }
}
@media (width >= 768px) {
  .p-recommendation__item:first-of-type .p-recommendation__item-inner {
    margin-left: auto;
  }
}
@media (width <= 767px) {
  .p-recommendation__item:first-of-type .p-recommendation__item-inner {
    --_width: calc((var(--_list-max-width) - var(--_column-gap) * calc(var(--_column) - 1)) / var(--_column));
    aspect-ratio: 1;
    margin-inline: auto;
  }
}
@media (width <= 767px) {
  .p-recommendation__item:first-of-type {
    --_width: 100%;
  }
}
@media (width >= 768px) {
  .p-recommendation__item:nth-of-type(2) .p-recommendation__item-inner {
    margin-right: auto;
  }
}
.p-recommendation__item-inner {
  --_background-color: var(--color-brightest);
  --_border-radius: calc(infinity * 1px);
  --_height: 100%;
  --_padding-bottom: 48px;
  --_width: 100%;
  display: block grid;
  grid-template-rows: 1fr auto;
  width: var(--_width);
  height: var(--_height);
  padding-bottom: var(--_padding-bottom);
  background-color: var(--_background-color);
  border-radius: var(--_border-radius);
}
@media (width <= 767px) {
  .p-recommendation__item-inner {
    --_padding-block: 49px;
  }
}
.p-recommendation__item-imgwrapper {
  --_margin-bottom: 16px;
  --_width: 60px;
  align-self: end;
  width: var(--_width);
  aspect-ratio: 1;
  margin-inline: auto;
  margin-bottom: var(--_margin-bottom);
}
@media (width <= 767px) {
  .p-recommendation__item-imgwrapper {
    --_margin-bottom: 24px;
    --_width: 82px;
  }
}
.p-recommendation__item-title {
  --_font-size: 20px;
  min-height: 3lh;
  font-size: var(--_font-size);
  line-height: calc(36/20);
  letter-spacing: 0.08em;
}
@media (width >= 768px) {
  .p-recommendation__item-title {
    display: block grid;
    align-items: center;
  }
}
@media (width <= 767px) {
  .p-recommendation__item-title {
    --_font-size: 28px;
    line-height: calc(42/28);
  }
}

/* =======================================================
topic
======================================================= */
.p-topic {
  --_background-color: #9ea3a9;
  --_padding-block: 64px;
  padding-block: var(--_padding-block);
  background-color: var(--_background-color);
}
.p-topic .l-inner {
  --inner-padding-inline: 40px;
}
.p-topic__title {
  --_color: var(--color-brightest);
  --_font-size: 20px;
  --_margin-bottom: 32px;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: calc(32/20);
  color: var(--_color);
  text-align: center;
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-topic__title {
    --_font-size: 32px;
    --_margin-bottom: 48px;
    line-height: calc(52/32);
  }
}
.p-topic__note-wrapper {
  --_width: fit-content;
  width: var(--_width);
  margin-inline: auto;
}
.p-topic__note {
  --_color: var(--color-brightest);
  --_font-size: 14px;
  font-size: var(--_font-size);
  line-height: calc(22/14);
  color: var(--_color);
}
@media (width >= 768px) {
  .p-topic__note {
    letter-spacing: 0.08em;
  }
}
@media (width <= 767px) {
  .p-topic__note {
    --_font-size: 24px;
    line-height: calc(36/24);
  }
}
.p-topic__note a {
  text-decoration: underline;
  transition-property: color;
  will-change: color;
}
.p-topic__note a:focus-visible {
  --_color: oklch(from var(--color-brightest) calc(l - 0.1) c h);
  color: var(--_color);
}
@media (any-hover: hover) {
  .p-topic__note a:hover {
    --_color: oklch(from var(--color-brightest) calc(l - 0.1) c h);
    color: var(--_color);
  }
}

/* =======================================================
worries
======================================================= */
.p-worries {
  --_padding-block: 156px 96px;
  padding-block: var(--_padding-block);
  background-image: url("../images/top/worries-bg.avif");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 767px) {
  .p-worries {
    --_padding-block: 96px;
    background-image: url("../images/top/worries-bg-sm.avif");
  }
}
.p-worries__title {
  --_font-size: 32px;
  --_margin-bottom: 64px;
  position: relative;
  display: inline-block;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  line-height: calc(64/32);
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-worries__title {
    --_font-size: 40px;
    line-height: calc(58/40);
  }
}
.p-worries__title::before, .p-worries__title-inner::before {
  position: absolute;
  top: 50%;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
  color: var(--color-brightest);
  letter-spacing: 0.08em;
  content: var(--_content);
  filter: blur(10px);
  translate: 0 -50%;
}
.p-worries__title::before {
  --_content: "ありませんか？";
  --_line-height: calc(64/32);
  right: 0;
}
@media (width <= 767px) {
  .p-worries__title::before {
    line-height: calc(58/40);
  }
}
.p-worries__title-inner {
  position: relative;
  z-index: var(--z-index-on);
}
.p-worries__title-inner::before {
  --_content: "こんなお悩み";
  --_font-size: 44px;
  --_line-height: calc(64/44);
  left: 0;
}
@media (width <= 767px) {
  .p-worries__title-inner::before {
    --_font-size: 48px;
    line-height: calc(58/48);
  }
}
.p-worries__title-deco {
  --_font-size: 44px;
  position: relative;
  z-index: var(--z-index-on);
  font-size: var(--_font-size);
  line-height: calc(64/44);
}
@media (width <= 767px) {
  .p-worries__title-deco {
    --_font-size: 48px;
    line-height: calc(58/48);
  }
}
.p-worries__check-list {
  --_gap: 34px;
  --_margin-bottom: 138px;
  display: block grid;
  gap: var(--_gap);
  margin-bottom: var(--_margin-bottom);
}
@media (width <= 767px) {
  .p-worries__check-list {
    --_gap: 32px;
    --_margin-bottom: 194px;
  }
}
.p-worries__check-item {
  --_before-offset: calc(var(--_before-size) + var(--_gap));
  --_before-size: 24px;
  --_font-size: 24px;
  --_gap: 16px;
  --_padding-inline-start: var(--_before-offset);
  display: block flow-root;
  padding-inline-start: var(--_padding-inline-start);
  font-size: var(--_font-size);
  line-height: calc(26/24);
  letter-spacing: 0.08em;
}
@media (width <= 767px) {
  .p-worries__check-item {
    --_before-size: 38px;
    --_font-size: 36px;
    line-height: calc(54/36);
  }
}
.p-worries__check-item::before {
  --_margin-block: calc((1lh - var(--_before-size)) / 2);
  float: inline-start;
  display: block;
  width: var(--_before-size);
  aspect-ratio: 1;
  margin-block: var(--_margin-block);
  margin-inline-start: calc(var(--_before-offset) * -1);
  content: "";
  background-image: url("../images/top/worries-check.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.p-worries__comment {
  --_font-size: 20px;
  --_margin-bottom: 32px;
  --_padding: 21px;
  width: fit-content;
  min-height: 122px;
  padding: var(--_padding);
  margin-inline: auto;
  margin-bottom: var(--_margin-bottom);
  font-size: var(--_font-size);
  line-height: calc(32/20);
  text-align: center;
  letter-spacing: 0.08em;
  background-image: url("../images/top/worries-comment-bg.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 767px) {
  .p-worries__comment {
    --_font-size: 28px;
    --_margin-bottom: 24px;
    --_max-width: 600px;
    --_padding-block: 35px 55px;
    --_width: 100%;
    width: var(--_width);
    max-width: var(--_max-width);
    padding-block: var(--_padding-block);
    line-height: calc(42/28);
  }
}
.p-worries__about {
  --_color: var(--color-accent);
  --_font-size: 32px;
  --_gap: 2px;
  position: relative;
  display: block grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--_gap);
  width: fit-content;
  margin-inline: auto;
  font-size: var(--_font-size);
  font-weight: 700;
  color: var(--_color);
}
@media (width <= 767px) {
  .p-worries__about {
    --_font-size: 36px;
    --_gap: 15px;
    align-items: center;
    line-height: calc(68/36);
    text-align: center;
  }
}
.p-worries__about::before, .p-worries__about::after {
  --_height: 52px;
  --_width: 42px;
  width: var(--_width);
  height: var(--_height);
  content: "";
  background-image: url("../images/top/worries-about-deco.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width <= 767px) {
  .p-worries__about::before, .p-worries__about::after {
    --_height: 108px;
    --_width: 88px;
    background-image: url("../images/top/worries-about-deco-sm.svg");
  }
}
.p-worries__about::after {
  scale: -1 1;
}
.p-worries__about-deco {
  --_font-size: 40px;
  font-size: var(--_font-size);
  line-height: calc(48/40);
}
@media (width <= 767px) {
  .p-worries__about-deco {
    --_font-size: 48px;
    line-height: calc(68/48);
  }
}