@charset "utf-8";
.sp-only {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }
}

.pc-only {
  display: block;
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
}

.mv__inner {
  max-width: 1200px;
  margin: auto;
  position: relative;
}

.mv__top {
  background-color: #FFDD00;
  background-image: url(../images/index-bg-mv.svg);
  background-size: cover;
  background-position: center;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .mv__top {
    background-image: url(../images/index-bg-mv-sp.png);
    height: 152vw;
  }
}

.mv__top .mv__inner {
  width: 100%;
  max-width: 1500px;
  padding-bottom: clamp(10px, 43.08%, 648.64px);
}

@media screen and (max-width: 767px) {
  .mv__top .mv__inner {
    height: 152vw;
  }
}

.mv #spiliq-web-mv-txt-sub {
  -webkit-animation: swingBalloon .7s ease-in-out alternate infinite;
          animation: swingBalloon .7s ease-in-out alternate infinite;
  -webkit-transform-origin: 80% 25%;
          transform-origin: 80% 25%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

@-webkit-keyframes swingBalloon {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(7deg);
            transform: rotate(7deg);
  }
}

@keyframes swingBalloon {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(7deg);
            transform: rotate(7deg);
  }
}

.mv #spiliq-web-mv-icon-txt {
  opacity: 0;
  -webkit-transition: opacity .3s 1s;
  transition: opacity .3s 1s;
  -webkit-animation: swingIcon .2s 1s ease-in-out alternate 4;
          animation: swingIcon .2s 1s ease-in-out alternate 4;
  -webkit-transform-origin: 70% 95%;
          transform-origin: 70% 95%;
}

.mv.scrolled #spiliq-web-mv-icon-txt {
  opacity: 1;
}

@-webkit-keyframes swingIcon {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-7deg);
            transform: rotate(-7deg);
  }
}

@keyframes swingIcon {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-7deg);
            transform: rotate(-7deg);
  }
}

.mv__top-info {
  width: 38.9%;
  height: 74.5%;
  position: absolute;
  top: 15.1%;
  right: 0;
  z-index: 3;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .mv__top-info {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    width: 100%;
  }
}

.mv__top-info svg {
  width: 100%;
  height: auto;
  display: block;
}

.mv__ttl {
  width: 84%;
}

@media screen and (max-width: 767px) {
  .mv__ttl {
    width: 82%;
    margin-left: 18%;
    padding-top: 10vw;
  }
  .mv__ttl svg {
    height: 54vw;
  }
}

.mv__txt {
  width: 78.7%;
  padding-left: 16.1%;
}

@media screen and (max-width: 767px) {
  .mv__txt {
    width: 66%;
    margin-left: 29%;
    padding-left: 0;
    margin-top: 2vw;
  }
}

.mv__top-imgs {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .mv__top-imgs {
    top: auto;
    bottom: 0;
    width: 100%;
  }
}

.mv__img01 {
  position: absolute;
  top: 7.2%;
  left: 5.1%;
  z-index: 1;
  width: 33.8%;
  height: 86.8%;
  opacity: 0;
  -webkit-transform: translateX(30%);
          transform: translateX(30%);
  -webkit-transition: opacity 0.9s ease-out .4s, -webkit-transform .9s ease-out .4s;
  transition: opacity 0.9s ease-out .4s, -webkit-transform .9s ease-out .4s;
  transition: opacity 0.9s ease-out .4s, transform .9s ease-out .4s;
  transition: opacity 0.9s ease-out .4s, transform .9s ease-out .4s, -webkit-transform .9s ease-out .4s;
}

@media screen and (max-width: 767px) {
  .mv__img01 {
    left: 3%;
    width: 50%;
    height: 91%;
  }
}

.scrolled .mv__img01 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
}

.mv__img01 img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

@media screen and (max-width: 767px) {
  .mv__img01 img {
    -o-object-position: center bottom;
       object-position: center bottom;
  }
}

