@-webkit-keyframes zoomUp {
  0% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoomUp {
  0% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
#page:has(.page-jp-flavors-tube) {
  overflow: revert;
}

#site-link-utility {
  z-index: 100;
}

:root {
  scroll-behavior: smooth;
}

.js-fadein-up {
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.js-fadein-up:not(.is-animated) {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
}

.page-jp-flavors-tube {
  --content-min-margin: 20;
  --content-base-margin: 80;
  --content-base-width: 1440;
  --fz-h1: clamp(2.8rem, calc((80 / 1440) * 100vw), 8rem);
  --fz-h2: clamp(3.2rem, calc((40 / 1440) * 100vw), 4rem);
  --fz-h3: clamp(2.2rem, calc((24 / 1440) * 100vw), 2.4rem);
  --fz-h4: clamp(1.8rem, calc((22 / 1440) * 100vw), 2.2rem);
  --fz-p: clamp(1.4rem, calc((16 / 1440) * 100vw), 1.6rem);
  --ff-beaufort: "beaufort-pro", serif;
  --ff-beelzebrush: beelzebrush-black-bb, sans-serif;
  --ff-garamond: garamond-premier-pro, serif;
  --clr-sb-green: #00836b;
  --clr-sb-red: #d62828;
  --clr-sb-beige: #f5f2e6;
  --clr-umeboshi: #ea8395;
  --clr-mentaiko: #ef6e5d;
  --clr-yuzumiso: #ab3f25;
  /* --clr-text-gray-1: #000; */
  --clr-bdr-gray-1: #d2cfc6;
  /* --clr-bdr-gray-2: #000; */
}
.page-jp-flavors-tube :where(p) {
  margin-top: unset;
}

.pg-mv {
  position: relative;
  z-index: 2;
  -webkit-transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  -webkit-transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.pg-mv:not(:has(.pg-mv__slider.swiper-initialized)) {
  opacity: 0;
}
.pg-mv:not(.is-initialized) {
  opacity: 0;
}
.pg-mv img {
  width: 100%;
}
.pg-mv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 869px) {
  .pg-mv__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 869px) {
  .pg-mv__cell:first-child {
    display: none;
  }
}
:is(.pg-mv__slider .swiper-slide-active, .pg-mv__slider .swiper-slide-duplicate-active, .pg-mv__slider .swiper-slide-prev) img {
  -webkit-animation: zoomUp 8s linear 0s normal both;
          animation: zoomUp 8s linear 0s normal both;
}
@media (max-width: 576px) {
  .pg-mv__slider img {
    aspect-ratio: 1/1;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.pg-mv__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: var(--ff-beelzebrush);
  font-size: clamp(40px, 5vw, 72px);
  z-index: 100;
  line-height: 1;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
.pg-mv__title span {
  display: block;
}
.pg-mv__title span:first-child {
  color: #fff;
}
.pg-mv__title span:last-child {
  margin-top: clamp(4px, 0.5555555556vw, 8px);
}
@media (max-width: 576px) {
  .pg-mv__title {
    margin-inline: max(var(--content-min-margin, 24) * 1px, var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw);
  }
  .pg-mv__title:first-child {
    display: none;
  }
}
@media (min-width: 576px) {
  .pg-mv__title {
    margin: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (min-width: 869px) {
  .pg-mv__title br {
    display: none;
  }
}

.pg-tube-slider {
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  padding: clamp(32px, 3.3333333333vw, 48px);
  width: calc(clamp(45px, 5.5555555556vw, 80px) + 32px + 32px);
}
@media (min-width: 869px) {
  .pg-tube-slider {
    width: calc(clamp(45px, 5.5555555556vw, 80px) + 48px + 48px);
  }
}
.pg-tube-slider img {
  width: clamp(45px, 5.5555555556vw, 80px);
  -webkit-filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.15));
          filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.15));
}
.pg-tube-slider .swiper-slide img {
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.pg-tube-slider .swiper-slide:not(.swiper-slide-active) img {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}

.pg-introduction {
  position: relative;
  padding-block: clamp(115px, 8.4722222222vw, 122px) clamp(135px, 12.3611111111vw, 178px);
  overflow: hidden;
  z-index: 1;
  -webkit-transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.pg-introduction:not(.is-animated) {
  opacity: 0;
}
.pg-introduction[data-type=fixed] {
  --marquee-clr: #f3ead3;
}
.pg-introduction[data-type=fixed] .pg-introduction__bg:has(img[src*=fixed]) {
  opacity: 1;
  visibility: visible;
}
.pg-introduction[data-type=umeboshi] {
  --marquee-clr: #ffe7eb;
}
.pg-introduction[data-type=umeboshi] .pg-introduction__bg:has(img[src*=umeboshi]) {
  opacity: 1;
  visibility: visible;
}
.pg-introduction[data-type=mentaiko] {
  --marquee-clr: #fae0dd;
}
.pg-introduction[data-type=mentaiko] .pg-introduction__bg:has(img[src*=mentaiko]) {
  opacity: 1;
  visibility: visible;
}
.pg-introduction[data-type=yuzumiso] {
  --marquee-clr: #fbe9c6;
}
.pg-introduction[data-type=yuzumiso] .pg-introduction__bg:has(img[src*=yuzumiso]) {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 576px) {
  .pg-introduction {
    text-align: center;
  }
}
@media (min-width: 869px) {
  .pg-introduction {
    padding-inline: 128px;
  }
}
.pg-introduction__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  z-index: 1;
}
.pg-introduction__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pg-introduction__inner {
  position: relative;
  --minmax: max(calc(var(--content-min-margin, 24) * 1px), calc(var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw));
  max-width: var(--content-max-width, 880px);
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - var(--minmax) * 2);
  z-index: 3;
}
.pg-introduction__marquee {
  position: absolute;
  left: 0;
  bottom: 0;
  font-family: var(--ff-garamond);
  font-size: clamp(80px, 9.7222222222vw, 140px);
  line-height: 1;
  color: var(--marquee-clr, #f0f0f0);
  mix-blend-mode: multiply;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 2;
  -webkit-transition: color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.pg-introduction__marquee span {
  display: block;
}
.pg-introduction__marquee .js-marquee-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5em;
}
.pg-introduction__marquee .js-marquee-item {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media (max-width: 869px) {
  .pg-introduction__marquee {
    bottom: 10px;
  }
}

.pg-contents {
  position: relative;
  z-index: 2;
  padding-top: clamp(64px, 6.1111111111vw, 88px);
}
.pg-contents.is-entered .pg-anchor-link {
  position: fixed;
  top: 24px;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.pg-contents[class*=is-leav] .pg-anchor-link {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pg-anchor-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.pg-anchor-link__inner {
  --minmax: max(calc(var(--content-min-margin, 24) * 1px), calc(var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw));
  max-width: var(--content-max-width, 100%);
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - var(--minmax) * 2);
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
@media (max-width: 869px) {
  .pg-anchor-link__inner.headroom--unpinned {
    -webkit-transform: translateY(-150%);
            transform: translateY(-150%);
  }
}
.pg-anchor-link__items {
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-inline: 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  gap: 24px;
  border-radius: 20px;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
}
.pg-anchor-link__item {
  position: relative;
  padding: clamp(20px, 1.6666666667vw, 24px) 0;
  color: #000;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(12px, 1.1111111111vw, 16px);
  line-height: 1.2;
}
.pg-anchor-link__item::after {
  content: "";
  --size: 8px;
  --bdw: 2px;
  --clr: var(--clr-sb-green);
  display: block;
  width: var(--size);
  height: var(--size);
  border-top: var(--bdw) solid var(--clr);
  border-right: var(--bdw) solid var(--clr);
  -webkit-transition-property: border-color;
  transition-property: border-color;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transform: translateY(-25%) rotate(135deg);
          transform: translateY(-25%) rotate(135deg);
}
.pg-anchor-link__item a {
  color: currentColor;
  text-decoration: none;
  font-weight: bold;
}
.pg-anchor-link__item a::after {
  content: "";
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
@media (min-width: 869px) {
  .pg-anchor-link__item {
    min-width: 170px;
  }
}

.pg-section {
  position: relative;
}
.pg-section:not(.is-animated) .pg-section__subtitle,
.pg-section:not(.is-animated) .pg-section__title,
.pg-section:not(.is-animated) .pg-section__lead {
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
  opacity: 0;
}
.pg-section#RECIPES .pg-section__container {
  background: #fdfbf3 url("../img/onigiri-recipe@2x.jpg") repeat center center;
}
.pg-section#RECIPES .pg-section__illust {
  -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}
.pg-section#RECIPES .pg-section__illust:not(.is-animated) {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  opacity: 0;
}
.pg-section#RECIPES .pg-section__illust:nth-child(1) {
  width: 12.5vw;
  top: 116px;
  left: 8.2638888889vw;
}
@media (max-width: 869px) {
  .pg-section#RECIPES .pg-section__illust:nth-child(1) {
    display: none;
  }
}
.pg-section#RECIPES .pg-section__illust:nth-child(2) {
  width: 12.5vw;
  top: 116px;
  right: 8.2638888889vw;
}
@media (max-width: 869px) {
  .pg-section#RECIPES .pg-section__illust:nth-child(2) {
    display: none;
  }
}
.pg-section#RECIPES .pg-section__illust:nth-child(3) {
  width: clamp(128px, 15.2777777778vw, 220px);
}
@media (max-width: 869px) {
  .pg-section#RECIPES .pg-section__illust:nth-child(3) {
    left: -19px;
    bottom: -11px;
  }
}
@media (min-width: 869px) {
  .pg-section#RECIPES .pg-section__illust:nth-child(3) {
    left: -70px;
    bottom: 48px;
  }
}
.pg-section#RECIPES .pg-section__illust:nth-child(4) {
  width: clamp(123px, 15.2777777778vw, 220px);
}
@media (max-width: 869px) {
  .pg-section#RECIPES .pg-section__illust:nth-child(4) {
    right: -24px;
    bottom: -7px;
  }
}
@media (min-width: 869px) {
  .pg-section#RECIPES .pg-section__illust:nth-child(4) {
    right: -30px;
    bottom: -20px;
  }
}
.pg-section#RECIPES .pg-section__illust:nth-child(5) {
  width: 56vw;
  top: 32px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
