@charset "UTF-8";

/* ---------------------------------------------------------------- */
/* #region WHEY UPDATE Section  */
/* ---------------------------------------------------------------- */
.lp-wheyUpdate {
  max-width: 780px;
  margin: 0 auto;
}

.c-wrap:has(.lp-wheyUpdate) {
  overflow: visible;
}

.category__wheyUpdate {
  position: relative;
  width: 100%;
}

.c-wheyUpdate {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 動画エリア */
.c-wheyUpdate__image {
  width: 100%;
  aspect-ratio: 1/1;
}

.c-wheyUpdate__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  vertical-align: bottom;
}

/* コンテンツエリア */
.c-wheyUpdate__content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  padding-bottom: min(calc(80 / 780 * 100vw), 80px);
  padding-inline: min(calc(32 / 780 * 100vw), 24px);
}

/* 見出し */
.c-wheyUpdate__heading {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(48 / 780 * 100vw), 48px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-bottom: min(calc(24 / 780 * 100vw), 24px);
}

/* 説明文 */
.c-wheyUpdate__description {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(32 / 780 * 100vw), 32px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.6;
  margin-bottom: min(calc(48 / 780 * 100vw), 48px);
}

/* ボタンエリア */
.c-wheyUpdate__button {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* リンク（ボタンスタイル） */
.c-wheyUpdate__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: min(calc(32 / 780 * 100vw), 32px) min(calc(64 / 780 * 100vw), 64px);
  background-color: var(--color-offBlack);
  border-radius: min(calc(100 / 780 * 100vw), 100px);
  color: var(--color-white);
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(32 / 780 * 100vw), 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: opacity 0.3s linear;
  width: 100%;
}

.c-wheyUpdate__link:hover {
  opacity: 0.8;
}

/* #endregion WHEY UPDATE Section  */


/* ---------------------------------------------------------------- */
/* #region WHEY UPDATE ABOUT Section  */
/* ---------------------------------------------------------------- */

.category__wheyUpdateAbout {
  padding-top: min(calc(110 / 780 * 100vw), 110px);
  padding-inline: min(calc(32 / 780 * 100vw), 32px);
  padding-bottom: min(calc(110 / 780 * 100vw), 110px);
  background: url(https://d2w53g1q050m78.cloudfront.net/ultoracojp/uploads/images/2512/whey/whey_update_about_bg.webp) no-repeat center center / cover;
}

/* .c-wheyUpdateAbout__inner {
} */

/* タイトル */
.c-wheyUpdateAbout__title {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(40 / 780 * 100vw), 40px);
  font-weight: 700;
  color: var(--color-offBlack);
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: min(calc(40 / 780 * 100vw), 40px);
  text-align: left;
  margin-bottom: min(calc(80 / 780 * 100vw), 80px);
}


/* 商品名 */
.c-wheyUpdateAbout__productName {
  font-family: var(--font-HankenGrotesk);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-offBlack);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: min(calc(8 / 780 * 100vw), 8px);
  display: inline-block;
}

.c-wheyUpdateAbout__productName.--cr-gold {
  color: var(--color-gold);
}

.c-wheyUpdateAbout__productImage {
  height: min(calc(240 / 780 * 100vw), 240px);
  width: auto;
  object-fit: contain;
  object-position: bottom;
  vertical-align: bottom;
}

/* テーブルエリア */
.c-wheyUpdateAbout__table {
  margin-bottom: min(calc(80 / 780 * 100vw), 16px);
  background-color: rgba(255, 255, 255, 0.6);
  padding: min(calc(40 / 780 * 100vw), 48px) min(calc(32 / 780 * 100vw), 32px);
}

/* NEWバッジ */
.c-wheyUpdateAbout__newTag {
  position: absolute;
  top: min(calc(105 / 780 * 100vw), 105px);
  right: 0;
  background-color: var(--color-gold);
  color: var(--color-white);
  font-family: var(--font-HankenGrotesk);
  font-size: min(calc(24 / 780 * 100vw), 24px);
  font-weight: 700;
  padding: min(calc(2 / 780 * 100vw), 2px) min(calc(8 / 780 * 100vw), 8px);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* 比較テーブル */
.c-comparisonTable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  line-height: 1.6;
  letter-spacing: 0.02em;
}


.c-comparisonTable th {
  padding: min(calc(6 / 780 * 100vw), 6px) min(calc(8 / 780 * 100vw), 8px);
  font-weight: 700;
  color: var(--color-offBlack);
}

.c-comparisonTable td {
  padding: min(calc(6 / 780 * 100vw), 6px) min(calc(8 / 780 * 100vw), 8px);
  vertical-align: middle;
}

