/* Figma 2479:21237, with local section coordinates (status bar excluded). */

.p-hero__slides {
  aspect-ratio: 375 / 539;
}

.p-hero__controls {
  position: relative;
  align-items: flex-start;
  height: 35px;
  margin: 0 25px;
}

.p-hero__bar {
  height: 44px;
  padding: 0;
  margin-top: 10px;
}

.p-intro {
  /* 上の余白と動画の大きさは、下の葉の位置の計算にも使うので変数にする */
  --intro-pad-top: 44px;
  --intro-visual-inset: 25px; /* 動画の右の余白（動画の幅は 100% からこれを引いた幅） */
  --intro-visual-w: 350;      /* 動画の縦横比 */
  --intro-visual-h: 277.1;
  /* 動画の注記の下端（セクションの上端から）。動画の高さは幅で変わるので、画面幅（100cqw）から求める */
  /* 注記1行の高さは .u-note の SP の文字サイズ 0.75rem × 行の高さ 1.57。rem で書くので、文字サイズの設定を大きくしても追従する */
  --intro-note-bottom: calc(var(--intro-pad-top) + (100cqw - var(--intro-visual-inset)) * var(--intro-visual-h) / var(--intro-visual-w) + var(--intro-note-gap) + 0.75rem * 1.57);
  padding-top: var(--intro-pad-top);
}

.p-intro__grid {
  /* 固定幅ボタンで列が広がらないよう最小幅を 0 に（320px 幅で横スクロールを出さない） */
  grid-template-columns: minmax(0, 1fr);
  /* 動画の下の注記と、その下に置く葉2枚（下のずらした位置）の分を空ける。葉の下端から本文まで 10px */
  row-gap: 130px;
}

.p-intro__visual {
  width: calc(100% - var(--intro-visual-inset));
  aspect-ratio: var(--intro-visual-w) / var(--intro-visual-h);
}

