/*
* top.css
*
*/
.un_feature {
  position: relative;
  z-index: var(--srk-balancing-z_index-base);
  height: 100lvh;
}

.un_feature_section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.un_feature_section:nth-of-type(1) {
  z-index: calc(10 - 1);
}
.un_feature_section:nth-of-type(2) {
  z-index: calc(10 - 2);
}
.un_feature_section:nth-of-type(3) {
  z-index: calc(10 - 3);
}
.un_feature_section:nth-of-type(4) {
  z-index: calc(10 - 4);
}
.un_feature_section:nth-of-type(5) {
  z-index: calc(10 - 5);
}
.un_feature_section:nth-of-type(6) {
  z-index: calc(10 - 6);
}
.un_feature_section:nth-of-type(7) {
  z-index: calc(10 - 7);
}
.un_feature_section:nth-of-type(8) {
  z-index: calc(10 - 8);
}
.un_feature_section:nth-of-type(9) {
  z-index: calc(10 - 9);
}

.un_feature_section_inner {
  position: relative;
  height: 100%;
}
.un_feature_section:nth-of-type(1) .un_feature_section_inner {
  background: url(/special/basic_milk_2026/assets/img/bg_feature_01.webp) no-repeat center/calc(100% + 2px) auto;
}
@media (max-aspect-ratio: 375/812) {
  .un_feature_section:nth-of-type(1) .un_feature_section_inner {
    background-size: cover;
  }
}
@media (min-width: 768px) and (min-height: 1083px) {
  .un_feature_section:nth-of-type(1) .un_feature_section_inner {
    background-size: cover;
  }
}
.un_feature_section:nth-of-type(2) .un_feature_section_inner {
  background: url(/special/basic_milk_2026/assets/img/bg_feature_02.webp) no-repeat center/calc(100% + 2px) auto;
}
@media (max-aspect-ratio: 375/812) {
  .un_feature_section:nth-of-type(2) .un_feature_section_inner {
    background-size: cover;
  }
}
@media (min-width: 768px) and (min-height: 1083px) {
  .un_feature_section:nth-of-type(2) .un_feature_section_inner {
    background-size: cover;
  }
}
.un_feature_section:nth-of-type(3) .un_feature_section_inner {
  background: url(/special/basic_milk_2026/assets/img/bg_feature_03.webp) no-repeat center/calc(100% + 2px) auto;
}
@media (max-aspect-ratio: 375/812) {
  .un_feature_section:nth-of-type(3) .un_feature_section_inner {
    background-size: cover;
  }
}
@media (min-width: 768px) and (min-height: 1083px) {
  .un_feature_section:nth-of-type(3) .un_feature_section_inner {
    background-size: cover;
  }
}
.un_feature_section:nth-of-type(4) .un_feature_section_inner {
  background: url(/special/basic_milk_2026/assets/img/bg_feature_04.webp) no-repeat center/calc(100% + 2px) auto;
}
@media (max-aspect-ratio: 375/812) {
  .un_feature_section:nth-of-type(4) .un_feature_section_inner {
    background-size: cover;
  }
}
@media (min-width: 768px) and (min-height: 1083px) {
  .un_feature_section:nth-of-type(4) .un_feature_section_inner {
    background-size: cover;
  }
}
.un_feature_section:nth-of-type(5) .un_feature_section_inner {
  background: url(/special/basic_milk_2026/assets/img/bg_feature_05.webp) no-repeat center/calc(100% + 2px) auto;
}
@media (max-aspect-ratio: 375/812) {
  .un_feature_section:nth-of-type(5) .un_feature_section_inner {
    background-size: cover;
  }
}
@media (min-width: 768px) and (min-height: 1083px) {
  .un_feature_section:nth-of-type(5) .un_feature_section_inner {
    background-size: cover;
  }
}
.un_feature_section:nth-of-type(6) .un_feature_section_inner {
  background: url(/special/basic_milk_2026/assets/img/bg_feature_06.webp) no-repeat center/calc(100% + 2px) auto;
}
@media (max-aspect-ratio: 375/812) {
  .un_feature_section:nth-of-type(6) .un_feature_section_inner {
    background-size: cover;
  }
}
@media (min-width: 768px) and (min-height: 1083px) {
  .un_feature_section:nth-of-type(6) .un_feature_section_inner {
    background-size: cover;
  }
}
.un_feature_section:nth-of-type(7) .un_feature_section_inner {
  background: url(/special/basic_milk_2026/assets/img/bg_feature_07.webp) no-repeat center/calc(100% + 2px) auto;
}
@media (max-aspect-ratio: 375/812) {
  .un_feature_section:nth-of-type(7) .un_feature_section_inner {
    background-size: cover;
  }
}
@media (min-width: 768px) and (min-height: 1083px) {
  .un_feature_section:nth-of-type(7) .un_feature_section_inner {
    background-size: cover;
  }
}
.un_feature_section:nth-of-type(8) .un_feature_section_inner {
  background: url(/special/basic_milk_2026/assets/img/bg_feature_08.webp) no-repeat center/calc(100% + 2px) auto;
}
@media (max-aspect-ratio: 375/812) {
  .un_feature_section:nth-of-type(8) .un_feature_section_inner {
    background-size: cover;
  }
}
@media (min-width: 768px) and (min-height: 1083px) {
  .un_feature_section:nth-of-type(8) .un_feature_section_inner {
    background-size: cover;
  }
}
.un_feature_section:nth-of-type(9) .un_feature_section_inner {
  background: url(/special/basic_milk_2026/assets/img/bg_feature_09.webp) no-repeat center/calc(100% + 2px) auto;
}
@media (max-aspect-ratio: 375/812) {
  .un_feature_section:nth-of-type(9) .un_feature_section_inner {
    background-size: cover;
  }
}
@media (min-width: 768px) and (min-height: 1083px) {
  .un_feature_section:nth-of-type(9) .un_feature_section_inner {
    background-size: cover;
  }
}

