/* //////////////////////////////////////////////////

Title : style.scss
For   : Page/feature/2025/250919_eva/

Created       : 2025-09-10
Last Modified : 2025-09-10

==========================================

Content

////////////////////////////////////////////////// */
/**
 * variables, layouts
 */
@font-face {
  font-family: "HelveticaNeue";
  src: url("../../public/fonts/HelveticaNeue.ttf") format("truetype");
}
@media screen and (max-width: 767px) {
  .lp{
    padding-bottom: 0;
  }
  .home-content.support-content{
    margin-block-start: 0;
  }
}
#UU250919eva {
  --rate: calc(100cqi / 750);
  --color-base: #000;
  --color-gray: #ccc;
  --color-theme: #e1c8fd;
  --font-primary: helvetica-neue-lt-pro, sans-serif;
  --font-secondary: "times-new-roman", sans-serif;
  --zindex-behind: -1;
  --zindex-base: 1;
  --zindex-overlay: 10;
  --zindex-float: 20;
}

#UU250919eva {
  color: var(--color-base);
}
#UU250919eva img,
#UU250919eva picture {
  display: var(--display, block);
}
#UU250919eva img,
#UU250919eva video,
#UU250919eva svg {
  width: 100%;
  height: auto;
}
#UU250919eva iframe {
  width: 100%;
  height: 100%;
}
#UU250919eva a {
  display: var(--display, inline-block);
}
#UU250919eva a:has(img) {
  --display: block;
}
#UU250919eva a.swiper-wrapper {
  --display: flex;
}
#UU250919eva * {
  box-sizing: border-box;
}
#UU250919eva button {
  padding: 0;
  background: inherit;
  border: none;
  outline: none;
}
#UU250919eva a:hover,
#UU250919eva a:hover img {
  opacity: 1;
}

.c-carousel-pager {
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-bottom: calc(21 * var(--rate));
  --swiper-pagination-top: var(--carousel-pager-top);
  position: var(--carousel-pager-position, absolute);
  right: var(--carousel-pager-right, 0) !important;
  left: var(--carousel-pager-left, 0) !important;
  display: flex;
  -moz-column-gap: calc(8 * var(--rate));
       column-gap: calc(8 * var(--rate));
  justify-content: center;
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  margin: auto;
  z-index: var(--zindex-overlay);
}
.c-carousel-pager__dots,
.c-carousel-pager .swiper-pagination-bullet {
  border: 1px solid var(--color-dots-modify, var(--color-gray));
  position: relative;
  display: block;
  width: calc(14 * var(--rate));
  height: calc(7 * var(--rate));
  padding: 0;
  border-radius: 0;
  outline: none;
  background: none;
  opacity: 1;
}
.c-carousel-pager__dots.is-active,
.c-carousel-pager .swiper-pagination-bullet.is-active {
  background-color: var(--color-dots-modify, var(--color-gray));
}
.c-carousel-pager__dots-active,
.c-carousel-pager .swiper-pagination-bullet-active {
  background-color: var(--color-dots-modify, var(--color-gray));
}

/**
 * layout
 */
.lp-underson {
  background-color: #E4E4E4;
}
.lp-underson__container {
  max-width: 750px;
  margin-inline: auto;
  container-type: inline-size;
}

/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lp {
    padding-bottom: 0;
  }
  .home-content.support-content {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
  a:hover {
    opacity: 1;
  }
}
/**
 * common
 */
