@charset "UTF-8";




.content-wrapper {
  --btn-bg: #ffe6f0;
  --btn: #8f6163;
  color: #1f1918;
  text-align: center;
  font-family:
    "Yu Gothic Pr6N", "Yu Gothic", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "Meiryo",
    sans-serif;
  overflow: hidden;
  --anchor-bg: url('<?php echo $cp_img_uri; ?>');
}

/* レスポンシブ */
@media screen and (max-width: 1330px) {
  main {
    --s-val: 10px;
  }
}
@media screen and (max-width: 780px) {
  main {
    --s-val: 1.45vw;
  }
}
@media screen and (max-width: 540px) {
  main {
    --s-val: 1.5vw;
  }
}

.lp-inner {
  margin: 0 auto;
  overflow: visible;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  vertical-align: bottom;
}

a {
  color: inherit;
}

.js-scroll-fade {
  opacity: 0;            
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease; 
}


.js-scroll-fade.is-visible {
  opacity: 1;            
  transform: translateY(0);  
}


.fv-area {
  background: #e8f0fb;
  position: relative;
}

.hero-fv {
  max-width: 780px;
  width: 100%;
  margin-inline: auto;
}

.fv-text {
  width: 100%;
  position: absolute;
  bottom: -5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  max-width: 780px;
}

.hero-section__detail,
.product-section__detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--s-val) * 20) 0 calc(var(--s-val) * 1);
  gap: 0;
  max-width: 780px;
  margin: 0 auto;
}

.hero-section__detail-group {
  width: 100%;
}

.hero-section__detail-group--product {
  margin-top: calc(var(--s-val) * 2.5);
}

.logo-bg{
  position: relative;
}

.logo-bg::after{
  content: "";
  display: block;
  width: calc(var(--s-val) * 20);
  height: calc(var(--s-val) * 50);
  background: url(../images/bg.webp) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.hero-section__detail-group--price {
  margin-top: calc(var(--s-val) * 3);
}

.section__detail-group--link {
  margin-block: calc(var(--s-val) * 3) calc(var(--s-val) * 4.5);
  width: 55%;
  margin: 0 auto;
}

.campaign-section__detail-group--link {
  margin-block: calc(var(--s-val) * 3) calc(var(--s-val) * 4.5);
  width: 100%;
}

.cta__badge {
  width: 75%;
  margin: calc(var(--s-val) * 3) 0 auto;
}


.cta__brand {
  letter-spacing: 0.15em;
}

.cta__detail {
  padding: calc(var(--s-val) * 2) calc(var(--s-val) * 4.5) 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6%;
}

.cta__img {
  width: 50%;
}

.cta__text {
  display: flex;
  gap: calc(var(--s-val) * 1.5);
  flex-direction: column;
  letter-spacing: 5px;
  width: 50%;
}


.cta__limited{
  width: 28%;
  margin: 0 auto;
}
.hero-section__detail .cta__limited{
  width: 45%;
}

.cta__name {
  font-size: calc(var(--s-val) * 4);
  line-height: 1.2em;
  font-weight: 600;
  letter-spacing: 5px;
}

.cta__taste--flavor {
  font-size: calc(var(--s-val) * 3);
  line-height: 1.5em;
  font-weight: 600;
  letter-spacing: 3px;
}

.cta__img img {
  width: 80%;
}

.cta__price {
  -webkit-margin-before: 0;
  margin-block-start: 0;
  font-size: calc(var(--s-val) * 2.5);
  text-align: center;
  letter-spacing: 0;
  font-family:
  "futura-pt", "Futura", "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.cta__price-main {
  font-size: calc(var(--s-val) * 3.6);
  letter-spacing: 0.07em;
  font-weight: 600;
}

.cta__price-gram {
  display: inline-block;
  font-size: calc(var(--s-val) * 2.8);
  font-weight: 500;
  letter-spacing: 0.07em;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--s-val) * 1);
  font-weight: 600;
  font-size: calc(var(--s-val) * 2.5);
  line-height: 1.6em;
  padding: calc(var(--s-val) * 2) calc(var(--s-val) * 5) calc(var(--s-val) * 2) calc(var(--s-val) * 3);
  border-radius: calc(var(--s-val) * 5.5);
  width: 100%;
  margin: 0 auto;
  text-decoration: none;
  background: var(--btn-bg);
  color: var(--btn);
  position: relative;
  transition-duration: .4s;
  box-shadow: 0px 4px 11px -7px #a6a6a6;
}
.btn:hover{
  transform: scale(1.05);
}

