/*
* top.css
*
*/
@media (min-width: 768px) {
  .page_container {
    display: grid;
  }
}

.page_container,
.page_bg {
  transition: opacity 1s cubic-bezier(0.39, 0.575, 0.565, 1), visibility 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.is-splash-loading-finished .page_container,
.is-splash-loading-finished .page_bg {
  visibility: visible;
  opacity: 1;
}

.page_mainArea {
  overflow-x: clip;
  position: relative;
  width: 100%;
  background-color: var(--color-beige);
  box-shadow: 0 0 min(3.2vw, 16px) color-mix(in srgb, var(--color-bg-black), transparent 92%);
}
@media (min-width: 768px) {
  .page_mainArea {
    width: min(100vw, 500px);

    margin-inline: auto;
  }
}

.kv {
  position: relative;
  z-index: var(--z-index-container);
  height: calc(100lvh + var(--scroll-hold-distance));
}

.kv_container {
  position: sticky;
  top: 0;
  left: 0;
}

.kv_mv {
  position: relative;
  width: 100%;
  height: 100lvh;
}
.kv_mv > video,
.kv_mv > picture,
.kv_mv > picture img {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;

     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.kv_logo {
  position: absolute;
  top: 0;
  left: 0;
  width: min(32vw, 160px);
}
.kv_logo img {
  width: 100%;
}

.kv_text {
  position: absolute;
  bottom: min(12.8vw, 64px);
  left: min(4.2666666667vw, 21.3333333333px);
}
.kv_text div p:first-child {
  letter-spacing: 0.05em;
  font-size: min(5.3333333333vw, 26.6666666667px);
  font-weight: 500;
  line-height: 1.5;
}
.kv_text div p:nth-child(2) {
  margin-top: min(1.8666666667vw, 9.3333333333px);
  letter-spacing: 0;
  font-size: min(5.8666666667vw, 29.3333333333px);
  font-weight: 500;
  line-height: 1.5;
}
.kv_text h1 {
  margin-top: min(4.5333333333vw, 22.6666666667px);
  letter-spacing: 0.05em;
  font-size: min(3.2vw, 16px);
  font-weight: 300;
  line-height: 1.5;
}
.kv_text > p:last-child {
  margin-top: max(-1.3333333333vw, -6.6666666667px);
}

.scroll {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  right: min(6.4vw, 32px);
  bottom: 0;
}
@keyframes scroll_bar {
  0% {
    transform-origin: 0 0;

    scale: 1 0;
  }
  30% {
    transform-origin: 0 0;

    scale: 1 1;
  }
  51% {
    transform-origin: 0 100%;

    scale: 1 1;
  }
  82% {
    transform-origin: 0 100%;

    scale: 1 0;
  }
  100% {
    transform-origin: 0 100%;

    scale: 1 0;
  }
}
.scroll_bar {
  overflow: hidden;
  position: relative;
  width: 1px;
  height: 9vh;
  max-height: min(17.6vw, 88px);
  background-color: color-mix(in srgb, var(--color-stone), transparent 80%);

  margin-inline-end: min(0.5333333333vw, 2.6666666667px);
}
.scroll_bar::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  width: 100%;
  height: 100%;
  animation: scroll_bar 2.2s infinite;
  background-color: var(--color-stone);

  translate: -50% 0;
}

.scroll_text {
  letter-spacing: 0.05em;
  font-size: min(3.7333333333vw, 18.6666666667px);
  font-weight: 500;
  line-height: 1.2;

  writing-mode: vertical-rl;
}

.morph_area {
  position: relative;
  z-index: var(--z-index-container);
  width: 100%;
  background-color: var(--color-bg-cream);
}
.morph_area > canvas {
  display: block;
  opacity: 0;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100lvh;
  pointer-events: none;

  margin-block-end: -100lvh;
}

.sticky_wrapper {
  position: relative;
  z-index: var(--z-index-container);
}

.lead {
  position: relative;
  padding: min(32vw, 160px) min(6.4vw, 32px) min(32vw, 160px);
}

.lead_ttl {
  font-size: min(9.6vw, 48px);
  font-weight: 500;
  line-height: 1.5;
}

.lead_subTtl {
  font-size: min(5.3333333333vw, 26.6666666667px);
  font-weight: 500;
  line-height: 1.5;

  margin-block-start: min(3.2vw, 16px);
}

.lead_txt > p {
  font-size: min(3.7333333333vw, 18.6666666667px);
  font-weight: 500;
  line-height: 2;

  margin-block-start: min(12.8vw, 64px);
}
.lead_txt > p > span {
  display: block;

  margin-block-start: min(2.1333333333vw, 10.6666666667px);
}
.lead_txt > h3 {
  margin-block-start: min(12.8vw, 64px);
}
.lead_txt > h3 span:first-child {
  display: block;
  letter-spacing: 0.06em;
  font-size: min(2.6666666667vw, 13.3333333333px);
  font-weight: 500;
  line-height: 2;
}
.lead_txt > h3 span:last-child {
  display: block;
  letter-spacing: 0.05em;
  font-size: min(3.7333333333vw, 18.6666666667px);
  font-weight: 500;
  line-height: 2;
}

.product_01 {
  position: sticky;
  top: calc(max(0px, min(218.9333333333vw, 1094.6666666667px) - 100lvh) * -1);
  left: 0;
  padding: min(5.3333333333vw, 26.6666666667px) min(6.4vw, 32px) min(32vw, 160px);
  min-height: 100lvh;
}
@media screen and (min-width: 500px) and (max-width: 767px) {
  .product_01 {
    top: calc(max(0px, min(218.9333333333vw, 1094.6666666667px) + 100vw - 500px - 100lvh) * -1);
  }
}

.point_lead {
  position: relative;
  z-index: var(--z-index-container);
  width: 100%;
  height: 100lvh;
}
.point_lead img {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;

     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}

.point_lead_txt {
  position: absolute;
  top: min(12.8vw, 64px);
  left: min(7.4666666667vw, 37.3333333333px);
  width: min(10.4vw, 52px);
}

.point_num {
  position: relative;
  width: min(32vw, 160px);

  margin-inline: auto;
  padding-block-start: min(8.8vw, 44px);
}
.point_num > img {
  width: 100%;
}

.point_ttl {
  text-align: center;
  letter-spacing: 0.05em;
  font-size: min(8vw, 40px);
  font-weight: 500;
  line-height: 1.5;

  margin-block-start: min(6.4vw, 32px);
}
.point_ttl > span {
  display: block;
  letter-spacing: 0.1em;
  font-size: min(4.2666666667vw, 21.3333333333px);
  font-weight: 600;
  line-height: 1.5;
}

.point_body {
  padding-block-start: min(10.6666666667vw, 53.3333333333px);
}
.point_body > p {
  letter-spacing: 0.05em;
  font-size: min(3.7333333333vw, 18.6666666667px);
  font-weight: 500;
  line-height: 1.8;
}

.point_mov {
  margin-block-start: min(2.1333333333vw, 10.6666666667px);
}
.point_mov img,
.point_mov video {
  width: 100%;
}

.point_01 {
  position: relative;
  z-index: var(--z-index-container);
  padding: min(12.5333333333vw, 62.6666666667px) min(6.4vw, 32px) min(29.3333333333vw, 146.6666666667px);
  background-color: var(--color-bg-beige);
}

.point_01_img {
  width: 100%;
  max-width: min(87.2vw, 436px);

  margin-inline: auto;
  margin-block: min(2.1333333333vw, 10.6666666667px) min(8.5333333333vw, 42.6666666667px);
}

.point_01_note {
  margin-block-start: min(1.8666666667vw, 9.3333333333px);
}

.point_02 {
  position: relative;
  z-index: var(--z-index-container);
  padding: min(22.9333333333vw, 114.6666666667px) min(6.4vw, 32px) min(32vw, 160px);
  background-color: var(--color-bg-beige-light);
}

.point_02_img {
  width: 100%;
  max-width: min(87.2vw, 436px);

  margin-inline: auto;
  margin-block: min(2.1333333333vw, 10.6666666667px) min(8.5333333333vw, 42.6666666667px);
}

.point_03 {
  position: relative;
  z-index: var(--z-index-container);
  padding: min(22.9333333333vw, 114.6666666667px) min(6.4vw, 32px) min(32vw, 160px);
  background-color: var(--color-bg-beige);
}

.point_03_img {
  margin-block: min(2.1333333333vw, 10.6666666667px) min(8.5333333333vw, 42.6666666667px);
}

.product_02_lead {
  position: relative;
  z-index: var(--z-index-container);
}
.product_02_lead > p {
  letter-spacing: 0.05em;
  font-size: min(3.7333333333vw, 18.6666666667px);
  font-weight: 500;
  line-height: 1.8;
}
.product_02_lead > p + p {
  margin-block-start: min(6.4vw, 32px);
}

.product_02_lead_img {
  width: 100%;
}

.product_02_lead_txt {
  position: absolute;
  top: min(13.6vw, 68px);
  left: min(7.4666666667vw, 37.3333333333px);
  width: min(13.3333333333vw, 66.6666666667px);
}
.product_02_lead_txt img {
  width: 100%;
}

.product_02 {
  position: relative;
  z-index: var(--z-index-container);
  padding: min(21.3333333333vw, 106.6666666667px) min(6.4vw, 32px) min(32vw, 160px);
  background-color: var(--color-bg-beige);
}

.fragrance_lead {
  position: sticky;
  z-index: var(--z-index-container);
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100lvh + var(--scroll-hold-distance));

  padding-block-end: var(--scroll-hold-distance);
}