/* 動画の注記（※動画はイメージです。）に葉が重なって読めなくならないよう、動画の右下にかかっていた葉2枚を注記の下にずらす */
/* 左の葉は注記の 5px 下、右の葉は元どおり左の葉の 20px 下 */
/* 左の葉の画像は上端に別の葉の切れ端と背景の縁が入っていて（これまでは動画の裏に隠れていた）、ずらすと見えるのでマスクで上端を消す */
/* マスクは左右反転（transform）前の座標。表示上の右寄り（反転前の左 87px。切れ端がある）は上 6〜20px で、左寄り（主の葉の先端が上から 4px）は上 0〜6px でぼかして消す */
.c-foliage__2479-21433 {
  top: calc(var(--intro-note-bottom) + 5px);
  -webkit-mask-image: linear-gradient(transparent 6px, #000 20px), linear-gradient(transparent 0, #000 6px);
  mask-image: linear-gradient(transparent 6px, #000 20px), linear-gradient(transparent 0, #000 6px);
  -webkit-mask-size: 87px 100%, calc(100% - 87px) 100%;
  mask-size: 87px 100%, calc(100% - 87px) 100%;
  -webkit-mask-position: 0 0, 87px 0;
  mask-position: 0 0, 87px 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.c-foliage__2479-21432 {
  top: calc(var(--intro-note-bottom) + 25px);
}

.p-intro__text {
  padding: 0 10px 0 25px;
  font-size: 1rem;
  line-height: 1.6875;
  letter-spacing: 0.03em;
}

.p-intro__text p + p {
  margin-top: 15px;
}

.p-intro__text .p-intro__strong {
  margin-top: 30px !important;
  font-size: 1.25rem;
  line-height: 1.6;
}

.p-intro__text .p-intro__action {
  justify-content: center;
  margin: 50px 15px 0 0;
}

/* 他ボタン同様の固定幅（309×59）で左右中央（Figma：x33、矢印 x295、文字 x56） */
.p-intro__action .c-btn {
  width: 309px;
  max-width: 100%;
  justify-content: space-between;
  gap: 10px;
  padding-right: 11px;
  padding-left: 22px;
}

.p-products {
  padding-top: 82px;
}

.p-products__head .c-sec-head__lead .u-note {
  margin-top: 5px;
  font-size: 0.8125rem;
  line-height: 1.57;
  letter-spacing: -0.05em;
}

.p-products__list {
  margin-top: 30px;
  gap: 60px;
}

.p-product {
  padding: 0 10px;
}

.p-product__card {
  padding-top: 10px;
}

.p-product__visual {
  height: 305px;
}

.p-product__name a {
  display: flex;
  width: 100%;
  min-height: 35px;
  justify-content: center;
  align-items: center;
  padding-right: 0;
  gap: 15px;
}

.p-product__name img {
  flex: none;
  width: 195px;
  max-width: calc(100% - 75px);
  height: 26px;
  max-height: none;
}

/* アローは白枠の右端ではなく製品名の右隣に並べる */
.p-product__name .c-circle-icon {
  width: 35px;
  height: 35px;
}

.p-product__flavor {
  margin-top: 10px;
}

.p-product__catch {
  width: 100%;
  margin-top: 20px;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.p-product__points {
  align-self: center;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  margin-top: 25px;
}

.p-product__points li {
  font-size: 0.875rem;
  line-height: 1.5;
}

.p-product__formula {
  grid-template-columns: minmax(0, 1fr) 13px minmax(0, 1fr);
  gap: 10px;
  margin-top: 20px;
  min-height: 137px;
  padding: 20px 10px;
}

.p-product__formula .c-pill {
  min-height: 50px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 1rem;
}

.p-product__formula .c-pill .u-en,
.p-product__formula .c-pill .c-pill__unit {
  font-size: 1.125rem;
}

.p-product__formula .c-formula__desc {
  font-size: 0.8125rem;
  line-height: 1.4;
}

.p-product__formula .c-formula__item {
  gap: 10px;
}

.p-product__formula .c-formula__plus {
  margin-top: 7.5px;
  font-size: 2.1875rem;
}

.p-product__notes {
  padding: 0;
  font-size: 0.75rem;
  line-height: 1.57;
}

.p-product__notes .c-boxnote {
  font-size: 0.75rem;
}

.p-products__ask {
  gap: 15px;
  margin-top: 50px;
  padding-inline: 10px;
}

.p-products__ask .c-ask__mark {
  width: 90px;
}

/* 右のボトル画像にかからない幅に。360〜375pxで「医師1,000名の／96％が／ボディメンテを／勧めたいと回答」 */
.p-products__ask .c-ask__title {
  padding-right: 30%;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* 「ボディメンテ」を途中で改行させない */
.p-products__ask .c-ask__keep {
  display: inline-block;
}

.p-products__ask .c-ask__notes {
  padding-left: 0;
  padding-right: 40%;
  font-size: 0.75rem;
  line-height: 1.57;
}

/* Latest instruction replaces the former horizontal SPECIAL carousel. */

.p-special {
  margin-top: 68px;
}

.p-special__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  overflow: visible;
  margin-top: 30px;
  padding: 0 15px;
  scroll-snap-type: none;
}

.p-special__item {
  width: 100%;
  max-width: none;
}

.p-special .p-location {
  display: none;
}

.p-special__action {
  margin-top: 30px;
}

.p-special__deco {
  top: -68.8cqw;
  left: 84.18853%;
  right: auto;
  width: 29.31467%;
  transform: rotate(16deg);
  transform-origin: 0 0;
}

.p-interview__head .c-sec-head__title {
  gap: 15px;
}

.p-interview__lead {
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.p-location span.is-active {
  background: var(--c-lime);
}

.p-location span {
  background: var(--c-white);
}

@media only screen and (max-width: 359px) {

  .p-product__formula {
    padding-inline: 0;
    gap: 5px;
  }

  .p-product__formula .c-pill {
    padding-inline: 5px;
    font-size: 0.9375rem;
  }

  .p-products__ask .c-ask__notes {
    padding-right: 0;
  }
}

/* Figma characterStyleIDs 72 / 80 / 89 tighten these three commas. */

.p-intro__kern--half {
  letter-spacing: -0.5em;
}

.p-intro__kern--short {
  letter-spacing: -0.37em;
}

.p-intro__kern--wide {
  letter-spacing: -0.57em;
}

.p-product__formula {
  grid-template-columns: 110px 13px 110px;
  justify-content: center;
}

.p-product:nth-child(2) .p-product__formula {
  grid-template-columns: 110px 13px 130px;
}

.p-product__formula .c-pill {
  min-width: 110px;
  padding-inline: 8px;
}

.p-product:nth-child(2) .p-product__formula .c-formula__item:last-child .c-pill {
  width: 125px;
  min-width: 0;
  padding-inline: 0;
}

@media only screen and (max-width: 359px) {

  .p-product__formula, .p-product:nth-child(2) .p-product__formula {
    grid-template-columns: minmax(0, 1fr) 13px minmax(0, 1fr);
  }

  .p-product__formula .c-pill {
    min-width: 0;
    max-width: 100%;
  }
}

.p-intro__action {
  display: flex;
}

.p-product__visual--jelly {
  height: 245px;
}

.p-product:nth-child(2) .p-product__notes {
  display: flex;
  flex-direction: column;
}

.p-product:nth-child(2) .p-product__notes > p:first-child {
  order: 1;
  margin-top: 10px;
}

.p-product:nth-child(2) .p-product__footnote {
  order: 0;
  margin-top: 0;
}

/* ドリンクの「※アレルゲン…」はデザインどおり中央揃え（ゼリーは左揃えのまま） */
.p-product__notes--center {
  text-align: center;
}