.btn::after {
  content: "";
  display: block;
  width: calc(var(--s-val) * 2);
  height: calc(var(--s-val) * 2);
  background-image: url("../images/btn_arrow.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: 15%; 
  top: 50%;                   
  transform: translateY(-50%);
}

.btn-wrap {
  -webkit-margin-before: calc(var(--s-val) * 1.5);
          margin-block-start: calc(var(--s-val) * 1.5);
}


/* ===== 背景画像設定: START ===== */
.lp-section {
  padding: 0;
  max-width: 780px;
  margin: 0 auto;
}

.hero-section,
.gra-bg,
.product-gra_bg,
.lp-model,
.wave-bg,
.grid-bg_pink,
.campaign-area,
.campaign-set01,
.campaign-present {
  position: relative;
  isolation: isolate;
}

.hero-section::before,
.gra-bg::before,
.product-gra_bg::before,
.lp-model::before,
.wave-bg::before,
.grid-bg_pink::before,
.campaign-area::before,
.campaign-set01::before,
.campaign-present::before {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -2;
  pointer-events: none;
}

.gra-bg {
  max-width: 780px;
  margin: 0 auto;
}

.lp-model {
  max-width: 780px;
  margin: 0 auto;
}

.gra-bg::before{
  background: linear-gradient( to bottom,rgba(255, 255, 255, 1) 0%,rgba(231, 238, 249, 0.6) 30%,rgba(231, 238, 249, 0.6) 100%);
}

.lp-model::before{
  background: #e7eef9;
}

.product-gra_bg::before{
  background: linear-gradient( to bottom, #fff 0%,#e7eef9 60%, #e7eef9 100%);
}


.grid-bg_pink {
  padding: calc(var(--s-val) * 6.5) 0 calc(var(--s-val) * 8);
  display: flex;
  flex-direction: column;
  gap: calc(var(--s-val) * 2);
  max-width: 780px;
  margin: 0 auto;
}

.grid-bg_pink::before {
  background: url(../images/grid-pink_bg.webp) center/cover no-repeat;
}

.wave-bg {
  padding: calc(var(--s-val) * 6.5) 0 calc(var(--s-val) * 8);
  display: flex;
  flex-direction: column;
  gap: calc(var(--s-val) * 3);
  max-width: 780px;
  margin: 0 auto;
}

.wave-bg::before {
  background: url(../images/point03-bg.webp) center/cover no-repeat;
}

/* ===== 背景画像設定: END ===== */



.lp-stack-produce {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  gap: 0;
}

.lp-stack-produce__item.lp-stack-produce__item--protein {
  width: 110%;
  margin-top: calc(var(--s-val) * 4);
  position: relative;
  margin-left: -5%;
}

.product .lp-stack-produce__item--protein{
  width: 110%;
  position: relative;
  margin-left: -5%;
}

.lp-stack-produce__item.lp-stack-produce__item--protein::after{
  content: "";
  display: block;
  width: calc(var(--s-val) * 65);
  height: calc(var(--s-val) * 65);
  aspect-ratio: 1/1;
  background: url(../images/produce_bg.webp) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -10%;
  right: -15%;
  z-index: -1;
}

.lp-stack-produce__item--model{
  margin: calc(var(--s-val) * 4) auto calc(var(--s-val) * 4);
  width: 85%;
}

.lp-stack-produce__item.lp-stack-produce__item--produce-text,
.lp-stack-produce__item.lp-stack-produce__item--handwriting {
  width: 80%;
  margin: calc(var(--s-val) * 1.5) auto calc(var(--s-val) * 1.5);
  position: relative;
}

.lp-stack-produce__item.lp-stack-produce__item--handwriting{
  margin-bottom: calc(var(--s-val) * 4);
}

.lp-stack-produce__item.lp-stack-produce__item--produce-text::after{
  content: "";
  display: block;
  width: calc(var(--s-val) * 30);
  height: calc(var(--s-val) * 30);
  aspect-ratio: 1/1;
  background: url(../images/produce_bg.webp) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -60%;
  left: -30%;
  z-index: -1;
}

.lp-stack-produce__item.lp-stack-produce__item--handwriting::after{
  content: "";
  display: block;
  width: calc(var(--s-val) * 12);
  height: calc(var(--s-val) * 12);
  aspect-ratio: 1/1;
  background: url(../images/produce_bg.webp) no-repeat;
  background-size: contain;
  position: absolute;
  top: 30%;
  right: -15%;
  z-index: -1;
}



.product .cta__text,
.campaign .cta__text{
  margin-top: calc(var(--s-val) * 3);
  align-items: center;
  width: 90%;
  margin: calc(var(--s-val) * 3.5) auto 0;

}

.lp-section.product > img:first-of-type {
  width: 110%;
  margin-left: -5%; 
  display: block;
}

.lp-media {
  display: block;
  margin: 0 auto;
}


.lp-media--full {
  width: 100%;
}

.lp-media--point01{
  width: 100%;
  margin: calc(var(--s-val) * 5) 0;
}

.lp-media--point{
  width: 90%;
}

.lp-media--pink-grid {
  width: 100%;
  margin-top: calc(var(--s-val) * 4.5);
}

.lp-media--point {
  width: 80%;
  padding-left: 1%;
  margin-block: calc(var(--s-val) * 4.5);
}

.lp-product_image {
  width: 100%;
  margin-bottom: calc(var(--s-val) * 15);
}

.product-gra_bg .lp-product_image:nth-child(3){
  margin-bottom: calc(var(--s-val) * 5);
}

.lp-story-text_image{
  width: 100%;
  margin-bottom: calc(var(--s-val) * 15);
}

.animation-image{
  width: 65%;
  position: absolute;
  height: auto;
}

.animation-01 {
  top: -15%;
  right: 0;
  z-index: 1;
  animation: floating-y 3s ease-in-out infinite alternate;
}

.animation-02 {
  bottom: -5%;
  left: -4%;
  z-index: 2;
  animation: floating-y 3s ease-in-out infinite alternate;
  animation-delay: 1s;
}


@keyframes floating-y {
  0% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(3%);
  }
} 

.lp-story_image {
  width: 80%;
  margin: 0 auto calc(var(--s-val) * 15);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  aspect-ratio: 720 / 650;
}

.lp-story_image::before{
  content: "";
  display: block;
  width: calc(var(--s-val) * 30);
  height: calc(var(--s-val) * 30);
  aspect-ratio: 1/1;
  background: url(../images/produce_bg.webp) no-repeat;
  background-size: contain;
  position: absolute;
  top: -25%;
  right: -20%;
  z-index: -1;
}

.lp-product-group::before{
  content: "";
  display: block;
  width: calc(var(--s-val) * 80);
  height: calc(var(--s-val) * 80);
  aspect-ratio: 1/1;
  background: url(../images/animation-bg.webp) no-repeat;
  background-size: contain;
  position: absolute;
  top: -170%;
  left: -65%;
  z-index: -1;
}

.lp-product-group{
  width: 80%;
  margin: 0 auto calc(var(--s-val) * 10);
  position: relative;
}

#product .point01,
#product .point02{
  position: relative;
}