.c-comparisonTable small {
  font-size: min(calc(20 / 780 * 100vw), 20px);
}

/* 項目名 */
.c-comparisonTable__label {
  color: var(--color-offBlack);
  font-weight: 700;
  text-align: left;
  width: min(calc(196 / 780 * 100vw), 196px);
}

/* 旧商品の値 */
.c-comparisonTable__old {
  color: var(--color-offBlack);
  position: relative;
  text-align: center;
  width: min(calc(152 / 780 * 100vw), 152px);
}

.c-comparisonTable__old::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-image: repeating-linear-gradient(to bottom,
      var(--color-gray) 0,
      var(--color-gray) min(calc(2 / 780 * 100vw), 2px),
      transparent min(calc(2 / 780 * 100vw), 2px),
      transparent min(calc(4 / 780 * 100vw), 4px));
}

/* 新商品の値 */
.c-comparisonTable__new {
  color: var(--color-gold);
  text-align: center;
  width: min(calc(220 / 780 * 100vw), 220px);
  font-weight: 700;
  position: relative;
}

.c-comparisonTable__new.--smallText {
  font-size: min(calc(20 / 780 * 100vw), 20px);
}

/* 注釈エリア */
.c-wheyUpdateAbout__notes {
  display: flex;
  flex-direction: column;
  gap: min(calc(4 / 780 * 100vw), 4px);
}

/* 注釈 */
.c-wheyUpdateAbout__note {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(16 / 780 * 100vw), 16px);
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: left;
  opacity: 0.6;
}

/* #endregion WHEY UPDATE ABOUT Section  */

/* ---------------------------------------------------------------- */
/* #region WHEY UPDATE DETAIL Section  */
/* ---------------------------------------------------------------- */

.category__wheyUpdateDetail {
  position: relative;
  width: 100%;
  height: auto;
}

.c-wheyUpdateDetail {
  position: absolute;
  width: 100%;
  padding-inline: min(calc(32 / 780 * 100vw), 32px);
  z-index: 2;
  top: calc(250 / 780 * 100vw);

  @media (min-width: 780px) {
    top: 250px;
  }
}

.c-wheyUpdateDetail__bg__area {
  height: 200px;

  @media (min-width: 780px) {
    height: 300px;
  }
}

.c-wheyUpdateDetail__bg {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.c-wheyUpdateDetail__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  vertical-align: bottom;
}

/* コンテンツエリア（スクロール可能） */
.c-wheyUpdateDetail__content {
  position: relative;
  width: 100%;
}

.c-wheyUpdateDetail__inner {
  max-width: 100%;
}