.mv__img02 {
  position: absolute;
  z-index: 2;
  width: 35.8%;
  height: 100%;
  bottom: 0;
  right: 37%;
  opacity: 0;
  -webkit-transform: translateX(-60%);
          transform: translateX(-60%);
  -webkit-transition: opacity 0.9s ease-out .1s, -webkit-transform .9s ease-out .1s;
  transition: opacity 0.9s ease-out .1s, -webkit-transform .9s ease-out .1s;
  transition: opacity 0.9s ease-out .1s, transform .9s ease-out .1s;
  transition: opacity 0.9s ease-out .1s, transform .9s ease-out .1s, -webkit-transform .9s ease-out .1s;
}

@media screen and (max-width: 767px) {
  .mv__img02 {
    right: 1%;
    width: 59%;
    bottom: -2%;
  }
}

.scrolled .mv__img02 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
}

.mv__img02 img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.mv__img02--soft-light {
  mix-blend-mode: soft-light;
}

.mv__img02--over-ray {
  mix-blend-mode: overlay;
}

.mv__img02--multiply {
  mix-blend-mode: multiply;
}

.mv__bottom {
  padding: clamp(10px, 2vw, 30px) 8% clamp(10px, 1vw, 20px);
  position: relative;
  z-index: 5;
}

@media screen and (max-width: 767px) {
  .mv__bottom {
    height: auto;
    padding-bottom: 3vw;
  }
}

.mv__bottom .mv__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