.lp-underson__shell, .lp-underson__block, .lp-underson__styling {
  position: relative;
}
.lp-underson__shell-title {
  position: absolute;
  width: calc(43 * var(--rate));
  z-index: var(--zindex-overlay);
  pointer-events: none;
}
.lp-underson__shell-title[data-position=left] {
  top: calc(-99 * var(--rate));
  left: calc(69 * var(--rate));
}
.lp-underson__shell-title[data-position=right] {
  top: calc(-120 * var(--rate));
  right: calc(52 * var(--rate));
}
.lp-underson__text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: calc(458 * var(--rate));
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: auto;
  background-color: var(--color-theme);
  z-index: var(--zindex-overlay);
  font-family: var(--font-secondary);
  color: #000;
}
.lp-underson__text[data-text-position=top] {
  -webkit-padding-before: calc(35 * var(--rate));
          padding-block-start: calc(35 * var(--rate));
  -webkit-padding-after: calc(37 * var(--rate));
          padding-block-end: calc(37 * var(--rate));
  padding-inline: calc(27 * var(--rate));
  font-size: calc(22 * var(--rate));
  line-height: 1.75;
}
.lp-underson__text[data-text-position=bottom] {
  display: flex;
  flex-direction: column;
  /* aspect-ratio: 458/536; */
  width: calc(458 * var(--rate));
  height: calc(536 * var(--rate));
  -webkit-padding-before: calc(29 * var(--rate));
          padding-block-start: calc(29 * var(--rate));
  -webkit-padding-after: calc(22 * var(--rate));
          padding-block-end: calc(22 * var(--rate));
  padding-inline: calc(27 * var(--rate));
}
.lp-underson__text[data-text-position=bottom] span {
  letter-spacing: 0.01em;
}
.lp-underson__text[data-text-position=bottom] span:nth-child(1) {
  font-size: calc(14 * var(--rate));
  line-height: 1.2;
}
.lp-underson__text[data-text-position=bottom] span:nth-child(2) {
  -webkit-margin-before: auto;
          margin-block-start: auto;
  font-size: calc(15 * var(--rate));
  line-height: 1.4;
}
.lp-underson__heading {
  position: absolute;
  font-size: calc(15 * var(--rate));
  line-height: 1;
  font-family: var(--font-primary);
  font-weight: 400;
  z-index: var(--zindex-overlay);
}
.lp-underson__heading:has(img) {
  width: calc(258 * var(--rate));
}
.lp-underson__prices {
  position: absolute;
  display: flex;
  flex-direction: column;
  row-gap: var(--prices-gap, calc(25 * var(--rate)));
  font-size: calc(15 * var(--rate));
  line-height: 1.2;
  z-index: var(--zindex-overlay);
  font-family: var(--font-primary);
  font-weight: 400;
}

/**
 * header
 */
.lp-underson__header {
  -webkit-padding-before: calc(9 * var(--rate));
          padding-block-start: calc(9 * var(--rate));
  -webkit-padding-after: calc(278 * var(--rate));
          padding-block-end: calc(278 * var(--rate));
  padding-inline: calc(7 * var(--rate));
  background-color: var(--color-theme);
}
.lp-underson__header-brand-logo {
  width: calc(458 * var(--rate));
  -webkit-margin-before: calc(18 * var(--rate));
          margin-block-start: calc(18 * var(--rate));
  margin-inline: auto;
}

/**
 *  each contents
 */