.fragrance_lead_img {
  width: 100%;
  height: 100%;
}
.fragrance_lead_img img {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;

     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}

.fragrance_lead_txt {
  position: absolute;
  top: min(12.8vw, 64px);
  left: min(8vw, 40px);
  width: min(13.8666666667vw, 69.3333333333px);
}
.fragrance_lead_txt img {
  width: 100%;
}

.fragrance {
  position: relative;
  padding: min(21.3333333333vw, 106.6666666667px) min(6.4vw, 32px) min(21.3333333333vw, 106.6666666667px);
}

.fragrance_ttl {
  text-align: center;
}
.fragrance_ttl > p {
  letter-spacing: 0.1em;
  font-size: min(4.2666666667vw, 21.3333333333px);
  font-weight: 500;
  line-height: 1.5;
}
.fragrance_ttl > h3 {
  font-size: min(6.4vw, 32px);
  font-weight: 500;
  line-height: 1.5;

  margin-block-start: min(1.0666666667vw, 5.3333333333px);
}

.fragrance_body {
  margin-block-start: min(6.4vw, 32px);
}
.fragrance_body > p {
  text-align: center;
  font-size: min(3.7333333333vw, 18.6666666667px);
  font-weight: 500;
  line-height: 2;

  margin-block-start: min(6.4vw, 32px);
}