/* タイトル */
.c-wheyUpdateDetail__title {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(40 / 780 * 100vw), 40px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: min(calc(80 / 780 * 100vw), 80px);
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.c-wheyUpdateDetail__title.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* テキストエリア */
/* .c-wheyUpdateDetail__text {
} */

/* 段落 */
.c-wheyUpdateDetail__paragraph {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 段落の行 */
.c-wheyUpdateDetail__paragraphLine {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.c-wheyUpdateDetail__paragraphLine.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* #endregion WHEY UPDATE DETAIL Section  */


/* ---------------------------------------------------------------- */
/* #region WHEY UPDATE FEATURE Section  */
/* ---------------------------------------------------------------- */

.category__wheyUpdateFeature {
  background-color: var(--color-white);
  padding-top: min(calc(110 / 780 * 100vw), 110px);
  padding-bottom: min(calc(110 / 780 * 100vw), 110px);
  background: url(https://d2w53g1q050m78.cloudfront.net/ultoracojp/uploads/images/2512/whey/category__wheyUpdateFeature_bg.webp) no-repeat center center / cover;
}

/* シンバイオティクス処方セクション */
.c-wheyUpdateFeature__formula {
  margin-bottom: min(calc(48 / 780 * 100vw), 48px);
}

.c-wheyUpdateFeature__formula .c-wheyUpdateFeature__title {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(40 / 780 * 100vw), 40px);
  font-weight: 700;
  color: var(--color-offBlack);
  line-height: 1.2;
  margin-bottom: min(calc(40 / 780 * 100vw), 40px);
  text-align: left;
  color: var(--color-gold);
}

.c-wheyUpdateFeature__title small {
  font-size: min(calc(28 / 780 * 100vw), 28px);
}

.c-wheyUpdateFeature__text {
  margin-bottom: min(calc(32 / 780 * 100vw), 32px);
}

.c-wheyUpdateFeature__paragraph {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-offBlack);
  line-height: 1.8;
  margin-bottom: min(calc(16 / 780 * 100vw), 16px);
}

.c-wheyUpdateFeature__paragraph:last-child {
  margin-bottom: 0;
}

.c-wheyUpdateFeature__diagram {
  width: 100%;
  position: relative;
  z-index: 10;
}

.c-wheyUpdateFeature__diagram img {
  width: 100%;
  height: auto;
  display: block;
}

.c-wheyUpdateFeature__result {
  margin: min(calc(40 / 780 * 100vw), 40px) auto 0;
  position: relative;
  z-index: 1;
}

.c-wheyUpdateFeature__result span {
  display: block;
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 700;
  color: var(--color-offBlack);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  background: linear-gradient(90deg, rgba(184, 153, 107, 1) 0%, rgba(124, 101, 66, 1) 100%);
  color: var(--color-white);
  width: min(calc(556 / 780 * 100vw), 556px);
  padding: min(calc(32 / 780 * 100vw), 16px);
  border-radius: 8px;
  margin: 0 auto;
}

.c-wheyUpdateFeature__result::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(400 / 780 * 100vw), 400px);
  height: min(calc(400 / 780 * 100vw), 400px);
  background: url(https://d2w53g1q050m78.cloudfront.net/ultoracojp/uploads/images/2512/whey/synbiotics_diagram_union.webp) no-repeat center center / cover;
  z-index: -1;
}

/* タンパク質セクション */
.c-wheyUpdateFeature__protein {
  margin-bottom: min(calc(48 / 780 * 100vw), 48px);
  position: relative;
  z-index: 10;
}

.c-wheyUpdateFeature__proteinText {
  margin-bottom: min(calc(48 / 780 * 100vw), 48px);
}

.c-wheyUpdateFeature__proteinImage {
  width: 100%;
}

.c-wheyUpdateFeature__proteinImage img {
  width: 100%;
  height: auto;
  display: block;
}

/* UL-10乳酸菌セクション */
.c-wheyUpdateFeature__lacticText {
  margin-bottom: min(calc(48 / 780 * 100vw), 48px);
}


/* UL-10乳酸菌タイトル */
.c-wheyUpdateFeature__lacticHeading {
  background-color: #DCDEE7;
  padding: min(calc(24 / 780 * 100vw), 24px);
}

.c-wheyUpdateFeature__lacticTitle {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(32 / 780 * 100vw), 32px);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.2;
  text-align: center;
}

/* 顕微鏡画像 */
.c-wheyUpdateFeature__lacticImage {
  width: 100%;
}

.c-wheyUpdateFeature__lacticImage img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: min(calc(32 / 780 * 100vw), 32px);
}

.c-wheyUpdateFeature__lacticCaption {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.6;
  text-align: center;
}

/* ボタン */
.c-wheyUpdateFeature__lacticButton {
  margin-top: min(calc(32 / 780 * 100vw), 32px);
  width: 100%;
  display: flex;
  justify-content: center;
}

.c-wheyUpdateButton {
  display: block;
  width: 100%;
  gap: min(calc(12 / 780 * 100vw), 12px);
  padding: min(calc(32 / 780 * 100vw), 32px);
  background-color: var(--color-offBlack);
  color: var(--color-white);
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(32 / 780 * 100vw), 32px);
  font-weight: 500;
  line-height: 1;
  position: relative;
  text-align: center;
  transition: opacity 0.3s linear;
}

.c-wheyUpdateButton:hover {
  opacity: 0.8;
}

.c-wheyUpdateButton__text {
  color: var(--color-white);
}

.c-wheyUpdateButton__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: min(calc(36 / 780 * 100vw), 36px);
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #fff;
  border-right: 0;
}

/* #endregion WHEY UPDATE FEATURE Section  */


/* ---------------------------------------------------------------- */
/* #region WHEY UPDATE NUTRIENTS Section  */
/* ---------------------------------------------------------------- */

.category__wheyUpdateNutrients {
  background-color: #F5F1E8;
  padding-top: min(calc(110 / 780 * 100vw), 110px);
  padding-bottom: min(calc(160 / 780 * 100vw), 160px);
  background: url(https://d2w53g1q050m78.cloudfront.net/ultoracojp/uploads/images/2512/whey/wheyUpdateNutrients_bg.webp) no-repeat center bottom / cover;

}

/* タイトル */
.c-wheyUpdateNutrients__title {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(40 / 780 * 100vw), 40px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
  margin-bottom: min(calc(80 / 780 * 100vw), 80px);
  text-align: right;
}

.c-wheyUpdateNutrients__title small {
  font-size: min(calc(28 / 780 * 100vw), 28px);
}

/* テキストエリア */
.c-wheyUpdateNutrients__text {
  margin-bottom: min(calc(48 / 780 * 100vw), 48px);
}

.c-wheyUpdateNutrients__paragraph {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.6;
  margin-bottom: min(calc(16 / 780 * 100vw), 16px);
}

.c-wheyUpdateNutrients__paragraph:last-child {
  margin-bottom: 0;
}

.c-wheyUpdateNutrients__note {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(16 / 780 * 100vw), 12px);
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.6;
  margin-top: min(calc(16 / 780 * 100vw), 16px);
  opacity: 0.6;
}