.un_feature_section_contWrapper {
  position: relative;

  min-block-size: 100dvb;
}

.un_feature_section_cont {
  position: absolute;
  bottom: 9.8dvh;
  width: 100%;

  padding-inline: min(6.4vw, 32px);
}

.un_feature_section_ttl-en {
  margin-block-end: min(4.2666666667vw, 21.3333333333px);
}

.un_feature_section_heading {
  display: flex;
  flex-direction: column-reverse;

  row-gap: min(2.1333333333vw, 10.6666666667px);
}

.un_feature_section_ttl {
  letter-spacing: 0.04em;
  font-size: min(6.9333333333vw, 34.6666666667px);
  line-height: 1.5;
}

.un_feature_section_btn {
  margin-block-start: min(10.6666666667vw, 53.3333333333px);
}

.un_message {
  position: relative;
  z-index: var(--srk-balancing-z_index-base);
  height: max(100dvh, min(186.6666666667vw, 933.3333333333px));
}
.un_message.un_message__2 {
  background-color: var(--srk-balancing-color-red-light);
}
.un_message.un_message__3 {
  height: auto;
}

.un_message_inner {
  position: relative;
  height: 100%;
}
.un_message__1 .un_message_inner {
  background: url(/special/basic_milk_2026/assets/img/message_bg_img_01.webp) no-repeat center/cover;
}
.un_message__3 .un_message_inner {
  background: url(/special/basic_milk_2026/assets/img/message_bg_img_03.webp) no-repeat center/cover;

  aspect-ratio: 375/600;
}

.un_message_contWrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.un_message__2 .un_message_contWrapper {
  position: relative;
  bottom: auto;
}

.un_message_cont {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  width: 100%;

  padding-inline: min(4.2666666667vw, 21.3333333333px);
}
.un_message__1 .un_message_cont {
  padding-bottom: 7.88vh;

  gap: min(4.2666666667vw, 21.3333333333px);
}
.un_message__1 .un_message_cont::before {
  content: "";
  display: block;
  opacity: 0.3;
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, transparent 0%, var(--srk-balancing-color-black) 100%);

  aspect-ratio: 375/284;
}
.un_message__2 .un_message_cont {
  position: relative;
  padding-bottom: 9.85vh;
  text-align: center;

  margin-block-start: max(-14.9333333333vw, -74.6666666667px);
}
.un_message__2 .un_message_cont::before {
  content: "";
  display: block;
  position: absolute;
  top: max(-20.5333333333vw, -102.6666666667px);
  left: 0;
  width: 100%;
  height: min(35.7333333333vw, 178.6666666667px);
  background: linear-gradient(to bottom, transparent 0%, var(--srk-balancing-color-red-light) 100%);
}
.un_message__3 .un_message_cont {
  padding-bottom: 7.88vh;
}
.un_message__3 .un_message_cont::before {
  content: "";
  display: block;
  opacity: 0.3;
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, transparent 0%, var(--srk-balancing-color-black) 100%);

  aspect-ratio: 375/240;
}