@media (min-width: 869px) {
  .pg-section#RECIPES .pg-section__illust:nth-child(5) {
    display: none;
  }
}
.pg-section#PRODUCTS {
  padding-top: clamp(64px, 8.8888888889vw, 128px);
}
.pg-section#PRODUCTS .pg-section__content {
  margin-top: clamp(24px, 2.2222222222vw, 32px);
}
.pg-section#FEATURE {
  padding-top: clamp(96px, 11.8055555556vw, 170px);
}
.pg-section#FEATURE::before {
  content: "";
  display: block;
  position: absolute;
  aspect-ratio: 1440/90;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  -webkit-mask-image: url("../img/bg-separator@pc@2x.png");
          mask-image: url("../img/bg-separator@pc@2x.png");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: #fff;
  background-image: url("../img/bg-yuzumiso@2x.jpg");
  background-repeat: repeat;
  background-position: center bottom;
  background-size: 50% auto;
  z-index: 2;
}
.pg-section#FEATURE .pg-section__bg img {
  -o-object-position: 67% 65%;
     object-position: 67% 65%;
}
.pg-section#FEATURE .pg-section__header {
  padding-inline: max(var(--content-min-margin, 24) * 1px, var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw);
}
.pg-section#RECOMMEND {
  padding-block: clamp(64px, 6.6666666667vw, 96px);
  background-color: #f8f5e6;
}
.pg-section__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.pg-section__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pg-section__container {
  position: relative;
  overflow: hidden;
  margin-inline: clamp(20px, 2.7777777778vw, 40px);
  padding-block: 128px clamp(80px, 8.8888888889vw, 128px);
  padding-inline: clamp(20px, 5.5555555556vw, 80px);
  border-radius: 30px;
  overflow: hidden;
}
.pg-section__illust {
  position: absolute;
}
.pg-section__header {
  position: relative;
  text-align: center;
  z-index: 2;
}
.pg-section__header > img {
  display: inline-block;
  margin-top: 8px;
}
.pg-section__subtitle {
  font-size: clamp(18px, 1.6666666667vw, 24px);
  font-family: var(--ff-garamond);
  font-weight: 700;
  line-height: 1.2;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.8s;
          transition-duration: 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.pg-section__title {
  font-family: var(--ff-beelzebrush);
  font-size: clamp(38px, 4.4444444444vw, 64px);
  line-height: 1;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.8s;
          transition-duration: 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0.125s;
          transition-delay: 0.125s;
}
.pg-section__title:not(:first-child) {
  margin-top: 16px;
}
.pg-section__title span {
  display: block;
  font-size: clamp(24px, 2.2222222222vw, 32px);
  margin-bottom: 8px;
}
.pg-section__lead {
  text-align: center;
  font-size: clamp(14px, 1.1111111111vw, 16px);
  margin-top: clamp(24px, 2.5vw, 36px);
  max-width: 857px;
  margin-inline: auto;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.8s;
          transition-duration: 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.pg-section__lead img {
  width: clamp(140px, 14.1666666667vw, 204px);
}
.pg-section__content {
  position: relative;
  margin-top: clamp(32px, 4.4444444444vw, 64px);
  z-index: 2;
}

.pg-recipe-movies {
  gap: 20px 64px;
  max-width: 912px;
  margin-inline: auto;
}
@media (max-width: 869px) {
  .pg-recipe-movies {
    display: grid;
  }
}
@media (min-width: 869px) {
  .pg-recipe-movies {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.pg-recipe-movie {
  padding: 24px 32px;
  background: #fff;
  border-radius: 20px;
  width: 100%;
}
.pg-recipe-movie__label {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  border: 1px solid var(--clr-sb-green);
  display: block;
  padding: 4px 16px;
  border-radius: 30px;
  color: var(--clr-sb-green);
  margin-inline: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.pg-recipe-movie__title {
  font-size: clamp(18px, 1.5277777778vw, 22px);
  font-weight: bold;
  text-align: center;
  border-top: 1px solid #d2cfc6;
  border-bottom: 1px solid #d2cfc6;
  line-height: 1.2;
  padding-block: 12px;
  margin-top: 24px;
}
.pg-recipe-movie iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 9/16;
  border-radius: 10px;
  margin-top: 24px;
}
.pg-recipe-movie__footer {
  margin-top: 24px;
}

.pg-share-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
}
.pg-share-link__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
}
.pg-share-link__item {
  position: relative;
  -webkit-transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.pg-share-link__item.is-tooltip-show::before {
  --translateY: translateY(0);
  --opacity: 1;
}
.pg-share-link__item::before {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 20px);
  -webkit-transform: translateX(-50%) var(--translateY, translateY(32px));
          transform: translateX(-50%) var(--translateY, translateY(32px));
  margin: auto;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 10px 20px;
  line-height: 1.5;
  font-size: 16px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.8);
  opacity: var(--opacity, 0);
  color: #fff;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.pg-share-link__item:hover {
  cursor: pointer;
  opacity: 0.7;
}

.pg-product {
  position: relative;
  padding-bottom: clamp(84px, 6.6666666667vw, 96px);
  background: var(--bg-image) repeat center center;
  background-size: 50% auto;
}
.pg-product .pg-product__header,
.pg-product .pg-product__img,
.pg-product .pg-product__lead p,
.pg-product .pg-product-slider {
  -webkit-transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) var(--delay, 0s);
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) var(--delay, 0s);
}
.pg-product:not(.is-animated) .pg-product__header,
.pg-product:not(.is-animated) .pg-product__img,
.pg-product:not(.is-animated) .pg-product__lead p,
.pg-product:not(.is-animated) .pg-product-slider {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
.pg-product[data-type=umeboshi] {
  --product-theme-clr: var(--clr-umeboshi);
  --bg-image: url("../img/bg-umeboshi@2x.jpg");
}
.pg-product[data-type=umeboshi] + * {
  --prev-bg-image: url("../img/bg-umeboshi@2x.jpg");
}
.pg-product[data-type=mentaiko] {
  --product-theme-clr: var(--clr-mentaiko);
  --bg-image: url("../img/bg-mentaiko@2x.jpg");
}
.pg-product[data-type=mentaiko] + * {
  --prev-bg-image: url("../img/bg-mentaiko@2x.jpg");
}
.pg-product[data-type=yuzumiso] {
  --product-theme-clr: var(--clr-yuzumiso);
  --bg-image: url("../img/bg-yuzumiso@2x.jpg");
}
.pg-product[data-type=yuzumiso]::after {
  content: "";
  width: clamp(140px, 22.2222222222vw, 320px);
  height: clamp(140px, 22.2222222222vw, 320px);
  position: absolute;
  left: 0;
  bottom: 0;
  background: transparent url("../img/product-img-03-02@2x.png") center center no-repeat;
  background-size: contain;
  -webkit-transform: translateX(-30%);
          transform: translateX(-30%);
}
.pg-product[data-type=yuzumiso] + * {
  --prev-bg-image: url("../img/bg-yuzumiso@2x.jpg");
}
.pg-product::before {
  content: "";
  display: block;
  position: absolute;
  aspect-ratio: 1440/90;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  -webkit-mask-image: url("../img/bg-separator@pc@2x.png");
          mask-image: url("../img/bg-separator@pc@2x.png");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: #fff;
  background-image: var(--prev-bg-image, none);
  background-repeat: repeat;
  background-position: center bottom;
  background-size: 50% auto;
  z-index: 2;
}
.pg-product__content {
  position: relative;
  padding-top: clamp(78px, 13.8888888889vw, 200px);
  overflow: hidden;
  z-index: 1;
  display: grid;
}
@media (max-width: 869px) {
  .pg-product__content {
    padding-inline: max(var(--content-min-margin, 24) * 1px, var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "HEADER" "IMG" "LEAD" "SLIDER" "BUTTON";
  }
}
@media (min-width: 869px) {
  .pg-product__content {
    padding-left: 8.3333333333vw;
    grid-template-columns: 174px minmax(0, 1fr);
    gap: clamp(56px, 7.3611111111vw, 106px);
  }
}
@media (max-width: 869px) {
  .pg-product__cell {
    display: contents;
  }
}
.pg-product__img {
  grid-area: IMG;
  text-align: center;
}
.pg-product__img img {
  width: clamp(60px, 6.9444444444vw, 100px);
  -webkit-filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.15));
          filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.15));
}
@media (max-width: 869px) {
  .pg-product__img {
    margin-top: 32px;
    --delay: 0.125s;
  }
}
.pg-product__header {
  grid-area: HEADER;
}
@media (max-width: 869px) {
  .pg-product__header {
    text-align: center;
  }
}
.pg-product__title {
  font-family: var(--ff-beelzebrush);
  font-size: clamp(32px, 3.3333333333vw, 48px);
  line-height: 1;
}
.pg-product__subtitle {
  font-size: clamp(18px, 1.3888888889vw, 20px);
  font-family: var(--ff-garamond);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--product-theme-clr);
  line-height: 1;
  margin-top: 12px;
}
.pg-product__lead {
  grid-area: LEAD;
  font-size: clamp(14px, 1.1111111111vw, 16px);
  line-height: 1.7;
  margin-top: clamp(32px, 2.7777777778vw, 40px);
}
@media (max-width: 869px) {
  .pg-product__lead {
    position: relative;
    padding-right: 25.641025641vw;
    --delay: 0.25s;
  }
}
@media (min-width: 869px) {
  .pg-product__lead {
    padding-right: 33.3333333333vw;
  }
}
.pg-product__lead img {
  position: absolute;
  width: clamp(200px, 35.4166666667vw, 510px);
}
@media (max-width: 869px) {
  .pg-product__lead img {
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
}
@media (min-width: 869px) {
  .pg-product__lead img {
    top: 0;
    right: 0;
    -webkit-transform: translateX(78px) translateY(-25px);
            transform: translateX(78px) translateY(-25px);
  }
}
.pg-product .pg-button {
  grid-area: BUTTON;
  margin-top: clamp(32px, 3.3333333333vw, 48px);
}
@media (max-width: 869px) {
  .pg-product .pg-button {
    max-width: 180px;
    margin-inline: auto;
  }
}

.pg-product-slider {
  grid-area: SLIDER;
  margin-top: clamp(40px, 5.5555555556vw, 80px);
}
@media (max-width: 869px) {
  .pg-product-slider {
    margin-inline: min(var(--content-min-margin, 24) * -1px, var(--content-base-margin, 40) / var(--content-base-width, 1440) * -100vw);
    padding-left: max(var(--content-min-margin, 24) * 1px, var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw);
    --delay: 0.375s;
  }
}
.pg-product-slider .swiper-slide {
  position: relative;
}
.pg-product-slider .swiper-slide a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
@media (min-width: 869px) {
  .pg-product-slider .swiper-slide:hover img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .pg-product-slider .swiper-slide:hover .pg-product-slider__text {
    color: var(--clr-sb-green);
  }
}
.pg-product-slider .swiper-controller {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.pg-product-slider .swiper-controller .swiper-button {
  position: relative;
  width: 44px;
  height: 44px;
  background-color: var(--product-theme-clr);
  border-radius: 50%;
  inset: unset;
  margin: unset;
  -webkit-transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.pg-product-slider .swiper-controller .swiper-button::before {
  content: "";
  --size: 9px;
  --bdw: 2px;
  --clr: #fff;
  display: block;
  width: var(--size);
  height: var(--size);
  border-top: var(--bdw) solid var(--clr);
  border-right: var(--bdw) solid var(--clr);
  -webkit-transition-property: border-color;
  transition-property: border-color;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.pg-product-slider .swiper-controller .swiper-button::after {
  display: none;
}
.pg-product-slider .swiper-controller .swiper-button-prev::before {
  -webkit-transform: translateX(25%) rotate(-135deg);
          transform: translateX(25%) rotate(-135deg);
}
.pg-product-slider .swiper-controller .swiper-button-next::before {
  -webkit-transform: translateX(-25%) rotate(45deg);
          transform: translateX(-25%) rotate(45deg);
}
@media (min-width: 869px) {
  .pg-product-slider .swiper-controller .swiper-button:hover {
    opacity: 0.7;
  }
}
.pg-product-slider__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding-right: max(var(--content-min-margin, 24) * 1px, var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw);
}
@media (min-width: 869px) {
  .pg-product-slider__header {
    padding-right: 8.8888888889vw;
  }
}
.pg-product-slider__title {
  font-size: clamp(22px, 1.6666666667vw, 24px);
  font-weight: bold;
}
.pg-product-slider__content {
  margin-top: clamp(24px, 2.2222222222vw, 32px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
@media (min-width: 869px) {
  .pg-product-slider__content {
    grid-template-columns: minmax(0, 560fr) minmax(0, 456fr);
  }
}
.pg-product-slider__main {
  width: 100%;
}
@media (min-width: 869px) {
  .pg-product-slider__main .swiper-slide:not(.swiper-slide-active) img {
    opacity: 0;
    -webkit-transform: scale(0.58981233);
            transform: scale(0.58981233);
    -webkit-transform-origin: top right;
            transform-origin: top right;
  }
}
.pg-product-slider__sub {
  width: 100%;
}
.pg-product-slider__sub .swiper-slide {
  height: auto;
}
.pg-product-slider__img {
  overflow: hidden;
  border-radius: 10px;
}
.pg-product-slider__img img {
  border-radius: 10px;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.pg-product-slider__text {
  font-size: clamp(14px, 1.1111111111vw, 16px);
  margin-top: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
  -webkit-transition: color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  line-height: 1.5;
}
.pg-product-slider__text a,
.pg-product-slider__text button {
  background-color: transparent;
  border: none;
  font-weight: 700;
  color: currentColor;
  text-decoration: none;
  text-align: left;
}
.pg-product-slider__text a::after,
.pg-product-slider__text button::after {
  content: "";
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.pg-product-slider__text:has(a)::before {
  content: "";
  --size: 8px;
  --bdw: 2px;
  --clr: var(--clr-sb-green);
  display: block;
  width: var(--size);
  height: var(--size);
  border-top: var(--bdw) solid var(--clr);
  border-right: var(--bdw) solid var(--clr);
  -webkit-transition-property: border-color;
  transition-property: border-color;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transform: translateX(-25%) rotate(45deg);
          transform: translateX(-25%) rotate(45deg);
}
.pg-product-slider__text:has(button)::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url("../img/icon-search.svg") center center no-repeat;
  background-size: contain;
}

.pg-button {
  --button-bgc: var(--product-theme-clr);
  position: relative;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: 56px;
  padding: 16px 32px;
  border-radius: 30px;
  color: #fff;
  -webkit-transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.pg-button a {
  text-decoration: none;
  color: currentColor;
  font-weight: bold;
}
.pg-button a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
@media (min-width: 869px) {
  .pg-button:hover {
    opacity: 0.7;
  }
}

.pg-feature {
  position: relative;
  padding-bottom: clamp(54px, 11.1111111111vw, 160px);
}
@media (max-width: 869px) {
  .pg-feature {
    margin-inline: max(var(--content-min-margin, 24) * 1px, var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw);
    padding-top: 61.5384615385vw;
  }
}
@media (min-width: 869px) {
  .pg-feature {
    margin-left: 8.3333333333vw;
    width: 34.7222222222vw;
  }
}
.pg-feature:not(:has(.pg-feature__tab[data-index="0"].is-active)) .pg-feature__tab-content[data-index="0"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pg-feature:not(:has(.pg-feature__tab[data-index="1"].is-active)) .pg-feature__tab-content[data-index="1"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pg-feature__img {
  margin-bottom: 24px;
}
.pg-feature__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  gap: 24px;
}
.pg-feature__tab {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 16px;
  border-radius: 10px 10px 0 0;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  color: #000;
}
.pg-feature__tab::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: transparent;
  -webkit-transition: background-color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: background-color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.pg-feature__tab.is-active {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  color: #000;
}
.pg-feature__tab.is-active, .pg-feature__tab:hover {
  cursor: pointer;
}
.pg-feature__tab.is-active::after, .pg-feature__tab:hover::after {
  background-color: #000;
}
.pg-feature__tab-contents {
  margin-top: 2rem;
  font-size: clamp(14px, 1.1111111111vw, 16px);
  display: grid;
  counter-reset: list-counter;
}
.pg-feature__tab-content {
  grid-area: 1/-1;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.pg-feature__tab-content ol {
  list-style: none;
}
.pg-feature__tab-content li {
  position: relative;
  counter-increment: list-counter;
  padding-left: 1.25em;
  line-height: 1.4;
}
.pg-feature__tab-content li::before {
  content: counter(list-counter, decimal) ". ";
  position: absolute;
  left: 0;
}
.pg-feature__tab-content li + li {
  margin-top: 0.5em;
}

.pg-modal-product__title {
  font-size: clamp(18px, 1.5277777778vw, 22px);
  font-weight: bold;
  line-height: 1.2;
}
.pg-modal-product__img {
  margin-top: clamp(16px, 1.6666666667vw, 24px);
}
.pg-modal-product__img img {
  width: 100%;
  border-radius: 10px;
}

.pg-recommend__grid {
  display: grid;
  --minmax: max(calc(var(--content-min-margin, 24) * 1px), calc(var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw));
  max-width: var(--content-max-width, 100%);
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - var(--minmax) * 2);
  gap: clamp(12px, 1.6666666667vw, 24px);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 869px) {
  .pg-recommend__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.pg-recommend__cell {
  background-color: #fff;
  border-radius: 10px;
}
.pg-recommend__item {
  position: relative;
  padding: clamp(16px, 2.2222222222vw, 32px);
}
.pg-recommend__item a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.pg-recommend__item p {
  font-weight: bold;
  text-align: center;
  margin-top: 12px;
  -webkit-transition: color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
@media (min-width: 869px) {
  .pg-recommend__item:hover p {
    color: var(--clr-sb-green);
  }
  .pg-recommend__item:hover .pg-recommend__img img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.pg-recommend__img {
  overflow: hidden;
  width: 100%;
  margin-inline: auto;
}
.pg-recommend__img img {
  width: 100%;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.pg-recommend__footer {
  --minmax: max(calc(var(--content-min-margin, 24) * 1px), calc(var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw));
  max-width: var(--content-max-width, 100%);
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - var(--minmax) * 2);
  margin-top: clamp(32px, 3.3333333333vw, 48px);
}
@media (min-width: 869px) {
  .pg-recommend__footer .pg-button {
    max-width: 200px;
  }
}

.pg-button {
  background-color: var(--button-bgc, var(--clr-sb-green));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  padding: 16px 32px;
  margin-inline: auto;
  width: 100%;
  height: 56px;
  border-radius: 28px;
}
.pg-button a {
  color: currentColor;
  text-decoration: none;
}
@media (min-width: 869px) {
  .pg-button {
    width: 100%;
  }
}

.l-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  display: none;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}
.l-modal .l-modal__container {
  background-color: transparent;
}
.l-modal__container {
  position: relative;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 64px;
  min-height: 100%;
}
.l-modal__container::before, .l-modal__container::after {
  content: "";
}
@media (min-width: 576px) {
  .l-modal__container {
    grid-template-rows: 100px minmax(0, 1fr) 100px;
    --minmax: max(calc(var(--content-min-margin, 24) * 1px), calc(var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw));
    max-width: var(--content-max-width, 800px);
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--minmax) * 2);
  }
}
.l-modal__close {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 1px solid #d2cfc6;
  border-radius: 50%;
  top: clamp(20px, 2.2222222222vw, 32px);
  right: clamp(20px, 2.2222222222vw, 32px);
}
.l-modal__close::before, .l-modal__close::after {
  content: "";
  display: block;
  width: 14px;
  height: 1px;
  background-color: #000;
  position: absolute;
  inset: 0;
  margin: auto;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.l-modal__close::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.l-modal__close::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.l-modal__close:hover {
  opacity: 0.8;
  cursor: pointer;
}
.l-modal__content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  background-color: #fff;
  padding: clamp(20px, 2.2222222222vw, 32px);
  border-radius: 20px;
}/*# sourceMappingURL=index.css.map */