#product .point01::after{
  content: "";
  display: block;
  width: calc(var(--s-val) * 74);
  height: calc(var(--s-val) * 74);
  aspect-ratio: 1/1;
  background: url(../images/point-bg.webp) no-repeat;
  background-size: contain;
  position: absolute;
  top: -5%;
  right: -78%;
  z-index: -1;
  transform: rotate(20deg);
}

#product .point02::after{
  content: "";
  display: block;
  width: calc(var(--s-val) * 70);
  height: calc(var(--s-val) * 70);
  aspect-ratio: 1/1;
  background: url(../images/point-bg.webp) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -35%;
  left: -68%;
  z-index: -1;

}


.lp-brand_image{
  padding-block: calc(var(--s-val) * 9);
}

.lp-media--brand{
  width: 80%;
}

.lp-brand_image,.lp-result{
  width: 100%;
  margin: 0 auto;
  padding-bottom: calc(var(--s-val) * 12);
}

.lp-result{
  position: relative;
  padding: 0;
}

.lp-media--result{
  width: 80%;
}

.lp-result::before{
  content: "";
  display: block;
  width: calc(var(--s-val) * 30);
  height: calc(var(--s-val) * 30);
  aspect-ratio: 1/1;
  background: url(../images/produce_bg.webp) no-repeat;
  background-size: contain;
  position: absolute;
  top: -2%;
  left: -10%;
  z-index: -1;
}

.lp-result::after{
  content: "";
  display: block;
  width: calc(var(--s-val) * 68);
  height: calc(var(--s-val) * 68);
  aspect-ratio: 1/1;
  background: url(../images/produce_bg.webp) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: -35%;
  z-index: -1;
}