/* カルーセルコンテナ */
.c-wheyUpdateNutrients__carousels {
  display: flex;
  flex-direction: column;
  gap: min(calc(48 / 780 * 100vw), 48px);
}

/* カルーセル */
.c-nutrientCarousel {
  width: 100%;
}

/* カルーセルヘッダー */
.c-nutrientCarousel__heading {
  background-color: #DCDEE7;
  padding: min(calc(24 / 780 * 100vw), 24px) min(calc(32 / 780 * 100vw), 32px);
}

.c-nutrientCarousel__title {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(32 / 780 * 100vw), 32px);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1;
  text-align: center;
  transition: opacity 0.5s ease-in-out;
}

.c-nutrientCarousel__title.fade-out {
  opacity: 0;
}

.c-nutrientCarousel__title.fade-in {
  opacity: 1;
}

/* スライダーエリア */
.c-nutrientCarousel__slider {
  position: relative;
  width: 100%;
}

/* Swiperコンテナ */
.c-nutrientCarousel__swiper {
  width: 100%;
  overflow: hidden;
}

.c-nutrientCarousel__wrapper {
  display: flex;
}

.c-nutrientCarousel__slide {
  width: 100%;
  position: relative;
  background-color: var(--color-white);
}

.c-nutrientCarousel__content {
  padding: min(calc(32 / 780 * 100vw), 32px);
}

/* 画像エリア */
.c-nutrientCarousel__image {
  position: relative;
  width: 100%;
  margin-bottom: min(calc(16 / 780 * 100vw), 16px);
  position: relative;
  z-index: 10;
}

.c-nutrientCarousel__image img {
  width: 100%;
  height: auto;
  display: block;
}

.c-nutrientCarousel__label {
  position: absolute;
  bottom: min(calc(32 / 780 * 100vw), 32px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(24 / 780 * 100vw), 24px);
  padding: min(calc(4 / 780 * 100vw), 4px) min(calc(80 / 780 * 100vw), 80px);
  border-radius: 500px;
  white-space: nowrap;
}

/* テキストエリア */
.c-nutrientCarousel__text {
  text-align: center;
}

.c-nutrientCarousel__description {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.6;
}

/* ナビゲーション */
.c-nutrientCarousel__navs {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 min(calc(48 / 780 * 100vw), 48px);
  pointer-events: none;
  z-index: 10;
}

.c-nutrientCarousel__prev,
.c-nutrientCarousel__next {
  width: min(calc(32 / 780 * 100vw), 32px);
  height: min(calc(32 / 780 * 100vw), 32px);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s linear;
  filter: drop-shadow(0 0px 10px rgba(0, 0, 0, 0.4));
}

.c-nutrientCarousel__prev:hover,
.c-nutrientCarousel__next:hover {
  opacity: 0.7;
}

.c-nutrientCarousel__prev {
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  border-left: none;
  transform: rotate(-135deg);
}

.c-nutrientCarousel__next {
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  border-left: none;
  transform: rotate(45deg);
}

/* #endregion WHEY UPDATE NUTRIENTS Section  */


/* ---------------------------------------------------------------- */
/* #region WHEY UPDATE COMMITMENT Section  */
/* ---------------------------------------------------------------- */

.category__wheyUpdateCommitment {
  background-color: #FBF9F5;
  background-image: url(https://d2w53g1q050m78.cloudfront.net/ultoracojp/uploads/images/2512/whey/commitment_bg.webp);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: min(calc(110 / 780 * 100vw), 110px);
  padding-bottom: min(calc(110 / 780 * 100vw), 110px);
  position: relative;
}


.c-wheyUpdateCommitment {
  position: relative;
  z-index: 2;
}

/* タイトル */
.c-wheyUpdateCommitment__title {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(40 / 780 * 100vw), 40px);
  font-weight: 700;
  color: var(--color-offBlack);
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: min(calc(80 / 780 * 100vw), 80px);
}

.c-wheyUpdateCommitment__title small {
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
}

/* 構造図 */
.c-wheyUpdateCommitment__diagram {
  width: 100%;
  margin-bottom: min(calc(48 / 780 * 100vw), 48px);
}