@media screen and (max-width: 767px) {
  .mv__bottom .mv__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

.mv__catch {
  width: 37.43%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media screen and (max-width: 767px) {
  .mv__catch {
    width: 100%;
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .mv__subttl {
    padding: 0 5%;
    margin-top: 3vw;
  }
}

.mv__subttl img {
  width: 82%;
}

@media screen and (max-width: 767px) {
  .mv__subttl img {
    width: 100%;
  }
}

.mv__note {
  padding-left: 20%;
  display: block;
}

.mv__note img {
  display: block;
}

@media screen and (max-width: 767px) {
  .mv__note {
    padding: 20px 5% 0;
  }
  .mv__note img {
    width: 100%;
  }
}

.mv__products {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 62.57%;
}

@media screen and (max-width: 767px) {
  .mv__products {
    width: 116%;
    gap: 5vw;
    padding-left: 12%;
    margin: -5vw -10% 0;
  }
}

.mv__product {
  width: 25%;
  height: clamp(10px, 10vw, 140px);
  position: relative;
  opacity: 0;
  -webkit-transform: translateY(20%);
          transform: translateY(20%);
  -webkit-transition: opacity 0.9s ease-out, -webkit-transform .9s ease-out;
  transition: opacity 0.9s ease-out, -webkit-transform .9s ease-out;
  transition: opacity 0.9s ease-out, transform .9s ease-out;
  transition: opacity 0.9s ease-out, transform .9s ease-out, -webkit-transform .9s ease-out;
}

@media screen and (max-width: 767px) {
  .mv__product {
    height: auto;
  }
}

.mv__product img {
  display: block;
  position: absolute;
  width: 95%;
  bottom: 0%;
  left: 0;
}

@media screen and (max-width: 767px) {
  .mv__product img {
    position: static;
    width: 100%;
  }
}

.scrolled .mv__product {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.mv__product:nth-of-type(1) {
  -webkit-transition-delay: .8s;
          transition-delay: .8s;
}

.mv__product:nth-of-type(2) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

.mv__product:nth-of-type(3) {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

.mv__product:nth-of-type(4) {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}

.rules {
  padding: 0 8%;
  background-color: #EFEFEF;
  padding-top: clamp(40px, 8vw, 85px);
  padding-bottom: clamp(50px, 10vw, 100px);
}

@media screen and (max-width: 767px) {
  .rules {
    padding: 14vw 5% 10vw;
  }
}

.rules__ttl {
  width: 90%;
  margin: auto;
}

@media screen and (max-width: 767px) {
  .rules__ttl {
    width: 80%;
  }
}

.rules__ttl img {
  width: 100%;
}

.rules__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: clamp(30px, 7vw, 75px);
  gap: 2%;
  margin-right: 1%;
}

@media screen and (max-width: 767px) {
  .rules__list {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 14vw 2%;
    padding-left: 0%;
    position: relative;
    margin-right: 1%;
  }
  .rules__list::before {
    content: "";
    display: block;
    width: 99%;
    height: 1px;
    position: absolute;
    bottom: 70.6vw;
    left: 0.5%;
    background-color: #3D3939;
    opacity: .25;
  }
}

.rules__list.scrolled .rules__item {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
  opacity: 1;
}

.rules__item {
  width: 25%;
  opacity: 0;
  -webkit-transform: rotateY(30deg);
          transform: rotateY(30deg);
  -webkit-transition: opacity 0.9s ease-out .1s, -webkit-transform .9s ease-out .1s;
  transition: opacity 0.9s ease-out .1s, -webkit-transform .9s ease-out .1s;
  transition: opacity 0.9s ease-out .1s, transform .9s ease-out .1s;
  transition: opacity 0.9s ease-out .1s, transform .9s ease-out .1s, -webkit-transform .9s ease-out .1s;
}

.rules__item:nth-of-type(1) {
  -webkit-transition-delay: .1s;
          transition-delay: .1s;
}

.rules__item:nth-of-type(2) {
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}

.rules__item:nth-of-type(3) {
  -webkit-transition-delay: .5s;
          transition-delay: .5s;
}

.rules__item:nth-of-type(4) {
  -webkit-transition-delay: .7s;
          transition-delay: .7s;
}

@media screen and (max-width: 767px) {
  .rules__item {
    width: 49%;
  }
}

.rules__item img {
  width: 100%;
}

.howto {
  background-color: #FFDD00;
  padding-top: clamp(40px, 8vw, 85px);
  padding-bottom: clamp(40px, 8vw, 85px);
}

@media screen and (max-width: 767px) {
  .howto {
    padding-top: 14vw;
    padding-bottom: 10vw;
  }
}

.howto__inner {
  padding: 0 8%;
}

@media screen and (max-width: 767px) {
  .howto__inner {
    padding: 0 5%;
  }
}

.howto__ttl {
  width: 90%;
  margin: auto;
}

@media screen and (max-width: 767px) {
  .howto__ttl {
    width: 80%;
  }
}

.howto__ttl img {
  width: 100%;
}

.howto__dsc {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  max-width: 65%;
  margin-top: clamp(30px, 6vw, 65px);
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

@media screen and (max-width: 767px) {
  .howto__dsc {
    display: block;
    width: 80%;
    margin-top: 18vw;
  }
}

.howto__txt {
  width: 60%;
}

@media screen and (max-width: 767px) {
  .howto__txt {
    width: 100%;
  }
}

.howto__txt picture {
  display: block;
  width: 115%;
}

@media screen and (max-width: 767px) {
  .howto__txt picture {
    width: 100%;
  }
}

.howto__txt img {
  width: 100%;
  margin-bottom: clamp(5px, 1vw, 15px);
}

.howto__img {
  width: 40%;
}

@media screen and (max-width: 767px) {
  .howto__img {
    width: 100%;
    margin-top: 3vw;
  }
}

.howto__img img {
  width: 100%;
}

.howto__list {
  padding: clamp(25px, 5vw, 55px) 5% 0;
}

.howto__list ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 3%;
}

@media screen and (max-width: 767px) {
  .howto__list ul {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 14vw 4%;
    position: relative;
  }
  .howto__list ul::before {
    content: "";
    display: block;
    width: 89%;
    height: 1px;
    position: absolute;
    bottom: 115.6vw;
    left: 4%;
    background-color: #3D3939;
    opacity: .25;
  }
}

.howto__list img {
  width: 100%;
}

.howto__list.scrolled .howto__onmtp {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.howto__list.scrolled .howto__subttl {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
  opacity: 1;
}

.howto__item {
  width: 25%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.howto__item:nth-of-type(1) .howto__subttl,
.howto__item:nth-of-type(1) .howto__onmtp {
  -webkit-transition-delay: .1s;
          transition-delay: .1s;
}

.howto__item:nth-of-type(1) .howto__subttl img,
.howto__item:nth-of-type(1) .howto__onmtp img {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.howto__item:nth-of-type(2) .howto__subttl,
.howto__item:nth-of-type(2) .howto__onmtp {
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}

.howto__item:nth-of-type(2) .howto__subttl img,
.howto__item:nth-of-type(2) .howto__onmtp img {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

.howto__item:nth-of-type(3) .howto__subttl,
.howto__item:nth-of-type(3) .howto__onmtp {
  -webkit-transition-delay: .5s;
          transition-delay: .5s;
}

.howto__item:nth-of-type(3) .howto__subttl img,
.howto__item:nth-of-type(3) .howto__onmtp img {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

.howto__item:nth-of-type(4) .howto__subttl,
.howto__item:nth-of-type(4) .howto__onmtp {
  -webkit-transition-delay: .7s;
          transition-delay: .7s;
}

.howto__item:nth-of-type(4) .howto__subttl img,
.howto__item:nth-of-type(4) .howto__onmtp img {
  -webkit-animation-delay: 4.1s;
          animation-delay: 4.1s;
}

@media screen and (max-width: 767px) {
  .howto__item {
    width: 48%;
  }
}

.howto__onmtp {
  margin-left: -2vw;
  width: 40%;
  -webkit-transform: translateY(60%);
          transform: translateY(60%);
  -webkit-transition: opacity 0.9s ease-out, -webkit-transform .9s ease-out;
  transition: opacity 0.9s ease-out, -webkit-transform .9s ease-out;
  transition: opacity 0.9s ease-out, transform .9s ease-out;
  transition: opacity 0.9s ease-out, transform .9s ease-out, -webkit-transform .9s ease-out;
  opacity: 0;
}

.howto__onmtp img {
  -webkit-animation: emphTxt 5s ease-in infinite;
          animation: emphTxt 5s ease-in infinite;
}

@-webkit-keyframes emphTxt {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  2% {
    -webkit-transform: translateX(10%);
            transform: translateX(10%);
  }
  4% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  6% {
    -webkit-transform: translateX(10%);
            transform: translateX(10%);
  }
  8% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  10% {
    -webkit-transform: translateX(10%);
            transform: translateX(10%);
  }
  12% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@keyframes emphTxt {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  2% {
    -webkit-transform: translateX(10%);
            transform: translateX(10%);
  }
  4% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  6% {
    -webkit-transform: translateX(10%);
            transform: translateX(10%);
  }
  8% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  10% {
    -webkit-transform: translateX(10%);
            transform: translateX(10%);
  }
  12% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

.howto__subttl {
  width: 95%;
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
  padding-top: .5vw;
  -webkit-transform: rotateY(30deg);
          transform: rotateY(30deg);
  -webkit-transition: opacity 0.9s ease-out, -webkit-transform .9s ease-out;
  transition: opacity 0.9s ease-out, -webkit-transform .9s ease-out;
  transition: opacity 0.9s ease-out, transform .9s ease-out;
  transition: opacity 0.9s ease-out, transform .9s ease-out, -webkit-transform .9s ease-out;
  opacity: 0;
}

.howto__ratio {
  width: 100%;
}

.recipe {
  background-color: #EFEFEF;
  padding: clamp(25px, 5vw, 55px) 8% clamp(40px, 8vw, 85px);
  background-image: url(../images/index-bg-recipe.png);
  background-size: 170px auto;
  background-repeat: no-repeat;
  background-position: top right;
}

@media screen and (max-width: 767px) {
  .recipe {
    background-image: url(../images/index-bg-recipe-sp-01.png), url(../images/index-bg-recipe-sp-02.png);
    background-size: 30% auto, 70% auto;
    background-repeat: no-repeat, no-repeat;
    background-position: top right, bottom left;
    padding: 14vw 5% 10vw;
  }
}

.recipe img {
  width: 100%;
}

.recipe__ttl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(12px, 1.5vw, 30px);
  max-width: 70%;
  margin: auto;
}

@media screen and (max-width: 767px) {
  .recipe__ttl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    max-width: 95%;
  }
}

.recipe__ttl--icon {
  width: 35%;
  opacity: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.555, 1.65, 0.495, 0.795);
  transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.555, 1.65, 0.495, 0.795);
  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.555, 1.65, 0.495, 0.795);
  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.555, 1.65, 0.495, 0.795), -webkit-transform 0.5s cubic-bezier(0.555, 1.65, 0.495, 0.795);
}

@media screen and (max-width: 767px) {
  .recipe__ttl--icon {
    width: 60%;
    margin-top: 5vw;
  }
}

.scrolled .recipe__ttl--icon {
  opacity: 1;
  -webkit-transform: rotate(0);
          transform: rotate(0);
}

.recipe__ttl--main {
  width: 65%;
  padding-top: clamp(12px, 1.5vw, 30px);
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
          clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  -webkit-transition: -webkit-clip-path .5s ease-out .4s;
  transition: -webkit-clip-path .5s ease-out .4s;
  transition: clip-path .5s ease-out .4s;
  transition: clip-path .5s ease-out .4s, -webkit-clip-path .5s ease-out .4s;
}

@media screen and (max-width: 767px) {
  .recipe__ttl--main {
    width: 100%;
  }
}

.scrolled .recipe__ttl--main {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.recipe__images {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.recipe__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: clamp(30px, 6vw, 65px);
  position: relative;
  opacity: 0;
  -webkit-transform: translateY(30%);
          transform: translateY(30%);
  -webkit-transition: opacity 0.5s, -webkit-transform .5s;
  transition: opacity 0.5s, -webkit-transform .5s;
  transition: opacity 0.5s, transform .5s;
  transition: opacity 0.5s, transform .5s, -webkit-transform .5s;
}

@media screen and (max-width: 767px) {
  .recipe__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    margin-top: 10vw;
  }
}

.recipe__item.scrolled {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.recipe__item::before {
  content: "";
  display: block;
  width: clamp(30px, 6vw, 75px);
  height: clamp(30px, 6vw, 75px);
  background-image: url(../images/index-icon-auau.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: clamp(-35px, -2.5vw, -10px);
  right: clamp(-40px, -3.5vw, -15px);
}

@media screen and (max-width: 767px) {
  .recipe__item::before {
    width: 15vw;
    height: 15vw;
    top: -6vw;
    right: -1vw;
  }
}

.recipe__item:nth-of-type(2n) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

@media screen and (max-width: 767px) {
  .recipe__item:nth-of-type(2n) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

.recipe__item:nth-of-type(2n)::before {
  right: auto;
  left: clamp(-40px, -3.5vw, -15px);
}

@media screen and (max-width: 767px) {
  .recipe__item:nth-of-type(2n)::before {
    right: -1vw;
    left: auto;
  }
}

.recipe__item:nth-of-type(2n) .recipe__images {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 59.3%;
  background-image: url(../images/index-bg-recipe-section-rev.svg);
  background-position: right top;
}

@media screen and (max-width: 767px) {
  .recipe__item:nth-of-type(2n) .recipe__images {
    background-image: url(../images/index-bg-recipe-section.svg);
    background-position: left top;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    width: 100%;
  }
}

.recipe__dsc {
  width: 40.7%;
  background-color: #ffffff;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(20px, 2vw, 30px);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: clamp(15px, 3vw, 40px);
}

@media screen and (max-width: 767px) {
  .recipe__dsc {
    width: 100%;
    padding: 7vw 5vw;
  }
}

.recipe__subttl {
  opacity: 0;
  -webkit-transform: translateX(10%);
          transform: translateX(10%);
  -webkit-transition: opacity 0.3s ease-out .1s, -webkit-transform .3s ease-out .1s;
  transition: opacity 0.3s ease-out .1s, -webkit-transform .3s ease-out .1s;
  transition: opacity 0.3s ease-out .1s, transform .3s ease-out .1s;
  transition: opacity 0.3s ease-out .1s, transform .3s ease-out .1s, -webkit-transform .3s ease-out .1s;
}

.scrolled .recipe__subttl {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
}

.recipe__txt {
  opacity: 0;
  -webkit-transform: translateX(10%);
          transform: translateX(10%);
  -webkit-transition: opacity 0.3s ease-out .2s, -webkit-transform .3s ease-out .2s;
  transition: opacity 0.3s ease-out .2s, -webkit-transform .3s ease-out .2s;
  transition: opacity 0.3s ease-out .2s, transform .3s ease-out .2s;
  transition: opacity 0.3s ease-out .2s, transform .3s ease-out .2s, -webkit-transform .3s ease-out .2s;
}

.scrolled .recipe__txt {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
}

.recipe__images {
  width: 59.3%;
  background-image: url(../images/index-bg-recipe-section.svg);
  background-size: cover;
  background-position: left top;
}

@media screen and (max-width: 767px) {
  .recipe__images {
    width: 100%;
  }
}

.recipe__food {
  width: 56.64%;
}

@media screen and (max-width: 767px) {
  .recipe__food {
    width: 50%;
  }
}

.recipe__drink {
  width: 43.36%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 767px) {
  .recipe__drink {
    width: 50%;
  }
}

.recipe__drink img {
  width: 63.87%;
}

.links {
  padding: clamp(30px, 8vw, 90px) 15% clamp(30px, 10vw, 105px);
  background-color: #FFDD00;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .links {
    padding: 14vw 5% 15vw;
  }
}

.links img {
  width: 100%;
}

.links .sec__inner {
  max-width: 1000px;
}

.links__ttl {
  width: 70%;
  margin: auto;
}

@media screen and (max-width: 767px) {
  .links__ttl {
    width: 85%;
  }
}

.links__list {
  margin-top: clamp(25px, 5vw, 55px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 5%;
}

@media screen and (max-width: 767px) {
  .links__list {
    margin-top: 9vw;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 8vw 8%;
  }
}

.links__list.scrolled .links__item {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
  opacity: 1;
}

.links__item {
  width: 25%;
  opacity: 0;
  -webkit-transform: rotateY(30deg);
          transform: rotateY(30deg);
  -webkit-transition: opacity 0.9s ease-out .1s, -webkit-transform .9s ease-out .1s;
  transition: opacity 0.9s ease-out .1s, -webkit-transform .9s ease-out .1s;
  transition: opacity 0.9s ease-out .1s, transform .9s ease-out .1s;
  transition: opacity 0.9s ease-out .1s, transform .9s ease-out .1s, -webkit-transform .9s ease-out .1s;
}

@media screen and (max-width: 767px) {
  .links__item {
    width: 46%;
  }
}

.links__item:nth-of-type(1) {
  -webkit-transition-delay: .1s;
          transition-delay: .1s;
}

.links__item:nth-of-type(2) {
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}

.links__item:nth-of-type(3) {
  -webkit-transition-delay: .5s;
          transition-delay: .5s;
}

.links__item:nth-of-type(4) {
  -webkit-transition-delay: .7s;
          transition-delay: .7s;
}

.links__item a {
  display: block;
  border-radius: 10px;
  border: 3px solid rgba(239, 239, 239, 0.63);
  overflow: hidden;
}

.links__item a:hover {
  background-color: #ffffff;
}

.sec__ttl {
  -webkit-clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
          clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  -webkit-transition: -webkit-clip-path .5s ease-out;
  transition: -webkit-clip-path .5s ease-out;
  transition: clip-path .5s ease-out;
  transition: clip-path .5s ease-out, -webkit-clip-path .5s ease-out;
}

.sec__ttl.scrolled {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.sec__inner {
  max-width: 1200px;
  margin: auto;
}

.is-outer-link {
  position: relative;
}

.is-outer-link::before {
  content: "";
  width: 8.87px;
  height: 8px;
  background-image: url(/alcohol/spirits_liqueur/spirits_liqueur_sour/images/icon-outer-link.svg);
  background-size: 8.87px 8px;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 9px;
  right: 9px;
}
/*# sourceMappingURL=style.css.map */