/* ===== 開発背景・アンカーリンク: START ===== */
.anchor-link__block{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: calc(var(--s-val) * 1.2);
  margin-top: calc(var(--s-val) * 4.2);
}

.btn--anchor{
  background: #fff2f7;
  overflow: hidden;
  padding: calc(var(--s-val) * 2.5) calc(var(--s-val) * 3.5) calc(var(--s-val) * 2.5) calc(var(--s-val) * 2);
  font-size: calc(var(--s-val) * 3);
  box-shadow: none;
}

.btn--anchor::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 10%;
  width: 35%;
  height: 35%;
  background-image: var(--anchor-bg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.btn--anchor::after{
  background-image: url("../images/anchor-arrow.webp");
  width: calc(var(--s-val) * 3);
  height: calc(var(--s-val) * 3);
}

.anchor-link__block a:nth-of-type(3)::before{
  width: 42%;
  height: 42%;
  bottom: -8%;
}

.anchor-link__block a:nth-of-type(4)::before{
  width: 45%;
  height: 45%;
  bottom: -8%;
  right: -2%;
}
/* ===== 開発背景・アンカーリンク: END ===== */

/* ===== 既存プロテインcta: START ===== */
.product-section__detail{
  padding: calc(var(--s-val) * 5.5) 0;
  text-align: center;
}

.product-name{
  font-size: calc(var(--s-val) * 5.5);
  letter-spacing: 5px;
}

.protein__taste-wrap{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: calc(var(--s-val) * 0.6);
}

.protein__taste-wrap div:last-child{
  grid-column: 1 / -1;
}

.protein__taste-wrap{
  font-size: calc(var(--s-val) * 1.8);
  color: #fff;
  letter-spacing: 3px;
}

.protein__taste-wrap .cta__taste{
  padding: calc(var(--s-val) * 0.5) calc(var(--s-val) * 1.2);
}

.kinako--flavor{
  background-color: #cf9231;
}

.choco--flavor{
  background-color: #683322;
}

.hojicha--flavor{
  background-color: #d25719;
}

.matcha--flavor{
  background-color: #89904f;
}

.cone--flavor{
  background-color: #e8ba32;
  letter-spacing: 0;
}

.related-products .cta__img,
.shop-list .cta__img{
  width: 40%;
}
.related-products .cta__text{
  width: 60%;
}
.shop-list .cta__text{
  width: 70%;
}
.related-products .cta__detail,
.shop-list .cta__detail{
  gap: 0;
}

.related-products .cta__price-main{
  font-weight: 600;
  font-size: calc(var(--s-val) * 2.8);
}

.small-text{
  font-size: calc(var(--s-val) * 1.5);
}
/* ===== 既存プロテインcta: END ===== */

/* ===== 見出しテキスト（共通）: START ===== */
.lp-topic-text{
  width: 60%;
  display: block;
  margin: 0 0 calc(var(--s-val) * 2.5) 0;
}

.movie-wrap{
  width: 90%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}
.movie-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.webcm{
  padding-bottom: calc(var(--s-val) * 8.5);
}
/* ===== 見出しテキスト（共通）: END ===== */

/* ===== Interview: START ===== */
.lp-section--interview-block{
  padding-bottom: calc(var(--s-val) * 20);
}

.topic-text{
  font-size: calc(var(--s-val) * 2.8);
  margin: calc(var(--s-val) * 2) 0;
}

.interview-list{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: calc(var(--s-val) * 6) calc(var(--s-val) * 3);
  width: 80%;
  margin: 0 auto;
}

.modal-btn{
  box-shadow: none;
}

.modal-btn::after{
  content: "";
  display: inline-block;
  width:  calc(var(--s-val) * 1.8);
  height: calc(var(--s-val) * 1.8);
  background: linear-gradient(var(--btn), var(--btn)) center/2px 100% no-repeat,
  linear-gradient(var(--btn), var(--btn)) center/100% 2px no-repeat;
  vertical-align: middle;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(245, 249, 250, 0.75);;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.modal-overlay.is-open {
  display: flex;
}

.modal-content {
  position: relative;
  width: min(90vw, 500px);
  max-height: 90dvh;
  padding: calc(var(--s-val) * 3);
  overflow: visible; 
}

.modal-content img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 90dvh;
  object-fit: contain;
}

.modal-close {
  position: absolute;
  top: -3%;
  right: 0;
  width:  calc(var(--s-val) * 6.5);
  height:  calc(var(--s-val) * 6.5);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
}

.modal-close img {
  width: 100%;
  height: 100%;
}



/* ===== Interview: END ===== */

/* ===== Campaign: START ===== */
.campaign-area::before {
  background: #e3bfd0;
}

.campaign-set01::before{
  background: #ffe6f0;
}

.campaign-set01{
  padding-bottom: calc(var(--s-val) * 7);
}

.campaign-present::before{
  background: #ffeef5;
}

.campaign-set02{
  background: #fff;
}

.campaign-image {
  max-width: 780px;
  width: 100%;
  margin-inline: auto;
  position: relative;
}
.campaign-text {
  position: absolute;
  top: -9%;
  left: 0; /* .campaign-imageの左端基準 */
  transform: none;
  max-width: 780px;
  width: 70%;
}
.set-name{
  padding: calc(var(--s-val) * 5) 0;
}

.campaign-badge{
  width: 28%;
  margin: 0 auto;
}

.campaign-inner,
.mugcup-detail,
.kinako-detail {
  max-width: 650px;
  width: 85%;
}

.campaign-inner{
  margin: 0 0 calc(var(--s-val) * 7) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 40px 0 0 0; /* 左下だけ丸い */
  background: #fff;
  padding: calc(var(--s-val) * 6.4) calc(var(--s-val) * 4);
}

.campaign-inner .cta__text{
  margin-top: calc(var(--s-val) * 3.5);
}

.campaign-inner .cta__limited{
  width: 40%;
}
.mugcup-detail{
  margin-left: 0;
  margin-right: auto;
}

.set-kinako{
  border-radius: 0 40px 0 0;
  background: #ffeef7;
  margin: 0 auto calc(var(--s-val) * 7) 0;
}

.kinako-detail{
  margin: 0 0 calc(var(--s-val) * 12) auto;
}

.more{
  position: absolute;
  left: 50%;
  top: -5%;
  max-width: calc(var(--s-val) * 15);
  transform: translateX(-50%);
}

.present-wrapper{
  padding-top: calc(var(--s-val) * 7);
}

.present-limited{
  width: 80%;
  margin: 0 auto;
  padding-bottom: calc(var(--s-val) * 7);
}

.campaign-btn{
  background: #ffabcc;
  color: #fff;
}           

.campaign-btn::after{
  background-image: url(../images/white-arrow.webp);
}

/* ===== Campaign: END ===== */

/* ===== Shop: START ===== */
.shop-image {
  max-width: 780px;
  width: 100%;
  margin-inline: auto;
  position: relative;
  background: #fff;
  padding-top: calc(var(--s-val) * 15);
}

.shop-text{
  width: 30%;
  position: absolute;
  top: 10%;
  left: 0; 
  transform: none;
  max-width: 780px;
  width: 40%;
}

.lp-section--absorption-block .shop-list:nth-child(2){
  margin-bottom: calc(var(--s-val) * 5);
}

.shop-tabs__wrapper{
  width: 90%;
  margin: 0 auto;
}

.shop-tabs {
  display: flex;
  list-style: none;
  cursor: pointer;
  gap: var(--s-val);
}

.shop-tabs__item{
  background: #ffabcc;
  color: #fff;
  font-size: calc(var(--s-val) * 3);
  padding: calc(var(--s-val) * 1.5) calc(var(--s-val) * 2);
  flex: 1;
  border-radius: calc(var(--s-val) * 1.2) calc(var(--s-val) * 1.2) 0 0;
}

.shop-tabs__item--active {
  background: #fff;
  color: #ffabcc;
}

.shop-tab-panel { display: none; }
.shop-tab-panel--active { display: block; }

.shop-grid {
  display: grid;
  
  grid-template-columns: repeat(2, 1fr);
  
  gap: 12px;
  
  background: #fff;
  
  padding: calc(var(--s-val) * 2.5);
}

.shop-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #ffabcc;
  padding: calc(var(--s-val) * 1.4) calc(var(--s-val) * 1.6);
  font-size: calc(var(--s-val) * 2.5);
  color: #ffabcc;
  box-sizing: border-box;
  min-height: 72px; 
  word-break: keep-all;
}