.fragrance_img {
  width: 100%;
  height: auto;
}

.howto {
  position: relative;
  z-index: var(--z-index-container);
  padding: min(30.6666666667vw, 153.3333333333px) min(6.4vw, 32px) min(21.3333333333vw, 106.6666666667px);
  background-color: var(--color-bg-beige);
}

.howto_lead {
  display: block;
  position: relative;
  text-align: center;
}
.howto_lead > p {
  letter-spacing: 0.1em;
  font-size: min(4.2666666667vw, 21.3333333333px);
  font-weight: 500;
  line-height: 1.5;
}
.howto_lead > h3 {
  font-size: min(6.4vw, 32px);
  font-weight: 500;
  line-height: 1.5;

  margin-block-start: min(1.0666666667vw, 5.3333333333px);
}

.howto_lead_deco {
  position: absolute;
  z-index: -1;
  right: 22%;
  bottom: 0;
  width: min(28.5333333333vw, 142.6666666667px);
  height: min(28.5333333333vw, 142.6666666667px);
  background-image: url("/teasers/vie_whip_foam_2026/assets/img/ttl_deco.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  translate: 50% 0;
}

.howto_contents {
  padding: min(4.2666666667vw, 21.3333333333px);
  border-radius: min(1.0666666667vw, 5.3333333333px);
  background-color: color-mix(in srgb, var(--color-bg-cream) 70%, transparent 30%);

  margin-block-start: min(6.4vw, 32px);
}

.howto_slide_cont {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.howto_slide_cont dt {
  margin-top: min(4vw, 20px);
  padding: min(0.2666666667vw, 1.3333333333px) min(0.5333333333vw, 2.6666666667px) min(0.2666666667vw, 1.3333333333px);
  border: 1px solid var(--color-font);
  border-radius: min(266.4vw, 1332px);
  max-width: min(18.4vw, 92px);
  text-align: center;
  letter-spacing: 0.1em;
  font-size: min(2.6666666667vw, 13.3333333333px);
  font-weight: 500;
  line-height: 1.5;

  margin-inline: auto;
}
.howto_slide_cont dd {
  min-height: min(20.2666666667vw, 101.3333333333px);
  text-align: center;
  font-size: min(3.7333333333vw, 18.6666666667px);
  font-weight: 500;
  line-height: 1.8;

  margin-block-start: min(2.1333333333vw, 10.6666666667px);
  margin-inline: auto;
}

.howto_slide_img {
  overflow: hidden;
  border-radius: min(1.0666666667vw, 5.3333333333px);
  width: 100%;
}

.howto_mov {
  margin-top: min(10.6666666667vw, 53.3333333333px);
}
.howto_mov button {
  overflow: hidden;
  position: relative;
  border: min(0.2666666667vw, 1.3333333333px) solid #ece7da;
  border-radius: min(1.0666666667vw, 5.3333333333px);
  width: 100%;
}
.howto_mov button::before {
  content: "";
  opacity: 0.3;
  position: absolute;
  background: linear-gradient(to bottom, transparent 0%, var(--color-bg-black) 100%);

  inset: 0;
}

.howto_mov_thumb img {
  position: relative;
  z-index: -1;
  width: 100%;
  height: auto;
}

.howto_mov_txt {
  position: absolute;
  bottom: min(3.2vw, 16px);
  left: min(4vw, 20px);
  letter-spacing: 0.1em;
  color: var(--color-font-white);
  font-size: min(4.2666666667vw, 21.3333333333px);
  line-height: 1.5;
}

.howto_mov_btn {
  display: flex;
  align-items: center;
  position: absolute;
  right: min(4.5333333333vw, 22.6666666667px);
  bottom: min(2.9333333333vw, 14.6666666667px);
  padding: min(1.8666666667vw, 9.3333333333px) min(4vw, 20px) min(1.6vw, 8px) min(4.2666666667vw, 21.3333333333px);
  border: 1px solid var(--color-font-white);
  border-radius: min(266.4vw, 1332px);
  letter-spacing: 0.1em;
  color: var(--color-font-white);
  font-size: min(2.6666666667vw, 13.3333333333px);
  font-weight: 300;
  line-height: 1.5;

  gap: min(2.1333333333vw, 10.6666666667px);
}
.howto_mov_btn::after {
  content: "";
  display: block;
  width: min(2.1333333333vw, 10.6666666667px);
  height: min(2.1333333333vw, 10.6666666667px);
  background-color: var(--color-font-white);

  -webkit-mask-image: url("/teasers/vie_whip_foam_2026/assets/img/icon_arrow.svg");

          mask-image: url("/teasers/vie_whip_foam_2026/assets/img/icon_arrow.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: cover;
          mask-size: cover;
}

.howto_mov button {
  --_ease-change: cubic-bezier(0.39, 0.575, 0.565, 1);
  --_ease-move: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.howto_mov button::before {
  transition: opacity 0.2s var(--_ease-change);
}
.howto_mov button .howto_mov_thumb img {
  transition: transform 0.2s var(--_ease-change);
}
.howto_mov button .howto_mov_btn::after {
  transition: transform 0.2s var(--_ease-move);
}
@media (hover: hover) and (pointer: fine) {
  .howto_mov button:where(:-moz-any-link, :enabled, summary):hover::before {
    opacity: 0.4;
    -moz-transition: opacity 0.3s var(--_ease-change);
    transition: opacity 0.3s var(--_ease-change);
  }
  .howto_mov button:where(:any-link, :enabled, summary):hover::before {
    opacity: 0.4;
    transition: opacity 0.3s var(--_ease-change);
  }
  .howto_mov button:where(:-moz-any-link, :enabled, summary):hover .howto_mov_thumb img {
    -moz-transition: transform 0.3s var(--_ease-change);
    transition: transform 0.3s var(--_ease-change);
    transform: scale(1.03);
  }
  .howto_mov button:where(:any-link, :enabled, summary):hover .howto_mov_thumb img {
    transition: transform 0.3s var(--_ease-change);
    transform: scale(1.03);
  }
  .howto_mov button:where(:-moz-any-link, :enabled, summary):hover .howto_mov_btn::after {
    -moz-transition: transform 0.3s var(--_ease-move);
    transition: transform 0.3s var(--_ease-move);
    transform: translateX(0.25rem);
  }
  .howto_mov button:where(:any-link, :enabled, summary):hover .howto_mov_btn::after {
    transition: transform 0.3s var(--_ease-move);
    transform: translateX(0.25rem);
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .howto_mov button.is-touched::before {
    opacity: 0.4;
    transition: opacity 0.3s var(--_ease-change);
  }
  .howto_mov button.is-touched .howto_mov_thumb img {
    transition: transform 0.3s var(--_ease-change);
    transform: scale(1.03);
  }
  .howto_mov button.is-touched .howto_mov_btn::after {
    transition: transform 0.3s var(--_ease-move);
    transform: translateX(0.25rem);
  }
}

.voice {
  overflow: clip;
  position: relative;
  z-index: var(--z-index-container);
}

.voice_inner {
  position: relative;
  color: var(--color-font-black);

  padding-block: min(21.3333333333vw, 106.6666666667px) min(23.4666666667vw, 117.3333333333px);
}

.voice_ttl {
  text-align: center;
}
.voice_ttl > p {
  letter-spacing: 0.1em;
  font-size: min(4.2666666667vw, 21.3333333333px);
  font-weight: 500;
  line-height: 1.5;
}
.voice_ttl > h3 {
  font-size: min(6.4vw, 32px);
  font-weight: 500;
  line-height: 1.5;

  margin-block-start: min(1.0666666667vw, 5.3333333333px);
}

.voice_contents {
  margin-block-start: min(6.4vw, 32px);
}

.voice_track {
  overflow: visible !important;
}

.voice_list {
  align-items: stretch;
}

.voice_list_item {
  display: grid;
  padding: min(4.2666666667vw, 21.3333333333px) min(3.2vw, 16px) min(8.2666666667vw, 41.3333333333px) min(4.2666666667vw, 21.3333333333px);
  border-radius: min(1.0666666667vw, 5.3333333333px);
  width: min(59.4666666667vw, 297.3333333333px);
  height: auto;
  background-color: var(--color-bg-cream-dark);

  grid-template-rows: auto 1fr auto;
}

.voice_scrollbar {
  position: relative;
  border-radius: 100vmax;
  width: min(21.3333333333vw, 106.6666666667px);
  height: min(0.5333333333vw, 2.6666666667px);
  cursor: pointer;
  background-color: color-mix(in srgb, var(--color-bg-stone) 20%, transparent);

  margin-block-start: min(3.7333333333vw, 18.6666666667px);
  margin-inline-start: min(6.4vw, 32px);
}

.voice_scrollbar_thumb {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  border: 0;
  border-radius: 100vmax;
  height: 100%;
  min-height: 0;
  cursor: grab;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background-color: var(--color-bg-stone);

  touch-action: none;
}
.voice_scrollbar_thumb:active {
  cursor: grabbing;
}
.voice_scrollbar_thumb.is-dragging {
  transition: none;
}

.voice_list_num {
  letter-spacing: 0.1em;
  font-size: min(3.2vw, 16px);
  font-weight: 500;
  line-height: 1.5;
}

.voice_list_txt {
  letter-spacing: 0.05em;
  font-size: min(3.7333333333vw, 18.6666666667px);
  font-weight: 500;
  line-height: 1.8;

  margin-block-start: min(6.4vw, 32px);
}

.voice_note {
  margin: min(2.1333333333vw, 10.6666666667px) 0 0 min(6.4vw, 32px);
}

.product_03 {
  position: relative;
  z-index: var(--z-index-container);
  padding: min(6.4vw, 32px) min(6.4vw, 32px) min(10.6666666667vw, 53.3333333333px) min(6.4vw, 32px);
  color: var(--color-font-black);
}

.news {
  position: relative;
  z-index: var(--z-index-container);
  padding: 0 min(6.4vw, 32px) min(21.3333333333vw, 106.6666666667px);
  color: var(--color-font-black);
}

.news_ttl > h3 {
  letter-spacing: 0.1em;
  font-size: min(4.2666666667vw, 21.3333333333px);
  font-weight: 500;
  line-height: 1.5;
}

.news_item {
  border-bottom: 1px solid color-mix(in srgb, var(--color-stone) 25%, transparent);
}

.news_item_btn {
  display: block;
  position: relative;
  width: 100%;
  cursor: pointer;
  text-align: left;

  padding-block: min(4.2666666667vw, 21.3333333333px);
}

.news_item_time {
  display: block;
  letter-spacing: 0.1em;
  font-family: var(--font-family-avenir);
  font-size: min(3.2vw, 16px);
  font-weight: 300;
  line-height: 1.5;
}

.news_item_ttl {
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.05em;
  font-size: min(3.7333333333vw, 18.6666666667px);
  font-weight: 500;
  line-height: 1.5;

  gap: min(5.3333333333vw, 26.6666666667px);
  padding-inline-end: min(5.3333333333vw, 26.6666666667px);
}
.news_item_ttl > span {
  flex-shrink: 0;
  position: relative;
  width: min(3.4666666667vw, 17.3333333333px);
  height: min(3.4666666667vw, 17.3333333333px);

  margin-block-start: min(0.8vw, 4px);
}
.news_item_ttl > span::before,
.news_item_ttl > span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1px;
  background-color: color-mix(in srgb, currentColor 50%, transparent);

  translate: -50% -50%;
}
.news_item_ttl > span::after {
  rotate: 90deg;
}

.news_item_btn {
  --_ease-change: cubic-bezier(0.39, 0.575, 0.565, 1);
  --_ease-move: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.news_item_btn .news_item_ttl > span::after {
  transition: rotate 0.3s var(--_ease-move);
}
.bl_accordion.is-open .news_item_btn .news_item_ttl > span::after {
  transition: rotate 0.3s var(--_ease-move);

  rotate: 0deg;
}

.news_desc {
  padding-block: min(2.1333333333vw, 10.6666666667px) min(6.4vw, 32px);
}
.news_desc > :first-child {
  margin-block-start: 0;
}

.news_desc_img {
  width: 100%;

  margin-block-start: min(6.4vw, 32px);
}
.news_desc_img + .news_desc_ttl,
.news_desc_img + .news_desc_txt {
  margin-block-start: min(6.4vw, 32px);
}

.news_desc_ttl {
  letter-spacing: 0.05em;
  font-family: var(--font-family-gothic);
  font-size: min(3.7333333333vw, 18.6666666667px);
  font-weight: 300;
  line-height: 1.5;
}
.news_desc_ttl > span {
  font-size: min(3.2vw, 16px);
}
.news_desc_ttl + .news_desc_txt {
  margin-block-start: min(2.1333333333vw, 10.6666666667px);
}

.news_desc_txt {
  letter-spacing: 0.05em;
  font-size: min(3.7333333333vw, 18.6666666667px);
  font-weight: 500;
  line-height: 1.8;
}
.news_desc_txt + .news_desc_txt {
  margin-block-start: min(0.8vw, 4px);
}

.news_desc_btn {
  margin-block-start: min(6.4vw, 32px);
}

.serum {
  position: relative;
  z-index: var(--z-index-container);
  padding: min(6.4vw, 32px) min(6.4vw, 32px) min(21.3333333333vw, 106.6666666667px);
}

.serum_img {
  width: 100%;
}

.serum_txt {
  color: var(--color-font-black);
  font-size: min(3.7333333333vw, 18.6666666667px);
  font-weight: 500;
  line-height: 1.7;

  margin-block-start: min(6.4vw, 32px);
}

.serum_btn {
  margin-block-start: min(8.5333333333vw, 42.6666666667px);
}

.about {
  position: relative;
  z-index: var(--z-index-container);
  padding: min(4.2666666667vw, 21.3333333333px) min(6.4vw, 32px) min(21.3333333333vw, 106.6666666667px);
  color: var(--color-font-black);
}

.about_img {
  width: 100%;
}

.about_ttl {
  font-size: min(5.3333333333vw, 26.6666666667px);
  font-weight: 500;
  line-height: 1.5;

  margin-block-start: min(8.8vw, 44px);
}

.about_txt {
  font-size: min(3.7333333333vw, 18.6666666667px);
  font-weight: 500;
  line-height: 2;

  margin-block-start: min(6.4vw, 32px);
}
.about_txt span {
  display: block;

  margin-block-start: min(2.1333333333vw, 10.6666666667px);
}

.about_btn {
  margin-block-start: min(6.4vw, 32px);
}

.page_bg {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background-image: url("/teasers/vie_whip_foam_2026/assets/img/bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}