.lp-underson__shell[data-styling=styling-002] .lp-underson__heading {
  top: calc(32 * var(--rate));
  right: calc(26 * var(--rate));
}
.lp-underson__shell[data-styling=styling-002] .lp-underson__prices {
  bottom: calc(32 * var(--rate));
  left: calc(27 * var(--rate));
}
.lp-underson__shell[data-styling=styling-003] .lp-underson__heading {
  top: calc(32 * var(--rate));
  right: calc(27 * var(--rate));
}
.lp-underson__shell[data-styling=styling-003] .lp-underson__prices {
  bottom: calc(32 * var(--rate));
  left: calc(27 * var(--rate));
}
.lp-underson__shell[data-styling=styling-004] .lp-underson__heading {
  top: calc(80 * var(--rate));
  left: calc(46 * var(--rate));
}
.lp-underson__shell[data-styling=styling-004] .swiper-slide[data-slide="1"] .lp-underson__prices {
  --prices-gap: calc(22 * var(--rate));
  bottom: calc(312 * var(--rate));
  left: calc(50 * var(--rate));
}
.lp-underson__shell[data-styling=styling-004] .swiper-slide[data-slide="2"] .lp-underson__prices {
  --prices-gap: calc(27 * var(--rate));
  top: calc(75 * var(--rate));
  right: calc(61 * var(--rate));
}
.lp-underson__shell[data-styling=styling-004] .swiper-slide[data-slide="3"] .lp-underson__prices {
  bottom: calc(75 * var(--rate));
  left: calc(50 * var(--rate));
}
.lp-underson__shell[data-styling=styling-005] .lp-underson__heading {
  bottom: calc(212 * var(--rate));
  left: calc(56 * var(--rate));
}
.lp-underson__shell[data-styling=styling-006] .lp-underson__heading {
  top: calc(32 * var(--rate));
  right: calc(28 * var(--rate));
}
.lp-underson__shell[data-styling=styling-006] .lp-underson__prices {
  --prices-gap: calc(18 * var(--rate));
  left: calc(41 * var(--rate));
  top: calc(162 * var(--rate));
}
.lp-underson__shell[data-styling=styling-007] .lp-underson__heading {
  top: calc(32 * var(--rate));
  right: calc(28 * var(--rate));
}
.lp-underson__shell[data-styling=styling-007] .lp-underson__prices {
  bottom: calc(94 * var(--rate));
  left: calc(80 * var(--rate));
}
.lp-underson__shell[data-styling=styling-008] .lp-underson__heading {
  top: calc(32 * var(--rate));
  right: calc(28 * var(--rate));
}
.lp-underson__shell[data-styling=styling-008] .swiper-slide[data-slide="1"] .lp-underson__prices {
  top: calc(332 * var(--rate));
  left: calc(58 * var(--rate));
}
.lp-underson__shell[data-styling=styling-008] .swiper-slide[data-slide="2"] .lp-underson__prices {
  top: calc(340 * var(--rate));
  left: calc(60 * var(--rate));
}
.lp-underson__shell[data-styling=styling-009] .lp-underson__heading {
  right: calc(27 * var(--rate));
  bottom: calc(202 * var(--rate));
}
.lp-underson__shell[data-styling=styling-009] .lp-underson__prices {
  bottom: calc(274 * var(--rate));
  left: calc(72 * var(--rate));
}
.lp-underson__shell[data-styling=styling-010] .lp-underson__heading {
  top: calc(112 * var(--rate));
  right: calc(75 * var(--rate));
}
.lp-underson__shell[data-styling=styling-010] .lp-underson__prices {
  --prices-gap: calc(20 * var(--rate));
  left: calc(70 * var(--rate));
  top: calc(270 * var(--rate));
}
.lp-underson__shell[data-styling=styling-011] .swiper-slide[data-slide="1"] .lp-underson__prices {
  bottom: calc(275 * var(--rate));
  left: calc(61 * var(--rate));
}
.lp-underson__shell[data-styling=styling-011] .swiper-slide[data-slide="2"] .lp-underson__prices {
  --prices-gap: calc(12 * var(--rate));
  bottom: calc(76 * var(--rate));
  right: calc(79 * var(--rate));
}
.lp-underson__shell[data-styling=styling-011] .swiper-slide[data-slide="3"] .lp-underson__prices {
  --prices-gap: calc(12 * var(--rate));
  bottom: calc(130 * var(--rate));
  left: calc(66 * var(--rate));
}
.lp-underson__shell[data-styling=styling-011] .swiper-slide[data-slide="4"] .lp-underson__prices {
  top: calc(136 * var(--rate));
  right: calc(88 * var(--rate));
}
.lp-underson__shell[data-styling=styling-011] .swiper-slide[data-slide="5"] .lp-underson__prices {
  top: calc(132 * var(--rate));
  right: calc(72 * var(--rate));
}
.lp-underson__shell[data-styling=styling-012] .lp-underson__prices:nth-child(1) {
  bottom: calc(412 * var(--rate));
  right: calc(33 * var(--rate));
  text-align: right;
}
.lp-underson__shell[data-styling=styling-012] .lp-underson__prices:nth-child(2) {
  bottom: calc(42 * var(--rate));
  left: calc(27 * var(--rate));
}
.lp-underson__shell[data-styling=styling-013] .lp-underson__heading {
  right: calc(53 * var(--rate));
  bottom: calc(350 * var(--rate));
}
.lp-underson__shell[data-styling=styling-013] .swiper-slide[data-slide="1"] .lp-underson__prices {
  bottom: calc(110 * var(--rate));
  left: calc(70 * var(--rate));
}
.lp-underson__shell[data-styling=styling-013] .swiper-slide[data-slide="2"] .lp-underson__prices {
  top: calc(106 * var(--rate));
  left: calc(96 * var(--rate));
}
.lp-underson__shell[data-styling=styling-014] .lp-underson__heading {
  top: calc(32 * var(--rate));
  right: calc(26 * var(--rate));
}
.lp-underson__shell[data-styling=styling-014] .lp-underson__prices {
  bottom: calc(28 * var(--rate));
  left: calc(27 * var(--rate));
}

/**
 * animation
 */
.anim-fade-in {
  opacity: 0;
}
.anim-fade-in.is-show {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
          animation: fade-in 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  -webkit-animation-delay: var(--animation-delay, 0);
          animation-delay: var(--animation-delay, 0);
}

.anim-fade-blur {
  opacity: 0;
}
.anim-fade-blur.is-show {
  -webkit-animation: fade-blur 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
          animation: fade-blur 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.lp-miesrohe__hero .anim-fade-blur {
  -webkit-animation: fade-blur 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
          animation: fade-blur 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.js-sticky-controller {
  transition: all 0.01s;
}
.js-sticky-controller.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/**
 * @keyframes
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-blur {
  0% {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes fade-blur {
  0% {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
/*# sourceMappingURL=style.css.map */