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

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

.main {
  background-color: #FFEBE6;
  font-family: maru-maru-gothic-blr-stdn, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.bg-wrap {
  position: relative;
  padding-bottom: min(20.9722222222vw, 302px);
  background-color: #FFEBE6;
}
.bg-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/bg-pc.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .bg-wrap::before {
    background-image: url(../img/bg-sp.jpg);
  }
}

.fade-in {
  opacity: 0;
}
.fade-in.is-visible {
  -webkit-animation: fadeIn 0.4s ease-in forwards;
          animation: fadeIn 0.4s ease-in forwards;
}
.fade-in--delay-1.is-visible {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
.fade-in--delay-2.is-visible {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.fade-in--delay-3.is-visible {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}
.fade-in--delay-4.is-visible {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.fade-in--delay-5.is-visible {
  -webkit-animation-delay: 1.25s;
          animation-delay: 1.25s;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  .renewal__suika.fade-in.fade-in--delay-2.is-visible {
    -webkit-animation-delay: 0.25s;
            animation-delay: 0.25s;
  }
}

.lead {
  padding-top: min(4.375vw, 63px);
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .lead {
    padding-top: min(5.4861111111vw, 79px);
  }
}
.lead > p {
  text-align: center;
  color: #369EB5;
  font-size: clamp(20px, 2.3611111111vw, 24px);
  letter-spacing: 0;
  line-height: 48px;
}
@media screen and (max-width: 767px) {
  .lead > p {
    font-size: clamp(15px, 3.9787798408vw, 24px);
    line-height: 1.6666666667;
  }
  .lead > p .punct {
    margin-right: -0.8em;
  }
}
.lead img {
  max-width: 700px;
  width: 100%;
  margin: 45px auto 0;
  display: block;
}
@media screen and (max-width: 767px) {
  .lead img {
    max-width: 620px;
    width: 89%;
  }
}

.renewal {
  max-width: 1083px;
  margin: clamp(140px, 11.9444444444vw, 172px) auto 0;
  position: relative;
}
@media screen and (max-width: 767px) {
  .renewal {
    margin: 21.2201591512vw auto 0;
  }
}
.renewal__title {
  margin: 0 auto;
  width: 370px;
  width: clamp(350px, 25.6944444444vw, 370px);
}
@media screen and (max-width: 767px) {
  .renewal__title {
    max-width: 450px;
    width: 73.4666666667%;
  }
}
.renewal__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(20px, 5.7638888889vw, 83px);
  margin: 60px auto 0;
}
@media screen and (max-width: 767px) {
  .renewal__wrap {
    -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;
    margin-top: 6.6312997347vw;
  }
}
.renewal__kakigori {
  width: clamp(308px, 25.5555555556vw, 368px);
}
@media screen and (max-width: 767px) {
  .renewal__kakigori {
    max-width: 410px;
    width: 67.8666666667%;
  }
}
.renewal__suika {
  width: clamp(308px, 25.5555555556vw, 368px);
}
@media screen and (max-width: 767px) {
  .renewal__suika {
    max-width: 410px;
    width: 67.8666666667%;
  }
}
.renewal__text {
  width: clamp(420px, 33.1944444444vw, 478px);
  margin: 60px auto 0;
}
@media screen and (max-width: 767px) {
  .renewal__text {
    max-width: 420px;
    width: 77.7333333333%;
    margin-top: 5.8666666667%;
  }
}

.voice {
  padding: clamp(200px, 18.0555555556vw, 260px) 40px 0;
}
@media screen and (max-width: 767px) {
  .voice {
    padding: 56.7639257294vw 20px 0;
  }
}
.voice__contents {
  max-width: 870px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.7);
}
@media screen and (max-width: 767px) {
  .voice__contents {
    max-width: 620px;
    width: 82.2281167109vw;
    border-radius: 20px;
  }
}
.voice__title {
  position: absolute;
  right: 11.4942528736%;
  width: 26.4166666667%;
  top: max(-18.5416666667vw, -161.3125px);
}
@media screen and (max-width: 767px) {
  .voice__title {
    max-width: 262.0533333333px;
    width: 51.1290322581%;
    right: 11.7741935484%;
    top: max(-34.7480106101vw, -216.5866666667px);
  }
}
.voice__image {
  position: absolute;
  top: 50%;
  width: 295px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 1023px) {
  .voice__image {
    width: 29vw;
  }
}
@media screen and (max-width: 767px) {
  .voice__image {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 53.5809018568vw;
    top: 43.1292517007%;
  }
}
@media screen and (max-width: 440px) {
  .voice__image {
    top: 42%;
  }
}
.voice__item {
  padding: 83px 60px 40px;
}
@media screen and (max-width: 767px) {
  .voice__item {
    padding: 22.1485411141vw 20px 60px;
  }
}

.feature {
  padding: clamp(260px, 27.7777777778vw, 400px) 40px 0;
}
@media screen and (max-width: 767px) {
  .feature {
    padding-top: 59.0185676393vw;
  }
}
.feature__contents {
  max-width: 870px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50px;
}
@media screen and (max-width: 767px) {
  .feature__contents {
    max-width: 620px;
    width: 82.2281167109vw;
    border-radius: 20px;
  }
}
.feature__title {
  position: absolute;
  left: 50px;
  width: 31.0344827586%;
  width: 31%;
  top: max(-14.9305555556vw, -155.875px);
}
@media screen and (max-width: 767px) {
  .feature__title {
    max-width: 307.52px;
    width: 60%;
    left: 12.2580645161%;
    top: max(-29.3103448276vw, -182.6933333333px);
  }
}
.feature__item {
  max-width: 706.15px;
  width: 100%;
  padding: 60px 50px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .feature__item {
    padding: 28.3819628647vw 20px 70px;
    max-width: 476.16px;
    width: 92.9032258065%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

.products {
  position: relative;
  max-width: 870px;
  margin: min(29.5833333333vw, 355px) auto 0;
  width: 83.3333333333vw;
  background-color: rgba(255, 255, 255, 0.7);
  padding-bottom: min(9.3055555556vw, 80.9583333333px);
  border-radius: 50px;
}
@media screen and (max-width: 767px) {
  .products {
    margin: 43.2360742706vw auto 0;
    max-width: 620px;
    width: 82.2281167109vw;
    border-radius: 20px;
  }
}
.products__title {
  position: absolute;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
  right: 50%;
  max-width: 259.55px;
  width: 29.8333333333%;
  top: max(-20vw, -208.8px);
}
@media screen and (max-width: 767px) {
  .products__title {
    max-width: 295.9466666667px;
    width: 57.7419354839%;
    top: max(-30.9018567639vw, -192.6133333333px);
  }
}
.products__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 82.1666666667%;
  max-width: 714.85px;
  margin: 0 auto;
  gap: 60px;
}
.products__contents.kakigori {
  padding-top: min(12.7083333333vw, 132.675px);
}
@media screen and (max-width: 767px) {
  .products__contents.kakigori {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding-top: min(38.9920424403vw, 243.04px);
  }
}
.products__contents.suika {
  padding-top: min(8.9583333333vw, 93.525px);
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
  .products__contents.suika {
    padding-top: min(12.7320954907vw, 79.36px);
  }
}
.products__image {
  max-width: 334.95px;
  margin: 0 auto;
}
.products__desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: min(2.5vw, 26.1px);
}
.products__desc > picture img {
  max-width: 181.975px;
  margin: 0 auto;
  display: block;
}
.products__desc > p {
  font-size: clamp(16px, 2.0833333333vw, 20px);
  letter-spacing: 0;
  line-height: 1.6666666667;
}
.products__desc a {
  text-decoration: underline;
  text-underline-offset: 8px;
  font-size: clamp(16px, 1.8055555556vw, 19px);
  letter-spacing: 0;
  line-height: 1.9230769231;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.products__desc a.kakigori {
  color: #007FC6;
}
.products__desc a.suika {
  color: #379D49;
}/*# sourceMappingURL=style.css.map */