.c-wheyUpdateCommitment__diagram picture,
.c-wheyUpdateCommitment__diagram img {
  width: 100%;
  height: auto;
  display: block;
}

/* 説明文 */
.c-wheyUpdateCommitment__text {
  margin-bottom: min(calc(16 / 780 * 100vw), 16px);
}

.c-wheyUpdateCommitment__paragraph {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.6;
}

/* 引用文/注釈 */
.c-wheyUpdateCommitment__note {
  margin-bottom: min(calc(48 / 780 * 100vw), 48px);
}

.c-wheyUpdateCommitment__citation {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(16 / 780 * 100vw), 16px);
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.6;
}

/* ボタン */
.c-wheyUpdateCommitment__button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-wheyUpdateCommitment__button .c-wheyUpdateButton {
  background-color: var(--color-offBlack);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.c-wheyUpdateCommitment__button .c-wheyUpdateButton__text {
  color: var(--color-white);
}

.c-wheyUpdateCommitment__button .c-wheyUpdateButton__arrow {
  color: var(--color-white);
}

/* #endregion WHEY UPDATE COMMITMENT Section  */


/* ---------------------------------------------------------------- */
/* #region WHEY UPDATE RECOMMEND Section  */
/* ---------------------------------------------------------------- */

.category__wheyUpdateRecommend {
  background-color: #8B7A6B;
  background-image: url(https://d2w53g1q050m78.cloudfront.net/ultoracojp/uploads/images/2512/whey/wheyUpdateRecommend.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: min(calc(110 / 780 * 100vw), 110px);
  padding-bottom: min(calc(110 / 780 * 100vw), 110px);
}

/* 見出しエリア */
.c-wheyUpdateRecommend__heading {
  margin-bottom: min(calc(80 / 780 * 100vw), 80px);
  text-align: center;
}

.c-wheyUpdateRecommend__titleEn {
  font-family: var(--font-HankenGrotesk);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-gold);
  line-height: 1.6;
  margin-bottom: min(calc(16 / 780 * 100vw), 16px);
}

.c-wheyUpdateRecommend__titleJa {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(40 / 780 * 100vw), 40px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.6;
}

/* リストコンテナ */
.c-wheyUpdateRecommend__list {
  border: 1px solid rgba(230, 222, 211, .5);
  padding: min(calc(48 / 780 * 100vw), 48px) min(calc(80 / 780 * 100vw), 80px);
}

/* リストアイテム */
.c-wheyUpdateRecommend__item {
  display: flex;
  align-items: center;
  gap: min(calc(16 / 780 * 100vw), 16px);
  padding-bottom: min(calc(32 / 780 * 100vw), 32px);
  margin-bottom: min(calc(32 / 780 * 100vw), 32px);
  border-bottom: 1px solid rgba(230, 222, 211, .5);
}

.c-wheyUpdateRecommend__item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* チェックマークアイコン */
.c-wheyUpdateRecommend__icon {
  width: min(calc(40 / 780 * 100vw), 24px);
  height: min(calc(40 / 780 * 100vw), 40px);
  flex-shrink: 0;
}

.c-wheyUpdateRecommend__icon svg {
  width: 100%;
  height: 100%;
}

/* テキスト */
.c-wheyUpdateRecommend__text {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1;
  flex: 1;
}

/* #endregion WHEY UPDATE RECOMMEND Section  */


/* ---------------------------------------------------------------- */
/* #region WHEY UPDATE FLAVOR Section  */
/* ---------------------------------------------------------------- */

.category__wheyUpdateFlavor {
  padding-top: min(calc(110 / 780 * 100vw), 110px);
  padding-bottom: min(calc(110 / 780 * 100vw), 110px);
}

/* タイトル */
.c-wheyUpdateFlavor__title {
  font-family: var(--font-HankenGrotesk);
  font-size: min(calc(40 / 780 * 100vw), 40px);
  font-weight: 700;
  color: var(--color-offBlack);
  line-height: 1.6;
  text-align: center;
  margin-bottom: min(calc(80 / 780 * 100vw), 80px);
}

/* スライダーコンテナ */
.c-wheyUpdateFlavor__slider {
  position: relative;
  width: 100%;
}

.c-wheyUpdateFlavor__swiper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.c-wheyUpdateFlavor__wrapper {
  display: flex;
}

.c-wheyUpdateFlavor__slide {
  width: 100%;
  flex-shrink: 0;
}

/* フレーバーカード */
.c-wheyUpdateFlavor__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: min(calc(48 / 780 * 100vw), 48px) min(calc(32 / 780 * 100vw), 32px);
  background-color: #E6DED3;
}

/* カードヘッダー */
.c-wheyUpdateFlavor__cardHeading {
  margin-bottom: min(calc(32 / 780 * 100vw), 32px);
}