.shop-grid__note {
  border: none;
  font-size: calc(var(--s-val) * 2);
}

.cta__product-name{
  font-size: calc(var(--s-val) * 2.4);
  font-weight: 600;
}
/* ===== Shop: END ===== */

/* ===== Tasting: START ===== */

.tasting-image{
  padding-top: calc(var(--s-val) * 6);
}

.lp-tasting{
  width: 80%;
  margin: 0 auto;
}

.tasting-heading{
  margin: calc(var(--s-val) * 6) 0;
}

.lp-media-head{
  width: 70%;
}

.lp-media-text{
  width: 85%;
}

.lp-tasting .section__detail-group--link{
  width: 90%;
}

/* ===== Tasting: END ===== */

/* ===== Mobile: START ===== */
@media screen and (max-width: 780px) {
  .content-wrapper {
    padding-bottom: calc(var(--s-val) * 1.8);
  }

  .cta__badge {
    font-size: calc(var(--s-val) * 1.4);
  }

  .hero-section__detail {
    padding: calc(var(--s-val) * 9) 0 0;
    gap: calc(var(--s-val) * 0.8);
  }

  .hero-section__badge img{
    width: 80%;
  }

  .cta__name {
    font-size: calc(var(--s-val) * 3.2);
  }

  .cta__taste--flavor{
    font-size: calc(var(--s-val) * 2.5);
  }

  .cta__price-main {
    font-size: calc(var(--s-val) * 3.2);
  }

  .cta__price {
    font-size: calc(var(--s-val) * 2);
  }

  .cta__price-gram {
    font-size: calc(var(--s-val) * 2.5);
  }

  .hero-section__detail-group--product {
    margin-top: calc(var(--s-val) * 3);
  }

  .hero-section__detail-group--price {
    margin-top: calc(var(--s-val) * 2);
  }

  .hero-section__detail-group--points {
    margin-top: calc(var(--s-val) * 2);
  }

  .section__detail-group--link{
  margin-block: calc(var(--s-val) * 2) calc(var(--s-val) * 2.5);
  width: 70%;
  }

  .cta__detail {
    padding: 0 calc(var(--s-val) * 6) 0;
    gap: 6%;
  }

  .cta__img img {
    width: 90%;
  }

  .cta__text {
    white-space: nowrap;
    letter-spacing: 0;
  }

  .btn{
    padding: calc(var(--s-val) * 2) calc(var(--s-val) * 5) calc(var(--s-val) * 2) calc(var(--s-val) * 3);
  }

  .lp-product-group::before{
    top: -170%;
    left: -75%;
    z-index: -1;
  }

  .btn--anchor {
    font-size: calc(var(--s-val) * 2.8);
  }

  .lp-result::after{
    width: calc(var(--s-val) * 60);
    height: calc(var(--s-val) * 60);
  }

  .related-products .cta__text{
    width: 70%;
  }

  .small-text {
    font-size: calc(var(--s-val) * 2);
  }

  .lp-section--interview-block{
    padding-bottom: calc(var(--s-val) * 15);
  }

  .topic-text{
    font-size: calc(var(--s-val) * 2.5);
    margin: calc(var(--s-val) * 1.5) 0;
  }

  .lp-section--absorption-block {
    padding: calc(var(--s-val) * 4) 0 calc(var(--s-val) * 2.5);
  }

  .tasting-image {
    padding-top: calc(var(--s-val) * 4);
  } 

  .tasting-heading{
    margin: calc(var(--s-val) * 4.5) 0;
  }

  .grid-bg {
    padding: 8% 0;
  }

  .lp-stack-produce {
    gap: 0;
  }

  .lp-stack-produce__item--corn-field {
    margin-top: calc(var(--s-val) * 4);
  }

  .lp-stack-produce__item.lp-stack-produce__item--produce-text {
    margin: calc(var(--s-val) * 2.5) auto calc(var(--s-val) * 2);
  }

  .lp-media--wide {
    width: 100%;
  }

  .lp-media--pink-grid {
    width: 90%;
  }

  .lp-media--point {
    width: 90%;
  }

  .grid-bg_pink {
    padding: calc(var(--s-val) * 4) 0;
  }

  .modal-close {
    top: -6%;
    width:  calc(var(--s-val) * 9);
    height:  calc(var(--s-val) * 9);
    z-index: 10;
  }

  #product .point01::after{
    top: -10%;
    right: -90%;
  }

  .animation-02{
    left: 0;
  }

  .lp-story_image{
    margin: 0 auto calc(var(--s-val) * 11);
  }

}
/* ===== Mobile: END ===== */