@charset "UTF-8";
/* //////////////////////////////////////////////////

Title : style.scss
For   : Page/feature/2025/0818/

Created       : 2024-08-04
Last Modified : 2024-08-08

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

Content

////////////////////////////////////////////////// */
/**
 * variables
 */
#LB250818fuwamoko {
  --color-theme: #FFF7EE;
  --color-dark: #3F3F3F;
  --color-dim: rgba(63, 63, 63, .2);
  --color-white: #fff;
  --font-en: "neue-haas-grotesk-display", sans-serif;
  --font-ja: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  --zindex-behind: -1;
  --zindex-base: 1;
  --zindex-overlay: 10;
  --zindex-float: 20;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  #LB250818fuwamoko {
    --reference-value: 100vw / 750;
    --rate: var(--reference-value);
  }
  #LB250818fuwamoko .is-hidden-sml {
    display: none !important;
  }
  .main-area .main-inner {
    width: 100%;
  }
  .category__navBody {
    display: none !important;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #LB250818fuwamoko {
    --reference-value: .1rem;
    --dsesktop-rate: calc(100vw / 1100);
    --rate: calc(100cqi / 750);
  }
  #LB250818fuwamoko .is-hidden-lrg {
    display: none !important;
  }
}
/* --- for middle viewport --- */
@media screen and (min-width: 768px) and (max-width: 1100px) {
  html {
    font-size: 0.9090909091vw;
  }
}
/**
 * common
 */
.lp-lilybrown {
  position: relative;
  font-feature-settings: "halt";
  font-family: var(--font-family, var(--font-ja));
  color: var(--font-color, var(--color-dark));
  font-weight: var(--font-weight, 500);
  box-sizing: border-box;
}
.lp-lilybrown img,
.lp-lilybrown picture {
  display: var(--display, block);
}
.lp-lilybrown img {
  width: 100%;
  height: auto;
}
.lp-lilybrown a {
  display: var(--display, inline-block);
}
.lp-lilybrown a:has(img) {
  --display: block;
}
.lp-lilybrown a.swiper-wrapper {
  --display: flex;
}

/**
 * carousel
 */
.carouselPager {
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-bottom: auto;
  --swiper-pagination-top: var(--carousel-pager-top);
  position: var(--carousel-pager-position, relative);
  right: var(--carousel-pager-right, );
  left: var(--carousel-pager-left, initial) !important;
  display: flex;
  justify-content: center;
  -moz-column-gap: calc(10 * var(--rate));
       column-gap: calc(10 * var(--rate));
  -webkit-margin-before: calc(30 * var(--rate));
          margin-block-start: calc(30 * var(--rate));
  z-index: var(--zindex-float);
}
.carouselPager__dots,
.carouselPager .swiper-pagination-bullet {
  --swiper-pagination-bullet-border-radius: 0;
  border: none;
  position: relative;
  display: block;
  width: calc(120 * var(--rate));
  height: calc(4 * var(--rate));
  padding: 0;
  outline: none;
  background: none;
  opacity: 1;
  background-color: var(--color-dim);
}
.carouselPager__dots::after,
.carouselPager .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--color-dark);
}
.carouselPager__dots-active::after,
.carouselPager .swiper-pagination-bullet-active::after {
  -webkit-animation: progress 3s linear forwards;
          animation: progress 3s linear forwards;
}

/**
 * layout
 */