.c-wheyUpdateFlavor__cardTitleEn {
  font-family: var(--font-HankenGrotesk);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.6;
  width: 100%;
  white-space: nowrap;
}

/* カード画像 */
.c-wheyUpdateFlavor__cardImage {
  width: 100%;
  margin-bottom: min(calc(32 / 780 * 100vw), 32px);
}

.c-wheyUpdateFlavor__cardImage picture,
.c-wheyUpdateFlavor__cardImage img {
  width: 100%;
  height: min(calc(240 / 780 * 100vw), 240px);
  display: block;
  object-fit: contain;
  object-position: center;
}

/* カードコンテンツ */
.c-wheyUpdateFlavor__cardContent {
  width: 100%;
}

.c-wheyUpdateFlavor__cardName {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(26 / 780 * 100vw), 26px);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: 0.02em;
  padding-bottom: min(calc(24 / 780 * 100vw), 24px);
  margin-bottom: min(calc(24 / 780 * 100vw), 24px);
  border-bottom: 1px solid var(--color-black);
  text-align: center;
}

.c-wheyUpdateFlavor__cardDescription {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.5;
}

/* ナビゲーション */
.c-wheyUpdateFlavor__navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(calc(32 / 780 * 100vw), 32px);
  margin-top: min(calc(32 / 780 * 100vw), 32px);
  margin-bottom: min(calc(10 / 780 * 100vw), 10px);
}


.c-wheyUpdateFlavor__pagination {
  display: flex;
  gap: min(calc(16 / 780 * 100vw), 16px);
  align-items: center;
  justify-content: center;
}

.c-wheyUpdateFlavor__pagination .c-bullet {
  flex: 0 0 min(calc(8 / 780 * 100vw), 8px);
  height: min(calc(8 / 780 * 100vw), 8px);
  background-color: #DCDEE7;
  transition: opacity 0.3s linear, background-color 0.3s linear;
  opacity: 1;
}

.c-wheyUpdateFlavor__pagination .c-bullet.swiper-pagination-bullet-active {
  background-color: var(--color-gold);
}

.c-arrowIcon {
  width: min(calc(24 / 780 * 100vw), 24px);
  height: min(calc(24 / 780 * 100vw), 24px);
  border: none;
  background-color: #fff;
  padding: 0;
  margin: 0;
  border-top: 2px solid var(--color-gold);
  border-right: 2px solid var(--color-gold);
  display: block;
  box-sizing: inherit;
  cursor: pointer;
  transition: opacity 0.3s linear;
}

.c-arrowIcon--prev {
  transform: rotate(-135deg);
}

.c-arrowIcon--next {
  transform: rotate(45deg);
}

/* #endregion WHEY UPDATE FLAVOR Section  */


/* ---------------------------------------------------------------- */
/* #region WHEY UPDATE BASIC Section  */
/* ---------------------------------------------------------------- */

.category__wheyUpdateBasic {
  background-color: var(--color-white);
}

/* ヘッダーエリア */
.c-wheyUpdateBasic__heading {
  text-align: center;
  margin-bottom: min(calc(48 / 780 * 100vw), 48px);
  padding-bottom: min(calc(48 / 780 * 100vw), 48px);
  position: relative;
  z-index: 2;
}

.c-wheyUpdateBasic__heading::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(calc(160 / 780 * 100vw), 160px);
  height: 1px;
  background-color: var(--color-gray);
}

.c-wheyUpdateBasic__title {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(40 / 780 * 100vw), 40px);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* スライダーコンテナ */
.c-wheyUpdateBasic__slider {
  position: relative;
  width: 100%;
}

.c-wheyUpdateBasic__swiper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.c-wheyUpdateBasic__wrapper {
  display: flex;
}

.c-wheyUpdateBasic__slide {
  width: 100%;
  flex-shrink: 0;
}

/* カード */
.c-wheyUpdateBasic__card {
  border-radius: min(calc(16 / 780 * 100vw), 16px);
  padding: 0 min(calc(32 / 780 * 100vw), 32px) min(calc(54 / 780 * 100vw), 54px);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.c-wheyUpdateBasic__card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: min(calc(800 / 780 * 100vw), 800px);
  background-color: var(--color-gray);
  z-index: -1;
}

/* カード説明文 */
.c-wheyUpdateBasic__cardDescription {
  margin-bottom: min(calc(16 / 780 * 100vw), 16px);
  text-align: center;
}