.un_message__2 .un_message_ttl {
  margin-block-end: 2rem;
}

.un_message_ttl-lg {
  letter-spacing: 0;
}

.un_message_txt {
  letter-spacing: 0.05em;
}
.un_message_txt + .un_message_txt {
  margin-block-start: 1.7em;
}

.un_message_img {
  position: relative;
  height: 68.8dvh;
  max-height: 746px;
}
.un_message_img img {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;

     object-fit: cover;
}

.un_product_inner {
  position: relative;
  z-index: var(--srk-balancing-z_index-base);
  background: url(/special/basic_milk_2026/assets/img/product_bg_img.webp) no-repeat center/cover;

  padding-block: min(21.3333333333vw, 106.6666666667px) min(17.0666666667vw, 85.3333333333px);
}

.un_product_heading {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;

  row-gap: 0.5rem;
  margin-block-end: min(6.4vw, 32px);
}

.un_product_ttl {
  font-weight: 400;
}

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

.un_product_cont {
  padding-inline: min(4.2666666667vw, 21.3333333333px);
}

.un_product_price {
  letter-spacing: 0.1em;

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

.un_product_price-unit {
  font-size: min(2.6666666667vw, 13.3333333333px);
}

.un_product_descList {
  display: grid;

  gap: min(2.1333333333vw, 10.6666666667px) min(1.0666666667vw, 5.3333333333px);
  grid-template-columns: 10ch 1fr;
  margin-block-start: min(5.6vw, 28px);
}

.un_product_desc {
  display: grid;
  letter-spacing: 0.1em;
  font-size: min(3.2vw, 16px);
  line-height: 1.6;

  grid-template-columns: subgrid;
  grid-column: span 2;
}

.un_products-about_img {
  width: 100%;
}
.un_products-about_img img {
  width: 100%;
}

.un_products-about_heading {
  display: flex;
  flex-direction: column;
  text-align: center;

  row-gap: min(1.6vw, 8px);
  padding-block: min(6.4vw, 32px) min(10.6666666667vw, 53.3333333333px);
}

.un_products-about_ttl {
  font-weight: 400;
}

.un_products-about_cont {
  padding: min(10.6666666667vw, 53.3333333333px) min(4.2666666667vw, 21.3333333333px) min(32vw, 160px);
}

.un_products-about_cont_txt {
  text-align: center;
  letter-spacing: 0.05em;
}

.un_products-about_cont_img {
  margin-block-start: min(4.2666666667vw, 21.3333333333px);
}
.un_products-about_cont_img img {
  width: 100%;
}

/* --------------------------------
  top
-------------------------------- */
.un_page_mainArea {
  overflow-x: clip;
  width: 100%;
  background-color: var(--srk-balancing-color-red);
  box-shadow: 0 0 min(3.2vw, 16px) color-mix(in srgb, var(--srk-holiday-gift-bg-base), transparent 15%);
}
@media (min-width: 768px) {
  .un_page_mainArea {
    width: calc(min(100vw, 500px) + 2px);

    margin-inline: auto;
    clip-path: inset(0 1px);
  }
}

.un_page_top {
  position: relative;
  z-index: var(--srk-holiday-gift-z_index-container);
}

.un_page_bg {
  display: none;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
}
@media (min-width: 768px) {
  .un_page_bg {
    display: grid;
  }
}

.un_page_bgImg {
  position: relative;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease;

  grid-area: 1/-1;
  mix-blend-mode: plus-lighter;
  will-change: opacity;
}
.un_page_bgImg img {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;

     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.un_page_bgImg.is-hidden {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.un_kv {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
}

.un_kv_mv {
  width: 100%;
  height: 100%;
}
.un_kv_mv img,
.un_kv_mv video {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;

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

.un_kv_logo {
  position: absolute;
  top: min(6.4vw, 32px);
  left: 0;
  width: min(31.7333333333vw, 158.6666666667px);
}

.un_kv_txtWrapper {
  position: absolute;
  z-index: var(--srk-balancing-z_index-container-high);
  top: 0;
  width: 100%;
  height: calc(100lvh + min(37.3333333333vw, 186.6666666667px));
}

.un_kv_txt {
  position: sticky;
  top: calc(100dvh - min(29.8666666667vw, 149.3333333333px));

  padding-inline: min(6.4vw, 32px);
}
@media (min-width: 768px) {
  .un_kv_txt {
    margin-bottom: 0;
  }
}

.un_concept {
  position: relative;
  z-index: var(--srk-balancing-z_index-container);
}

.un_concept_bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--srk-balancing-color-red);
  pointer-events: none;
}

.un_concept_section {
  padding-block: min(53.3333333333vw, 266.6666666667px) min(56vw, 280px);
}

.un_concept_section_inner > p:not(:first-child) {
  margin-block-start: min(12.8vw, 64px);
}

.un_concept_txt-bottom {
  margin-block-start: min(12.8vw, 64px);
}
.un_concept_txt-bottom p:last-child {
  margin-block-start: min(2.1333333333vw, 10.6666666667px);
}

.un_concept_mv {
  margin-block-start: min(4vw, 20px);
}

.un_concept_mv_btn {
  display: block;
  position: relative;
  width: 100%;
  cursor: pointer;

  --_ease-change: cubic-bezier(0.39, 0.575, 0.565, 1);
  --_ease-move: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.un_concept_mv_btn .bl_moviePlayBtn_bg {
  transition: scale 0.35s var(--_ease-move);
}
@media (hover: hover) and (pointer: fine) {
  .un_concept_mv_btn:where(:-moz-any-link, :enabled, summary):hover .bl_moviePlayBtn_bg {
    -moz-transition: scale 0.45s var(--_ease-move);
    transition: scale 0.45s var(--_ease-move);

    scale: 1.03;
  }
  .un_concept_mv_btn:where(:any-link, :enabled, summary):hover .bl_moviePlayBtn_bg {
    transition: scale 0.45s var(--_ease-move);

    scale: 1.03;
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .un_concept_mv_btn.is-touched .bl_moviePlayBtn_bg {
    transition: scale 0.45s var(--_ease-move);

    scale: 1.03;
  }
}

.un_concept_mv_thumb {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;

  aspect-ratio: 16/9;
}
.un_concept_mv_thumb::before {
  content: "";
  position: absolute;
  background-color: color-mix(in srgb, var(--srk-vie-liftcream-bg-black), transparent 30%);

  inset: 0;
}
.un_concept_mv_thumb img {
  width: 100%;
}

.un_concept_mv_icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;

  translate: -50% -50%;
}

.un_catch {
  position: relative;
  z-index: var(--srk-balancing-z_index-container);
  height: 100lvh;
}
.un_catch hgroup {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;

  padding-block-start: min(8vw, 40px);
  translate: -50% -50%;
}
.un_catch hgroup h1 {
  white-space: nowrap;
  letter-spacing: 0.1em;
  font-size: min(5.3333333333vw, 26.6666666667px);
  font-weight: 400;
  line-height: 1.3;
}
.un_catch hgroup h1 span {
  font-size: min(9.8666666667vw, 49.3333333333px);
}
.un_catch hgroup p {
  letter-spacing: 0.1em;
  font-size: min(4.2666666667vw, 21.3333333333px);
  font-weight: 400;
  line-height: 1.3;

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

.un_catch_ttl {
  position: absolute;
  top: calc(50% + min(1.0666666667vw, 5.3333333333px));
  left: 50%;
  width: min(87.2vw, 436px);

  padding-block-start: min(10.6666666667vw, 53.3333333333px);
  translate: -50% -50%;
}
.un_catch_ttl img {
  width: 100%;
}

.un_catch_inner {
  position: relative;
  height: 100%;
}

.un_catch_imgBox {
  display: grid;
  position: relative;
  width: 100%;
  height: 100%;

  grid-template-rows: repeat(2, 1fr);
}
.un_catch_imgBox .un_catch_img {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.un_catch_imgBox .un_catch_img img {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;

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

.un_point {
  position: relative;
  z-index: var(--srk-balancing-z_index-container);
  height: 100lvh;
}

.un_point_inner {
  position: relative;
  height: 100%;
  background: url(/special/basic_milk_2026/assets/img/point_bg_img.webp) no-repeat center/cover;

  clip-path: inset(0 0);
}

.un_point_body {
  position: absolute;
  top: calc(50% + min(2.6666666667vw, 13.3333333333px));
  left: 50%;
  width: min(109.6vw, 548px);
  height: min(109.6vw, 548px);
  text-align: center;

  translate: -50% -50%;
  clip-path: inset(max(-16vw, -80px) 0);
}
.un_point_body svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(109.6vw, 548px);
  height: min(109.6vw, 548px);

  aspect-ratio: 1;
  translate: -50% -50%;
  rotate: -170deg;
}

.un_point_circle_txt {
  display: grid;
  position: absolute;
  top: max(-1.0666666667vw, -5.3333333333px);
  width: 100%;

  grid-template-columns: repeat(4, 1fr);
  padding-inline: min(6.1333333333vw, 30.6666666667px);
}
.un_point_circle_txt p {
  display: inline;
  position: relative;
  letter-spacing: 0.1em;
  font-size: min(4.2666666667vw, 21.3333333333px);
  font-weight: 400;
  line-height: 1.4;

  margin-block-start: auto;
}
.un_point_circle_txt p::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: min(1.8666666667vw, 9.3333333333px);
  height: min(1.8666666667vw, 9.3333333333px);
  background-color: var(--srk-balancing-color-white);
}
.un_point_circle_txt p:nth-child(1) {
  translate: max(-0.5333333333vw, -2.6666666667px) min(1.6vw, 8px);
  margin-inline-end: auto;
}
.un_point_circle_txt p:nth-child(1)::before {
  right: max(-0.2666666667vw, -1.3333333333px);
  bottom: max(-2.1333333333vw, -10.6666666667px);
}
.un_point_circle_txt p:nth-child(4) {
  translate: min(0.5333333333vw, 2.6666666667px) min(1.6vw, 8px);
  margin-inline-start: auto;
}
.un_point_circle_txt p:nth-child(4)::before {
  bottom: max(-2.1333333333vw, -10.6666666667px);
  left: max(-0.2666666667vw, -1.3333333333px);
}
.un_point_circle_txt p:nth-child(2) {
  translate: max(-2.1333333333vw, -10.6666666667px) max(-11.0666666667vw, -55.3333333333px);
}
@-moz-document url-prefix() {
  .un_point_circle_txt p:nth-child(2) {
    translate: max(-2.1333333333vw, -10.6666666667px) max(-11.2vw, -56px);
  }
}
.un_point_circle_txt p:nth-child(3) {
  translate: min(2.1333333333vw, 10.6666666667px) max(-11.0666666667vw, -55.3333333333px);
}
@-moz-document url-prefix() {
  .un_point_circle_txt p:nth-child(3) {
    translate: max(-2.1333333333vw, -10.6666666667px) max(-11.2vw, -56px);
  }
}
.un_point_circle_txt p:nth-child(2)::before,
.un_point_circle_txt p:nth-child(3)::before {
  bottom: max(-3.4666666667vw, -17.3333333333px);
  left: 50%;

  translate: -50% 0;
}

.un_ingredients_graph_txtTap {
  position: relative;
  letter-spacing: 0.05em;
  font-size: min(2.6666666667vw, 13.3333333333px);
  font-weight: 400;

  margin-block-start: min(2.1333333333vw, 10.6666666667px);
}
.un_ingredients_graph_txtTap::after {
  content: "";
  display: block;
  position: absolute;
  bottom: max(-1.6vw, -8px);
  width: 100%;
  height: 1px;
  background-color: var(--srk-balancing-color-white);
}
[data-ingredients-txt=top] .un_ingredients_graph_txtTap {
  display: none;
}

.un_point_txtBlock {
  position: relative;
  top: 50%;
  left: 50%;

  translate: -50% -50%;
}

.un_point_txt {
  font-size: min(3.4666666667vw, 17.3333333333px);
  line-height: 2;

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

.un_point_caption {
  margin-block-start: min(3.7333333333vw, 18.6666666667px);
}

/* --------------------------------
  ingredients
-------------------------------- */
.un_ingredients {
  position: relative;
  width: 100%;
}

.un_ingredients_stickyWrapper {
  width: 100%;
  height: max(100lvh, min(178.6666666667vw, 893.3333333333px));
}

.un_ingredients_bg {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.un_ingredients_bgImg {
  margin: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.35s ease;

  grid-area: 1/-1;
}
.un_ingredients_bgImg.is-hidden {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.un_ingredients_bgImg img {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;

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

.un_ingredients_sparkle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.un_ingredients_inner {
  position: relative;

  padding-block: 7.39vh 4.92vh;
}

.un_ingredients_heading {
  display: grid;
  text-align: center;

  justify-items: center;
  row-gap: min(0.98vh, min(2.1333333333vw, 10.6666666667px));
}
.un_ingredients_heading h3 sup {
  font-size: min(1.72vh, min(3.7333333333vw, 18.6666666667px));
}

.un_ingredients_ttl {
  font-size: clamp(min(5.6vw, 28px), 2.95vh, min(6.4vw, 32px));
}

.un_ingredients_ttl-sub {
  font-size: clamp(min(3.2vw, 16px), 1.72vh, min(3.7333333333vw, 18.6666666667px));
}

.un_ingredients_graph {
  position: relative;
  width: min(40.27vh, min(87.2vw, 436px));

  margin-inline: auto;
  aspect-ratio: 1/1;
  margin-block-start: clamp(min(3.7333333333vw, 18.6666666667px), 1.97vh, min(4.2666666667vw, 21.3333333333px));
}

.un_ingredients_graph_img {
  position: relative;
  width: 100%;
  transform-origin: 50.15% 56.57%;
}
.un_ingredients_graph_img img {
  display: block;
  position: relative;
  width: 100%;
}

.un_ingredients_graph_txts {
  position: absolute;
  top: 0;
  left: 0;
  width: min(40.27vh, min(87.2vw, 436px));
  height: min(38.17vh, min(82.6666666667vw, 413.3333333333px));
}

.un_ingredients_graph_txt {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(21.18vh, min(45.8666666667vw, 229.3333333333px));
  height: min(21.18vh, min(45.8666666667vw, 229.3333333333px));
  transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-align: center;
  font-size: min(1.72vh, min(3.7333333333vw, 18.6666666667px));
}
.un_ingredients_graph_txt > span {
  margin-block-start: min(0.98vh, min(2.1333333333vw, 10.6666666667px));
}
.un_ingredients_graph_txt .el_txt-xs {
  font-size: min(1.23vh, min(2.6666666667vw, 13.3333333333px));
  line-height: 1.3;
}
.un_ingredients_graph_txt .el_txt-xl {
  font-size: min(2.95vh, min(6.4vw, 32px));
}
.un_ingredients_graph_txt[data-ingredients-trigger="1"][data-ingredients-txt=left],
.un_ingredients_graph_txt[data-ingredients-trigger="2"][data-ingredients-txt=left] {
  padding-right: min(0.98vh, min(2.1333333333vw, 10.6666666667px));
}
.un_ingredients_graph_txt[data-ingredients-trigger="1"][data-ingredients-txt=top] {
  padding-right: min(0.049vh, min(1.0666666667vw, 5.3333333333px));
}
.un_ingredients_graph_txt[data-ingredients-trigger="2"][data-ingredients-txt=top] {
  padding-left: min(0.12vh, min(0.2666666667vw, 1.3333333333px));
}
@media (hover: hover) and (pointer: fine) {
  .un_ingredients_graph_txt[data-ingredients-txt=left]:where(:-moz-any-link, :enabled, summary):hover span:not(.un_ingredients_graph_txtTap), .un_ingredients_graph_txt[data-ingredients-txt=left]:where(:-moz-any-link, :enabled, summary):hover span:not(.un_ingredients_graph_txtTap) {
    opacity: 1;
    -moz-transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .un_ingredients_graph_txt[data-ingredients-txt=left]:where(:any-link, :enabled, summary):hover span:not(.un_ingredients_graph_txtTap),
  .un_ingredients_graph_txt[data-ingredients-txt=left]:where(:any-link, :enabled, summary):hover span:not(.un_ingredients_graph_txtTap) {
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .un_ingredients_graph_txt[data-ingredients-txt=left].is-touched span:not(.un_ingredients_graph_txtTap),
  .un_ingredients_graph_txt[data-ingredients-txt=left].is-touched span:not(.un_ingredients_graph_txtTap) {
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}

[data-ingredients-txt=top] .un_ingredients_graph_txtMd {
  font-size: min(2.09vh, min(4.5333333333vw, 22.6666666667px));
}

.un_ingredients_graph_txt[data-ingredients-txt=top] {
  translate: -50% -95%;
}

.un_ingredients_graph_txt[data-ingredients-txt=left] {
  translate: -95% -15%;
}
.un_ingredients_graph_txt[data-ingredients-txt=left] span:not(.un_ingredients_graph_txtTap) {
  opacity: 0.5;
}
@media (hover: hover) and (pointer: fine) {
  .un_ingredients_graph_txt[data-ingredients-txt=left]:where(:-moz-any-link, :enabled, summary):hover span:not(.un_ingredients_graph_txtTap) {
    opacity: 1;
    -moz-transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .un_ingredients_graph_txt[data-ingredients-txt=left]:where(:any-link, :enabled, summary):hover span:not(.un_ingredients_graph_txtTap) {
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .un_ingredients_graph_txt[data-ingredients-txt=left].is-touched span:not(.un_ingredients_graph_txtTap) {
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}

.un_ingredients_graph_txt[data-ingredients-txt=right] {
  translate: -5% -15%;
}
.un_ingredients_graph_txt[data-ingredients-txt=right] span:not(.un_ingredients_graph_txtTap) {
  opacity: 0.5;
}
@media (hover: hover) and (pointer: fine) {
  .un_ingredients_graph_txt[data-ingredients-txt=right]:where(:-moz-any-link, :enabled, summary):hover span:not(.un_ingredients_graph_txtTap) {
    opacity: 1;
    -moz-transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .un_ingredients_graph_txt[data-ingredients-txt=right]:where(:any-link, :enabled, summary):hover span:not(.un_ingredients_graph_txtTap) {
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .un_ingredients_graph_txt[data-ingredients-txt=right].is-touched span:not(.un_ingredients_graph_txtTap) {
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}

.un_ingredients_contentWrapper {
  margin-block-start: clamp(min(3.7333333333vw, 18.6666666667px), 1.97vh, min(4.2666666667vw, 21.3333333333px));
}

.un_ingredients_content {
  display: block;
}
.un_ingredients_content[hidden] {
  display: none;
}
.un_ingredients_content p {
  font-size: clamp(min(3.2vw, 16px), 1.72vh, min(3.7333333333vw, 18.6666666667px));
}
.un_ingredients_content .el_txt-lg {
  letter-spacing: 0.05em;
  font-size: clamp(min(3.7333333333vw, 18.6666666667px), 1.97vh, min(4.2666666667vw, 21.3333333333px));
  line-height: 1.5;
}
.un_ingredients_content .el_txt-caption {
  font-size: min(min(2.1333333333vw, 10.6666666667px), 0.98vh, min(2.1333333333vw, 10.6666666667px));
}
.un_ingredients_content:first-child .un_ingredients_content_grid {
  display: grid;

  grid-template-columns: 1fr min(12.93vh, min(28vw, 140px));
  gap: min(1.48vh, min(3.2vw, 16px));
}
.un_ingredients_content:first-child .un_ingredients_content_img img {
  width: 105%;
  height: 105%;

  -o-object-fit: cover;

     object-fit: cover;
  -o-object-position: left 30% top 50%;
     object-position: left 30% top 50%;
}
.un_ingredients_content:first-child .un_ingredients_content_btn {
  margin-block-start: min(2.46vh, min(5.3333333333vw, 26.6666666667px));
}
.un_ingredients_content:first-child p:last-child {
  margin-block-start: min(0.98vh, min(2.1333333333vw, 10.6666666667px));
}
.un_ingredients_content:nth-child(2) p:nth-child(2) {
  margin-block-start: min(0.98vh, min(2.1333333333vw, 10.6666666667px));
}
.un_ingredients_content:nth-child(2) p:nth-child(3) {
  margin-block-start: min(0.98vh, min(2.1333333333vw, 10.6666666667px));
}
.un_ingredients_content:nth-child(3) p:nth-child(2) {
  margin-block-start: min(0.98vh, min(2.1333333333vw, 10.6666666667px));
}
.un_ingredients_content:nth-child(3) p:nth-child(3) {
  margin-block-start: min(0.98vh, min(2.1333333333vw, 10.6666666667px));
}

.un_ingredients_scrollTarget {
  display: block;
  position: relative;
  width: 100%;
  height: min(133.3333333333vw, 666.6666666667px);
  pointer-events: none;
}

.un_detail {
  position: relative;
  z-index: var(--srk-balancing-z_index-container);
  background-color: var(--srk-balancing-color-red);
}

.un_detail_imgBlock {
  display: flex;
  flex-direction: column;
  position: relative;

  gap: min(31.4666666667vw, 157.3333333333px);
}
.un_detail_imgBlock .un_detail_img:first-child {
  width: 100%;

  translate: 0 0.45rem;
}
.un_detail_imgBlock .un_detail_img:nth-child(2) {
  position: absolute;
  z-index: 1;
  top: min(99.4666666667vw, 497.3333333333px);
  right: 0;
  width: min(64.8vw, 324px);

  translate: 0 0.95rem;
}
.un_detail_imgBlock .un_detail_img:nth-child(3) {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: min(17.8666666667vw, 89.3333333333px);
  width: min(54.1333333333vw, 270.6666666667px);

  translate: 0 1.1rem;
}
.un_detail_imgBlock .un_detail_img:last-child {
  width: min(60.8vw, 304px);

  translate: 0 0.75rem;
}

.un_detail_inner {
  padding-block: min(32vw, 160px) min(29.0666666667vw, 145.3333333333px);
}

.un_detail_txtBlock_01 {
  display: grid;
  text-align: center;

  gap: min(8.5333333333vw, 42.6666666667px);
  margin-inline: max(-1.3333333333vw, -6.6666666667px);
}

.un_detail_mv {
  width: 100%;

  margin-block-start: min(4.2666666667vw, 21.3333333333px);
}
.un_detail_mv img,
.un_detail_mv video {
  width: 100%;
}

.un_detail_txtBlock_02 {
  text-align: center;

  margin-block-start: min(21.3333333333vw, 106.6666666667px);
}
.un_detail_txtBlock_02 p:first-child {
  font-size: min(4.8vw, 24px);
  line-height: 2;
}
.un_detail_txtBlock_02 p:nth-child(3) {
  display: flex;
  align-items: center;
  flex-direction: column;

  gap: min(10.6666666667vw, 53.3333333333px);
  padding-block-start: min(4.8vw, 24px);
}
.un_detail_txtBlock_02 p:nth-child(3)::before {
  content: "";
  display: block;
  width: min(0.2666666667vw, 1.3333333333px);
  height: min(21.3333333333vw, 106.6666666667px);
  background-color: var(--srk-balancing-color-white);
}

.un_detail_txtBlock_02_txt-lg {
  margin-block-end: min(1.0666666667vw, 5.3333333333px);
}

.un_detail_boxWrapper {
  display: grid;

  gap: min(2.4vw, 12px);
  grid-template-columns: repeat(2, 1fr);
  padding-block-start: min(4.2666666667vw, 21.3333333333px);
}

.un_detail_box {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: min(0.2666666667vw, 1.3333333333px) solid color-mix(in srgb, var(--srk-balancing-color-white) 60%, transparent 40%);
  text-align: center;

  padding-block: min(6.4vw, 32px) min(5.3333333333vw, 26.6666666667px);
  gap: min(4.2666666667vw, 21.3333333333px);
}
.un_detail_box span {
  position: relative;
  left: max(-0.8vw, -4px);
  width: min(2.1333333333vw, 10.6666666667px);
  height: min(2.1333333333vw, 10.6666666667px);
  background-image: url("/special/basic_milk_2026/assets/img//icon_arw.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  rotate: 90deg;
}
.un_detail_box p:last-of-type {
  font-size: min(3.2vw, 16px);
  line-height: 1.8;
}
.un_detail_box:last-child p:last-of-type {
  line-height: 1.1;
}

.un_detail_caption {
  padding-block-start: min(2.1333333333vw, 10.6666666667px);
}

/* --------------------------------
  bg
-------------------------------- */