.lp-lilybrown__shell {
  position: relative;
  container-type: inline-size;
  container-name: miesroheContainer;
  background-color: var(--color-white);
  z-index: var(--zindex-overlay);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lp-lilybrown__shell {
    overflow: hidden;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lp-lilybrown {
    background: linear-gradient(to right, #FFF7EE 0%, #FFFCF8 40%, #FFFCF8 60%, #FFF7EE 100%);
  }
  .lp-lilybrown__shell {
    width: calc(480 * var(--reference-value));
    margin-inline: auto;
  }
}
/**
 * title
 */
@media screen and (min-width: 768px) {
  .lp-lilybrown__title {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr calc(480 * var(--reference-value)) 1fr;
    z-index: var(--zindex-base);
  }
  .lp-lilybrown__title-cell {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    display: grid;
    place-items: center;
    height: 100vh;
  }
  .lp-lilybrown__title-cell:nth-child(1) {
    grid-column: 1;
  }
  .lp-lilybrown__title-cell:nth-child(2) {
    grid-column: 3;
  }
  .lp-lilybrown__title-primary > * {
    display: block;
  }
  .lp-lilybrown__title-primary--primary {
    width: 19.8571428571vw;
  }
  .lp-lilybrown__title-primary--secondary {
    -webkit-margin-before: 1.7857142857vw;
            margin-block-start: 1.7857142857vw;
    font-size: 1.0714285714vw;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .lp-lilybrown__title-link {
    width: 18.5714285714vw;
    -webkit-padding-after: 0.2142857143vw;
            padding-block-end: 0.2142857143vw;
  }
}
/**
 * hero
 */
.lp-lilybrown__hero {
  position: relative;
  -webkit-padding-after: calc(108 * var(--rate));
          padding-block-end: calc(108 * var(--rate));
  background-image: url(../../public/images/decorations/background-blur.svg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: calc(668 * var(--rate));
  text-align: center;
}
.lp-lilybrown__hero-primary {
  -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-lilybrown__hero-title {
  -webkit-margin-before: calc(60 * var(--rate));
          margin-block-start: calc(60 * var(--rate));
}
.lp-lilybrown__hero-title > * {
  display: block;
}
.lp-lilybrown__hero-title--primary {
  width: calc(560 * var(--rate));
  margin-inline: auto;
  transform: translateX(calc(1.5 * var(--rate)));
}
.lp-lilybrown__hero-title--secondary {
  -webkit-margin-before: calc(34 * var(--rate));
          margin-block-start: calc(34 * var(--rate));
  font-size: calc(26 * var(--rate));
  letter-spacing: 0.06em;
  line-height: 1;
}
.lp-lilybrown__hero-lead {
  -webkit-margin-before: calc(68 * var(--rate));
          margin-block-start: calc(68 * var(--rate));
  font-size: calc(26 * var(--rate));
  letter-spacing: 0.06em;
  line-height: 2;
}

/**
 * main contents
 */
/* --- common --- */
.lp-lilybrown__contents-shell::before {
  position: absolute;
  display: block;
  width: calc(666 * var(--rate));
  aspect-ratio: 1/1;
  background-image: url(../../public/images/decorations/background-blur.svg);
  background-size: 100%;
  background-repeat: no-repeat;
}
.lp-lilybrown__contents-shell, .lp-lilybrown__contents-block {
  position: relative;
}
.lp-lilybrown__contents-heading {
  position: absolute;
  z-index: var(--zindex-overlay);
}
.lp-lilybrown__prices {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  -moz-column-gap: 1em;
       column-gap: 1em;
  row-gap: 1em;
  -webkit-margin-before: calc(50 * var(--rate));
          margin-block-start: calc(50 * var(--rate));
  font-size: calc(24 * var(--rate));
  font-family: var(--font-en);
  letter-spacing: 0.08em;
  line-height: 1;
}

/* --- look --- */
.lp-lilybrown__contents-shell {
  -webkit-padding-after: calc(240 * var(--rate));
          padding-block-end: calc(240 * var(--rate));
}
.lp-lilybrown__contents-shell[data-look="01"]::before {
  content: "";
  left: calc(-114 * var(--rate));
  bottom: calc(197 * var(--rate));
}
.lp-lilybrown__contents-shell[data-look="01"] .lp-lilybrown__contents-block:nth-child(1) {
  width: calc(650 * var(--rate));
  margin-inline: auto;
}
.lp-lilybrown__contents-shell[data-look="01"] .lp-lilybrown__contents-block:nth-child(2) {
  width: calc(550 * var(--rate));
  -webkit-margin-before: calc(50 * var(--rate));
          margin-block-start: calc(50 * var(--rate));
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.lp-lilybrown__contents-shell[data-look="02"] .lp-lilybrown__contents-heading {
  top: calc(-42 * var(--rate));
  left: calc(18 * var(--rate));
  width: calc(326 * var(--rate));
}
.lp-lilybrown__contents-shell[data-look="02"] .lp-lilybrown__contents-block:nth-child(2) .lp-lilybrown__contents-images {
  width: calc(570 * var(--rate));
  -webkit-margin-before: calc(90 * var(--rate));
          margin-block-start: calc(90 * var(--rate));
  margin-inline: auto;
}
.lp-lilybrown__contents-shell[data-look="03"]:before {
  content: "";
  right: calc(-83 * var(--rate));
  top: calc(-194 * var(--rate));
}
.lp-lilybrown__contents-shell[data-look="03"] .lp-lilybrown__contents-block:nth-child(1) {
  width: calc(550 * var(--rate));
}
.lp-lilybrown__contents-shell[data-look="03"] .lp-lilybrown__contents-block:nth-child(2) {
  width: calc(700 * var(--rate));
  -webkit-margin-before: calc(45 * var(--rate));
          margin-block-start: calc(45 * var(--rate));
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.lp-lilybrown__contents-shell[data-look="03"] .lp-lilybrown__prices {
  padding-inline: 1em;
}
.lp-lilybrown__contents-shell[data-look="04"] .lp-lilybrown__contents-block .lp-lilybrown__contents-images {
  width: calc(610 * var(--rate));
  margin-inline: auto;
}
.lp-lilybrown__contents-shell[data-look="05"]:before {
  content: "";
  right: calc(-93 * var(--rate));
  top: calc(-144 * var(--rate));
}
.lp-lilybrown__contents-shell[data-look="05"] .lp-lilybrown__contents-heading {
  width: calc(313 * var(--rate));
  right: calc(-213 * var(--rate));
  bottom: calc(53 * var(--rate));
}
.lp-lilybrown__contents-shell[data-look="05"] .lp-lilybrown__contents-block:nth-child(1) {
  width: calc(510 * var(--rate));
}
.lp-lilybrown__contents-shell[data-look="05"] .lp-lilybrown__contents-block:nth-child(2) {
  width: calc(650 * var(--rate));
  -webkit-margin-before: calc(50 * var(--rate));
          margin-block-start: calc(50 * var(--rate));
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.lp-lilybrown__contents-shell[data-look="06"]:before {
  content: "";
  left: calc(-54 * var(--rate));
  bottom: calc(142 * var(--rate));
}
.lp-lilybrown__contents-shell[data-look="06"] .lp-lilybrown__contents-block:nth-child(2) {
  -webkit-margin-before: calc(100 * var(--rate));
          margin-block-start: calc(100 * var(--rate));
}
.lp-lilybrown__contents-shell[data-look="06"] .lp-lilybrown__contents-block:nth-child(2) .lp-lilybrown__contents-images {
  display: grid;
  grid-template-columns: calc(300 * var(--rate)) calc(210 * var(--rate)) calc(240 * var(--rate));
  grid-template-rows: calc(480 * var(--rate)) auto;
}
.lp-lilybrown__contents-shell[data-look="06"] .lp-lilybrown__contents-block:nth-child(2) .lp-lilybrown__contents-images > * {
  position: relative;
}
.lp-lilybrown__contents-shell[data-look="06"] .lp-lilybrown__contents-block:nth-child(2) .lp-lilybrown__contents-images > *:nth-child(1) {
  grid-column: 1/span 2;
  grid-row: 1/span 2;
  align-self: start;
  z-index: var(--zindex-base);
}
.lp-lilybrown__contents-shell[data-look="06"] .lp-lilybrown__contents-block:nth-child(2) .lp-lilybrown__contents-images > *:nth-child(2) {
  grid-column: 2/span 2;
  grid-row: 2;
  z-index: var(--zindex-overlay);
}
.lp-lilybrown__contents-shell[data-look="06"] .lp-lilybrown__prices {
  padding-inline: 2em;
}
.lp-lilybrown__contents-shell[data-look="07"] .lp-lilybrown__contents-heading {
  bottom: calc(33 * var(--rate));
  left: calc(-79 * var(--rate));
  width: calc(308 * var(--rate));
}
.lp-lilybrown__contents-shell[data-look="07"] .lp-lilybrown__contents-block:nth-child(2) {
  width: calc(650 * var(--rate));
  -webkit-margin-before: calc(100 * var(--rate));
          margin-block-start: calc(100 * var(--rate));
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}

/**
 * footer
 */
/* --- common --- */
.lp-lilybrown__footer {
  -webkit-padding-after: calc(200 * var(--rate));
          padding-block-end: calc(200 * var(--rate));
}
.lp-lilybrown__footer-button {
  margin-inline: auto;
}

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

/**
 * @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.01);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes fade-blur {
  0% {
    filter: blur(10px);
    transform: scale(1.01);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/*# sourceMappingURL=style.css.map */