.c-wheyUpdateBasic__cardText {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* カードヘッダー */
.c-wheyUpdateBasic__cardHeading {
  margin-bottom: min(calc(48 / 780 * 100vw), 48px);
  text-align: center;
}

.c-wheyUpdateBasic__cardTitleEn {
  font-family: var(--font-HankenGrotesk);
  font-size: min(calc(40 / 780 * 100vw), 40px);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: 0.1em;
}

/* カード画像 */
.c-wheyUpdateBasic__cardImage {
  width: 100%;
  margin-bottom: min(calc(24 / 780 * 100vw), 24px);
  text-align: center;
}

.c-wheyUpdateBasic__cardImage picture,
.c-wheyUpdateBasic__cardImage img {
  width: min(calc(316 / 780 * 100vw), 316px);
  height: auto;
  display: inline-block;
  aspect-ratio: 158/180;
  object-fit: contain;
  object-position: center;
}

/* カードコンテンツ */
.c-wheyUpdateBasic__cardContent {
  width: 100%;
}

/* 商品名 */
.c-wheyUpdateBasic__productName {
  text-align: center;
  margin-bottom: min(calc(48 / 780 * 100vw), 48px);
}

.c-wheyUpdateBasic__productNameEn {
  font-family: var(--font-HankenGrotesk);
  font-size: min(calc(36 / 780 * 100vw), 36px);
  font-weight: 800;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: min(calc(16 / 780 * 100vw), 16px);
}

.c-wheyUpdateBasic__productNameJa {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(24 / 780 * 100vw), 24px);
  font-weight: 400;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* おすすめセクション */
.c-wheyUpdateBasic__recommend {
  width: 100%;
}

.c-wheyUpdateBasic__recommendHeading {
  background-color: var(--color-gold);
  border-radius: 8px 8px 0 0;
  padding: min(calc(16 / 780 * 100vw), 16px) min(calc(32 / 780 * 100vw), 32px);
  text-align: center;
}

.c-wheyUpdateBasic__recommendTitle {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
  letter-spacing: 0.05em;
}

/* おすすめリスト */
.c-wheyUpdateBasic__recommendList {
  display: flex;
  flex-direction: column;
  padding: min(calc(32 / 780 * 100vw), 32px);
  background-color: #fff;
  border-radius: 0 0 8px 8px;
}

.c-wheyUpdateBasic__recommendItem {
  display: flex;
  align-items: center;
  gap: min(calc(12 / 780 * 100vw), 12px);
  padding-bottom: min(calc(32 / 780 * 100vw), 32px);
  margin-bottom: min(calc(32 / 780 * 100vw), 32px);
  border-bottom: 1px solid rgba(184, 153, 107, 0.5);
}

.c-wheyUpdateBasic__recommendItem:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.c-wheyUpdateBasic__recommendIcon {
  width: min(calc(24 / 780 * 100vw), 24px);
  height: min(calc(24 / 780 * 100vw), 24px);
  flex-shrink: 0;
}

.c-wheyUpdateBasic__recommendIcon svg {
  width: 100%;
  height: 100%;
}

.c-wheyUpdateBasic__recommendText {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: 0.02em;
  flex: 1;
}

/* ナビゲーション */
.c-wheyUpdateBasic__navigation {
  display: flex;
  gap: min(calc(48 / 780 * 100vw), 48px);
  align-items: center;
  justify-content: center;
  margin-top: min(calc(40 / 780 * 100vw), 40px);
  margin-bottom: min(calc(10 / 780 * 100vw), 10px);
}


.c-wheyUpdateBasic__navButton.c-arrowIcon {
  border-color: var(--color-black);
}


.c-wheyUpdateBasic__navIcon {
  font-size: min(calc(20 / 780 * 100vw), 20px);
  color: var(--color-offBlack);
  line-height: 1;
}

.c-wheyUpdateBasic__pagination {
  display: flex;
  gap: min(calc(16 / 780 * 100vw), 16px);
  align-items: center;
  justify-content: center;
}

.c-wheyUpdateBasic__pagination .c-bullet {
  flex: 0 0 min(calc(8 / 780 * 100vw), 8px);
  height: min(calc(8 / 780 * 100vw), 8px);
  background-color: #DCDEE7;
  transition: opacity 0.3s linear, background-color 0.3s linear;
  opacity: 1;
}

.c-wheyUpdateBasic__pagination .c-bullet.c-bullet.swiper-pagination-bullet-active {
  background-color: var(--color-black);
}

/* #endregion WHEY UPDATE BASIC Section  */


/* ---------------------------------------------------------------- */
/* #region WHEY UPDATE FAQ Section  */
/* ---------------------------------------------------------------- */

.category__wheyUpdateFaq {
  background-color: var(--color-white);
  padding-top: min(calc(110 / 780 * 100vw), 110px);
  padding-bottom: min(calc(110 / 780 * 100vw), 110px);
}

/* タイトル */
.c-wheyUpdateFaq__title {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(40 / 780 * 100vw), 40px);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: min(calc(80 / 780 * 100vw), 80px);
}

/* FAQリスト */
.c-wheyUpdateFaq__list {
  display: flex;
  flex-direction: column;
}

/* FAQアイテム */
.c-wheyUpdateFaq__item {
  border-bottom: 1px solid #E6DED3;
  padding-bottom: min(calc(48 / 780 * 100vw), 48px);
  margin-bottom: min(calc(48 / 780 * 100vw), 48px);
}

.c-wheyUpdateFaq__item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 質問行 */
.c-wheyUpdateFaq__question {
  display: flex;
  align-items: center;
  gap: min(calc(32 / 780 * 100vw), 32px);
  margin-bottom: min(calc(24 / 780 * 100vw), 24px);
}

.c-wheyUpdateFaq__icon {
  width: min(calc(48 / 780 * 100vw), 48px);
  height: min(calc(48 / 780 * 100vw), 48px);
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-HankenGrotesk);
  font-size: min(calc(32 / 780 * 100vw), 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}

.c-wheyUpdateFaq__icon.--question {
  background-color: var(--color-black);
  color: var(--color-white);
}

.c-wheyUpdateFaq__icon.--answer {
  color: var(--color-gold);
}

.c-wheyUpdateFaq__questionText {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(32 / 780 * 100vw), 32px);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: 0.02em;
  flex: 1;
}

/* 回答行 */
.c-wheyUpdateFaq__answer {
  display: flex;
  align-items: flex-start;
  gap: min(calc(32 / 780 * 100vw), 32px);
}

.c-wheyUpdateFaq__answerText {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.5;
  letter-spacing: 0.02em;
  flex: 1;
}

.c-wheyUpdateFaq__answerText a {
  color: var(--color-black);
  text-decoration: underline;
  transition: opacity 0.3s linear;
}

.c-wheyUpdateFaq__answerText a:hover {
  opacity: 0.7;
}

/* #endregion WHEY UPDATE FAQ Section  */


/* ---------------------------------------------------------------- */
/* #region WHEY UPDATE MESSAGE Section  */
/* ---------------------------------------------------------------- */

.category__wheyUpdateMessage {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: min(calc(110 / 780 * 100vw), 110px);
  padding-bottom: min(calc(110 / 780 * 100vw), 110px);
  background: url(https://d2w53g1q050m78.cloudfront.net/ultoracojp/uploads/images/2512/whey/message_bg.webp) no-repeat center center / cover;
}

.c-wheyUpdateMessage {
  position: relative;
  width: 100%;
}


.c-wheyUpdateMessage__bg picture,
.c-wheyUpdateMessage__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* コンテンツエリア */
/* .c-wheyUpdateMessage__content {
} */


/* タイトル */
.c-wheyUpdateMessage__title {
  font-family: var(--font-HankenGrotesk);
  font-size: min(calc(40 / 780 * 100vw), 40px);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: 0.02em;
  margin-bottom: min(calc(80 / 780 * 100vw), 80px);
}

/* テキストエリア */
/* .c-wheyUpdateMessage__text {
} */

/* 段落 */
.c-wheyUpdateMessage__paragraph {
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(28 / 780 * 100vw), 28px);
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.c-wheyUpdateMessage__logo {
  width: min(calc(246 / 780 * 100vw), 246px);
  height: auto;
  margin-top: min(calc(200 / 780 * 100vw), 200px);
}

.c-wheyUpdateMessage__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 10px #797a5f);
}

/* #endregion WHEY UPDATE MESSAGE Section  */

/* ---------------------------------------------------------------- */
/* #region WHEY UPDATE FLOATING BUTTON  */
/* ---------------------------------------------------------------- */

.c-wheyUpdateFloatingButton {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: min(calc(16 / 750 * 100vw), 16px) min(calc(24 / 750 * 100vw), 24px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s linear;
}

.c-wheyUpdateFloatingButton.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.c-wheyUpdateFloatingButton__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: min(calc(32 / 750 * 100vw), 32px) min(calc(64 / 750 * 100vw), 64px);
  background-color: var(--color-offBlack);
  border-radius: min(calc(100 / 750 * 100vw), 100px);
  color: var(--color-white);
  font-family: var(--font-NotoSansJP);
  font-size: min(calc(32 / 750 * 100vw), 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: opacity 0.3s linear;
  width: 100%;
}

.c-wheyUpdateFloatingButton__link:hover {
  opacity: 0.8;
}

/* #endregion WHEY UPDATE FLOATING BUTTON  */