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

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

Created       : 2024-12-23
Last Modified : 2024-12-23

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

Content

////////////////////////////////////////////////// */
/**
 * variables
 */
#LB250107preorder {
  --color-dark: #000;
  --color-white: #fff;
  --color-orange: #F28B79;
  --color-linen: #F9F7EF;
  --color-light-green: #D1E5DA;
  --color-light-blue: #DEEFF9;
  --color-light-pink: #FFEBDE;
  --font-en-primary: "joly-display", sans-serif;
  --font-en-secondary: "area-normal", sans-serif;
  --font-ja: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
  background-color: var(--color-linen);
  overflow: clip;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  #LB250107preorder {
    --rate: 100vw / 750;
    -webkit-padding-after: calc(160 * var(--rate));
            padding-block-end: calc(160 * var(--rate));
            margin-bottom: calc(115* var(--rate));
  }
  #LB250107preorder .hidden-sml {
    display: none !important;
  }
  .main-area {
    overflow: initial;
  }
  .main-area .main-inner {
    width: 100%;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #LB250107preorder {
    --rate: .1rem;
    -webkit-padding-before: calc(40 * var(--rate));
            padding-block-start: calc(40 * var(--rate));
    -webkit-padding-after: calc(95 * var(--rate));
            padding-block-end: calc(95 * var(--rate));
            margin-bottom: 22rem;
  }
  #LB250107preorder .hidden-lrg {
    display: none !important;
  }
}
/* --- for middle viewport --- */
@media screen and (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: 0.7142857143vw;
  }
}
/**
 * common
 */
.lpLilyBrown img,
.lpLilyBrown picture {
  display: var(--display, block);
}
.lpLilyBrown img {
  width: 100%;
  height: auto;
}
.lpLilyBrown a {
  display: var(--display, inline-block);
}
.lpLilyBrown a:has(img) {
  --display: block;
}
.lpLilyBrown * {
  font-feature-settings: "halt";
  font-weight: var(--font-weight, 400);
  color: var(--font-color, var(--color-dark));
  box-sizing: border-box;
}

/**
 * first view
 */
.firstview {
  max-width: 960px;
  margin-inline: auto;
}
.firstview__lead-text {
  position: relative;
  margin-inline: auto;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .firstview__lead-text {
    -webkit-margin-before: calc(158 * var(--rate));
            margin-block-start: calc(158 * var(--rate));
    height: calc(620 * var(--rate));
  }
  .firstview__lead-text--before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50.5%, -50%);
    width: calc(654 * var(--rate));
  }
  .firstview__lead-text--after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(670 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .firstview__lead-text {
    -webkit-margin-before: calc(100 * var(--rate));
            margin-block-start: calc(100 * var(--rate));
    height: calc(360 * var(--rate));
  }
  .firstview__lead-text--before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(422 * var(--rate));
    margin-inline: auto;
  }
  .firstview__lead-text--after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(390 * var(--rate));
    margin-inline: auto;
  }
}
/**
 * main contents: common
 */
.mainContents__cell {
  position: relative;
  z-index: 1;
}
.mainContents__cell::before {
  z-index: 0;
}
.mainContents__cell::after {
  z-index: 2;
}
.mainContents__stylings, .mainContents__styling {
  position: relative;
  z-index: 1;
}
.mainContents__styling::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  z-index: -1;
}
.mainContents__heading {
  position: absolute;
  font-family: var(--font-en-primary);
  font-weight: 500;
  color: var(--heading-color, var(--color-orange));
  writing-mode: var(--writing-mode, vertical-rl);
  white-space: nowrap;
  line-height: 1;
  z-index: 2;
}
.mainContents__decoration, .mainContents__flowers {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
.mainContents__prices {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  -moz-column-gap: 1.25em;
    column-gap: 1.25em;
    row-gap: 0.37em;
  font-family: var(--font-en-secondary);
  letter-spacing: 0.06em;
  text-align: center;
}
@media screen and (min-width: 768px){
  .mainContents__prices {
    row-gap: 0.97em;
  }
}

.carouselPager {
  display: flex;
  justify-content: center;
}
.carouselPager__dot {
  width: var(--size-dot);
  height: var(--size-dot);
  padding: 0;
  border-radius: 50vh;
  background-color: var(--color-dark);
  opacity: 0.5;
  transition: opacity 2000ms cubic-bezier(0.25, 1, 0.5, 1);
}
.carouselPager__dot.is-active {
  opacity: 1;
}
.carouselPager__dot:hover {
  cursor: pointer;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainContents {
    -webkit-margin-before: calc(160 * var(--rate));
            margin-block-start: calc(160 * var(--rate));
  }
  .mainContents__heading {
    font-size: calc(46 * var(--rate));
  }
  .mainContents__prices {
    font-size: calc(24 * var(--rate));
  }
  .mainContents__stylings + .mainContents__prices {
    -webkit-margin-before: 2em;
            margin-block-start: 2em;
  }
  .carouselPager {
    -webkit-margin-before: calc(18 * var(--rate));
            margin-block-start: calc(18 * var(--rate));
    gap: calc(18 * var(--rate));
  }
  .carouselPager__dot {
    --size-dot: calc(18 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainContents {
    -webkit-margin-before: calc(100 * var(--rate));
            margin-block-start: calc(100 * var(--rate));
  }
  .mainContents__heading {
    font-size: calc(24 * var(--rate));
  }
  .mainContents__prices {
    font-size: calc(12 * var(--rate));
  }
  .mainContents__stylings + .mainContents__prices {
    -webkit-margin-before: 2em;
            margin-block-start: 2em;
  }
  .carouselPager {
    -webkit-margin-before: calc(10 * var(--rate));
            margin-block-start: calc(10 * var(--rate));
    gap: calc(8 * var(--rate));
  }
  .carouselPager__dot {
    --size-dot: calc(8 * var(--rate));
  }
}
/**
 * main contents
 */
.mainContents__block {
  position: relative;
  display: grid;
  justify-content: var(--justify-content, center);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .mainContents {
    --section-spacer: var(--section-spacer-adjustment, calc(160 * var(--rate)));
    -webkit-margin-before: var(--section-spacer);
            margin-block-start: var(--section-spacer);
  }
  .mainContents__shell + * {
    -webkit-margin-before: var(--section-spacer);
            margin-block-start: var(--section-spacer);
  }
  .mainContents__shell--coordinate08, .mainContents__shell--coordinate10, .mainContents__shell--coordinate11 {
    --section-spacer: calc(144* var(--rate));
  }
  .mainContents__shell--coordinate09,
  .mainContents__shell--coordinate20 {
    --section-spacer: calc(282 * var(--rate));
  }
  .mainContents__shell--coordinate13 {
    --section-spacer: calc(168 * var(--rate));
  }
  .mainContents__shell--coordinate14 {
    position: relative;
    z-index: 2;
  }
  .mainContents__shell--coordinate17, .mainContents__shell--coordinate21 {
    --section-spacer: calc(149* var(--rate));
  }
  .mainContents__block {
    grid-template-columns: 100%;
  }
  .mainContents__block--coordinate01 {
    grid-template-rows: auto calc(77* var(--rate)) auto calc(148* var(--rate)) 1fr;
  }
  .mainContents__block--coordinate01 .mainContents__cell:nth-child(1) {
    grid-row: 1;
    padding-inline: calc(75 * var(--rate));
  }
  .mainContents__block--coordinate01 .mainContents__cell:nth-child(2) {
    grid-row: 3;
  }
  .mainContents__block--coordinate01 .mainContents__cell:nth-child(3) {
    grid-row: 5;
    padding-inline: calc(145 * var(--rate));
  }
  .mainContents__block--coordinate01 .mainContents__prices {
    padding-inline: 2em;
    transform: translateY(-0.2em);
  }
  .mainContents__block--coordinate01 .mainContents__flowers {
    top: calc(-95 * var(--rate));
    right: calc(34 * var(--rate));
    width: calc(276 * var(--rate));
  }
  .mainContents__block--coordinate02 {
    grid-template-rows: auto calc(145* var(--rate)) 1fr;
  }
  .mainContents__block--coordinate02 .mainContents__cell:nth-child(1) {
    grid-row: 1;
  }
  .mainContents__block--coordinate02 .mainContents__cell:nth-child(2) {
    grid-row: 3;
    padding-inline: calc(40 * var(--rate));
  }
  .mainContents__block--coordinate02 .mainContents__prices {
    padding-inline: 1em;
    transform: translateY(-0.5em);
  }
  .mainContents__block--coordinate02 .mainContents__prices > a:nth-child(3) {
    width: 100%;
  }
  .mainContents__block--coordinate02 .mainContents__flowers {
    bottom: calc(-28 * var(--rate));
    left: calc(10 * var(--rate));
    width: calc(200 * var(--rate));
  }
  .mainContents__block--coordinate03 .mainContents__prices {
    padding-inline: 3em;
    transform: translate(-0.15em, -0.15em);
  }
  .mainContents__block--coordinate03 .mainContents__heading {
    --heading-color: var(--color-white);
    top: calc(212 * var(--rate));
    right: calc(7 * var(--rate));
  }
  .mainContents__block--coordinate04 {
    grid-template-rows: auto calc(148* var(--rate)) 1fr;
  }
  .mainContents__block--coordinate04 .mainContents__cell:nth-child(1) {
    grid-row: 1;
  }
  .mainContents__block--coordinate04 .mainContents__cell:nth-child(2) {
    --cell-spacer: calc(60 * var(--rate));
    grid-row: 3;
    -webkit-padding-start: calc(105 * var(--rate));
            padding-inline-start: calc(105 * var(--rate));
    -webkit-padding-end: calc(45 * var(--rate));
            padding-inline-end: calc(45 * var(--rate));
  }
  .mainContents__block--coordinate04 .mainContents__cell:nth-child(2) .mainContents__stylings {
    -webkit-padding-end: var(--cell-spacer);
            padding-inline-end: var(--cell-spacer);
    -webkit-padding-after: var(--cell-spacer);
            padding-block-end: var(--cell-spacer);
  }
  .mainContents__block--coordinate04 .mainContents__cell:nth-child(2) .mainContents__stylings::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100% - var(--cell-spacer));
    height: calc(100% - var(--cell-spacer));
    background-color: var(--color-light-green);
    z-index: 0;
  }
  .mainContents__block--coordinate04 .mainContents__prices {
    transform: translate(-0.15em, -0.55em);
  }
  .mainContents__block--coordinate04 .mainContents__flowers {
    top: calc(34 * var(--rate));
    right: calc(22 * var(--rate));
    width: calc(300 * var(--rate));
  }
  .mainContents__block--coordinate05 {
    grid-template-rows: auto calc(144* var(--rate)) auto calc(70* var(--rate)) 1fr;
  }
  .mainContents__block--coordinate05 .mainContents__cell:nth-child(1) {
    grid-row: 1;
  }
  .mainContents__block--coordinate05 .mainContents__cell:nth-child(2) {
    grid-row: 3/span 2;
    -webkit-padding-start: calc(190 * var(--rate));
            padding-inline-start: calc(190 * var(--rate));
  }
  .mainContents__block--coordinate05 .mainContents__cell:nth-child(3) {
    grid-row: 4/span 2;
    -webkit-padding-end: calc(290 * var(--rate));
            padding-inline-end: calc(290 * var(--rate));
  }
  .mainContents__block--coordinate05 .mainContents__prices {
    padding-inline: 2em;
    transform: translateY(-0.6em);
  }
  .mainContents__block--coordinate06 {
    grid-template-rows: auto calc(100 * var(--rate)) 1fr;
  }
  .mainContents__block--coordinate06 .mainContents__cell:nth-child(1) {
    padding-inline: calc(105 * var(--rate));
    grid-row: 1;
    z-index: 2;
  }
  .mainContents__block--coordinate06 .mainContents__cell:nth-child(2) {
    grid-column: 1;
    grid-row: 3;
  }
  .mainContents__block--coordinate06 .mainContents__prices {
    transform: translateY(-0.1em);
  }
  .mainContents__block--coordinate06 .mainContents__flowers {
    bottom: calc(-116 * var(--rate));
    left: calc(-40 * var(--rate));
    width: calc(340 * var(--rate));
  }
  .mainContents__block--coordinate07 {
    grid-template-rows: auto calc(162 * var(--rate)) 1fr;
  }
  .mainContents__block--coordinate07 .mainContents__cell:nth-child(1) {
    grid-row: 1;
    padding-inline: calc(145 * var(--rate));
  }
  .mainContents__block--coordinate07 .mainContents__cell:nth-child(2) {
    grid-row: 3;
  }
  .mainContents__block--coordinate07 .mainContents__prices {
    padding-inline: 2em;
    transform: translateY(-0.5em);
  }
  .mainContents__block--coordinate07 .mainContents__heading {
    top: calc(-6 * var(--rate));
    left: calc(70 * var(--rate));
    transform: rotate(180deg);
  }
  .mainContents__block--coordinate08 {
    grid-template-rows: auto calc(100 * var(--rate)) 1fr;
  }
  .mainContents__block--coordinate08 .mainContents__cell {
    padding-inline: calc(75 * var(--rate));
  }
  .mainContents__block--coordinate08 .mainContents__cell:nth-child(1) {
    grid-row: 1;
    /* -webkit-margin-after: calc((var(--sticky-target-next-element-height) - var(--sticky-target-first-element-height)) / 2);
            margin-block-end: calc((var(--sticky-target-next-element-height) - var(--sticky-target-first-element-height)) / 2); */
  }
  .mainContents__block--coordinate08 .mainContents__cell:nth-child(2) {
    grid-row: 3;
  }
  .mainContents__block--coordinate08 .mainContents__prices {
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-0.1em);
  }
  .mainContents__block--coordinate08 .mainContents__decoration {
    top: calc(705 * var(--rate));
    right: calc(18 * var(--rate));
    width: calc(275 * var(--rate));
  }
  .mainContents__block--coordinate08.is-sticky .mainContents__cell:nth-child(1) {
    /* -webkit-margin-after: calc(var(--sticky-target-next-element-height) - var(--sticky-target-first-element-height));
            margin-block-end: calc(var(--sticky-target-next-element-height) - var(--sticky-target-first-element-height)); */
  }
  .mainContents__block--coordinate09 {
    grid-template-rows: auto calc(144* var(--rate)) 1fr;
  }
  .mainContents__block--coordinate09 .mainContents__cell:nth-child(1) {
    grid-row: 1;
  }
  .mainContents__block--coordinate09 .mainContents__prices {
    transform: translateY(-0.6em);
}
  .mainContents__block--coordinate09 .mainContents__cell:nth-child(2) {
    --cell-spacer: calc(60 * var(--rate));
    -webkit-padding-end: calc(150 * var(--rate));
            padding-inline-end: calc(150 * var(--rate));
    grid-row: 3;
  }
  .mainContents__block--coordinate09 .mainContents__cell:nth-child(2) .mainContents__stylings {
    -webkit-padding-start: var(--cell-spacer);
            padding-inline-start: var(--cell-spacer);
    -webkit-padding-before: var(--cell-spacer);
            padding-block-start: var(--cell-spacer);
  }
  .mainContents__block--coordinate09 .mainContents__cell:nth-child(2) .mainContents__stylings::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - var(--cell-spacer));
    height: calc(100% - var(--cell-spacer));
    background-color: var(--color-light-blue);
    z-index: 0;
  }
  .mainContents__block--coordinate09 .mainContents__cell:nth-child(2) .mainContents__prices {
    -webkit-padding-start: var(--cell-spacer);
            padding-inline-start: var(--cell-spacer);
            transform: translateY(-0.5em);
  }
  .mainContents__block--coordinate10 {
    grid-template-rows: auto calc(160 * var(--rate)) 1fr;
  }
  .mainContents__block--coordinate10 .mainContents__cell:nth-child(1) {
    grid-row: 1;
    -webkit-padding-start: calc(150 * var(--rate));
            padding-inline-start: calc(150 * var(--rate));
  }
  .mainContents__block--coordinate10 .mainContents__cell:nth-child(2) {
    padding-inline: calc(85 * var(--rate));
    grid-row: 3;
  }
  .mainContents__block--coordinate10 .mainContents__prices {
    transform: translateY(-0.1em);
  }
  .mainContents__block--coordinate11 {
    grid-template-rows: calc(400 * var(--rate)) auto calc(190 * var(--rate)) calc(100 * var(--rate)) 1fr;
  }
  .mainContents__block--coordinate11 .mainContents__cell:nth-child(1) {
    grid-row: 1/span 2;
    -webkit-padding-start: calc(270 * var(--rate));
            padding-inline-start: calc(270 * var(--rate));
  }
  .mainContents__block--coordinate11 .mainContents__cell:nth-child(2) {
    -webkit-padding-end: calc(410 * var(--rate));
            padding-inline-end: calc(410 * var(--rate));
    grid-row: 2/span 2;
  }
  .mainContents__block--coordinate11 .mainContents__cell:nth-child(3) {
    grid-row: 5;
  }
  .mainContents__block--coordinate11 .mainContents__heading {
    --heading-color: var(--color-white);
    --writing-mode: horizontal-tb;
    top: calc(18* var(--rate));
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
  }
  .mainContents__block--coordinate11 .mainContents__prices {
    transform: translateY(-0.1em);
  }
  .mainContents__block--coordinate11 .mainContents__flowers {
    top: calc(-155 * var(--rate));
    left: calc(14 * var(--rate));
    width: calc(520 * var(--rate));
  }
  .mainContents__block--coordinate12 {
    grid-template-rows: auto calc(30 * var(--rate)) auto 2.3em 1fr;
  }
  .mainContents__block--coordinate12 .mainContents__cell {
    padding-inline: calc(65 * var(--rate));
  }
  .mainContents__block--coordinate12 .mainContents__cell:nth-child(1) {
    grid-row: 1;
  }
  .mainContents__block--coordinate12 .mainContents__cell:nth-child(2) {
    grid-row: 3;
  }
  .mainContents__block--coordinate12 .mainContents__cell:nth-child(3) {
    grid-row: 5;
    transform: translateY(1em);
  }
  .mainContents__block--coordinate12 .mainContents__flowers {
    bottom: calc(98 * var(--rate));
    left: calc(14 * var(--rate));
    width: calc(276 * var(--rate));
  }
  .mainContents__block--coordinate13 .mainContents__prices {
    padding-inline: 5em;
    transform: translateY(-0.1em);
  }
  .mainContents__block--coordinate14 .mainContents__prices {
    transform: translateY(-0.45em);
  }
  .mainContents__block--coordinate14 .mainContents__prices > *:nth-child(3) {
    width: 100%;
  }
  .mainContents__block--coordinate14 .mainContents__flowers {
    bottom: calc(-260 * var(--rate));
    left: calc(53 * var(--rate));
    width: calc(300 * var(--rate));
  }
  .mainContents__block--coordinate15 .mainContents__cell {
    -webkit-padding-start: calc(210 * var(--rate));
            padding-inline-start: calc(210 * var(--rate));
  }
  .mainContents__block--coordinate15 .mainContents__prices {
    transform: translateY(-0.5em);
  }
  .mainContents__block--coordinate16 {
    grid-template-rows: calc(770 * var(--rate)) auto 1fr;
  }
  .mainContents__block--coordinate16 .mainContents__cell:nth-child(1) {
    grid-row: 1/span 2;
    -webkit-padding-end: calc(190 * var(--rate));
            padding-inline-end: calc(190 * var(--rate));
    z-index: 2;
  }
  .mainContents__block--coordinate16 .mainContents__cell:nth-child(2) {
    grid-row: 2/span 2;
  }
  .mainContents__block--coordinate16 .mainContents__prices > *:nth-child(3) {
    width: 100%;
  }
  .mainContents__block--coordinate16 .mainContents__prices {
    transform: translateY(-0.5em);
  }
  .mainContents__block--coordinate17 {
    grid-template-rows: auto calc(160 * var(--rate)) 1fr;
  }
  .mainContents__block--coordinate17 .mainContents__cell:nth-child(1) {
    grid-row: 1;
  }
  .mainContents__block--coordinate17 .mainContents__cell:nth-child(2) {
    --cell-spacer: calc(75 * var(--rate));
    grid-row: 3;
    -webkit-padding-end: var(--cell-spacer);
            padding-inline-end: var(--cell-spacer);
  }
  .mainContents__block--coordinate17 .mainContents__cell:nth-child(2) .mainContents__stylings {
    -webkit-padding-start: var(--cell-spacer);
            padding-inline-start: var(--cell-spacer);
    -webkit-padding-after: var(--cell-spacer);
            padding-block-end: var(--cell-spacer);
  }
  .mainContents__block--coordinate17 .mainContents__cell:nth-child(2) .mainContents__stylings::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - var(--cell-spacer));
    height: calc(100% - var(--cell-spacer));
    background-color: var(--color-light-pink);
    z-index: 0;
  }
  .mainContents__block--coordinate17 .mainContents__prices {
    transform: translateY(-0.7em);
  }
  .mainContents__block--coordinate17 .mainContents__heading {
    top: calc(98 * var(--rate));
    right: calc(10 * var(--rate));
  }
  .mainContents__block--coordinate17 .mainContents__flowers {
    top: calc(-155 * var(--rate));
    left: calc(10 * var(--rate));
    width: calc(510 * var(--rate));
  }
  .mainContents__block--coordinate18 .mainContents__prices {
    padding-inline: 4em;
    transform: translateY(-0.25em);
  }
  .mainContents__block--coordinate19 {
    grid-template-rows: auto calc(100 * var(--rate)) 1fr;
  }
  .mainContents__block--coordinate19 .mainContents__cell {
    padding-inline: calc(65 * var(--rate));
  }
  .mainContents__block--coordinate19 .mainContents__cell:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
  }
  .mainContents__block--coordinate19 .mainContents__cell:nth-child(2) {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    height: var(--sticky-target-next-element-height);
    z-index: 100;
    pointer-events: none;
  }
  .mainContents__block--coordinate19:not(.is-sticky) .mainContents__cell:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .mainContents__block--coordinate19 .mainContents__cell:nth-child(3) {
    grid-row: 3;
  }
  .mainContents__block--coordinate19 .mainContents__prices {
    position: absolute;
    left: 0;
    right: 0;
    padding-inline: calc(65 * var(--rate));
    transform: translateY(-0.1em);
  }
  .mainContents__block--coordinate19 .mainContents__decoration {
    top: calc(114 * var(--rate));
    right: calc(20 * var(--rate));
    width: calc(290 * var(--rate));
  }
  .mainContents__block--coordinate19 .mainContents__flowers {
    bottom: calc(-25 * var(--rate));
    left: calc(16 * var(--rate));
    width: calc(276 * var(--rate));
  }
  .mainContents__block--coordinate19.is-sticky .mainContents__cell:nth-child(1) {
    -webkit-margin-after: calc(var(--sticky-target-next-element-height) - var(--sticky-target-first-element-height));
            margin-block-end: calc(var(--sticky-target-next-element-height) - var(--sticky-target-first-element-height));
  }
  .mainContents__block--coordinate20 {
    grid-template-rows: auto calc(147* var(--rate)) 1fr;
  }
  .mainContents__block--coordinate20 .mainContents__cell:nth-child(1) {
    grid-row: 1;
    -webkit-padding-start: calc(170 * var(--rate));
            padding-inline-start: calc(170 * var(--rate));
  }
  .mainContents__block--coordinate20 .mainContents__cell:nth-child(2) {
    grid-row: 3;
    -webkit-padding-end: calc(130 * var(--rate));
            padding-inline-end: calc(130 * var(--rate));
  }
  .mainContents__block--coordinate20 .mainContents__prices {
    transform: translateY(-0.5em);
  }
  .mainContents__block--coordinate20 .mainContents__heading {
    top: calc(112 * var(--rate));
    right: calc(65 * var(--rate));
    line-height: 1;
  }
  .mainContents__block--coordinate21 {
    grid-template-rows: auto calc(142* var(--rate)) 1fr;
  }
  .mainContents__block--coordinate21 .mainContents__cell:nth-child(1) {
    grid-row: 1;
    padding-inline: calc(75 * var(--rate));
  }
  .mainContents__block--coordinate21 .mainContents__cell:nth-child(2) {
    grid-row: 3;
  }
  .mainContents__block--coordinate21 .mainContents__prices {
    -moz-column-gap: 1em;
    column-gap: 1.3em;
    padding-inline: 2em;
    transform: translateY(-0.5em);
  }
  .mainContents__block--coordinate21 .mainContents__prices  .creditItem_margin{
    margin: 0 3em;
  }
  .mainContents__block--coordinate21 .mainContents__flowers {
    top: calc(-146 * var(--rate));
    right: calc(30 * var(--rate));
    width: calc(520 * var(--rate));
  }
  .mainContents__cell {
    grid-column: 1;
    /* overflow: hidden; */
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .mainContents {
    --section-spacer: var(--section-spacer-adjustment, calc(100 * var(--rate)));
    -webkit-margin-before: var(--section-spacer);
            margin-block-start: var(--section-spacer);
  }
  .mainContents__shell {
    max-width: 1400px;
    margin-inline: auto;
  }
  .mainContents__shell + * {
    -webkit-margin-before: var(--section-spacer);
            margin-block-start: var(--section-spacer);
  }
  .mainContents__shell--coordinate08 {
    --section-spacer: calc(103 * var(--rate));
  }
  .mainContents__shell--coordinate11, .mainContents__shell--coordinate15 {
    padding-inline: calc(80 * var(--rate));
  }
  .mainContents__shell--coordinate11 {
    -webkit-padding-before: calc(300 * var(--rate));
            padding-block-start: calc(300 * var(--rate));
  }
  .mainContents__shell--coordinate12 {
    --section-spacer: calc(104 * var(--rate));
  }
  .mainContents__shell--coordinate13 {
    --section-spacer: calc(102 * var(--rate));
  }
  .mainContents__shell--coordinate16 {
    --section-spacer: calc(-76 * var(--rate));
  }
  .mainContents__shell--coordinate17 {
    --section-spacer: calc(104 * var(--rate));
  }
  .mainContents__shell--coordinate18 {
    -webkit-padding-before: calc(150 * var(--rate));
            padding-block-start: calc(150 * var(--rate));
    padding-inline: calc(100 * var(--rate));
  }
  .mainContents__shell--coordinate21 {
    --section-spacer: calc(103 * var(--rate));
    padding-inline: calc(80 * var(--rate));
  }
  .mainContents__block--coordinate01 {
    grid-template-columns: calc(400 * var(--rate)) calc(300 * var(--rate)) calc(60 * var(--rate)) calc(480 * var(--rate));
    grid-template-rows: calc(237 * var(--rate)) auto calc(89 * var(--rate));
  }
  .mainContents__block--coordinate01 .mainContents__cell:nth-child(1) {
    grid-column: 1;
    grid-row: 1/span 2;
    align-self: start;
  }
  .mainContents__block--coordinate01 .mainContents__cell:nth-child(2) {
    grid-column: 4;
    grid-row: 2;
  }
  .mainContents__block--coordinate01 .mainContents__cell:nth-child(3) {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
  }
  .mainContents__block--coordinate01 .mainContents__prices {
    transform: translateY(-0.25em);
  }
  .mainContents__block--coordinate01 .mainContents__flowers {
    top: calc(-70 * var(--rate));
    right: calc(-42 * var(--rate));
    width: calc(141 * var(--rate));
  }
  .mainContents__block--coordinate02 {
    grid-template-columns: calc(540 * var(--rate)) calc(120 * var(--rate)) calc(440 * var(--rate));
    grid-template-rows: calc(150 * var(--rate)) auto 1fr;
  }
  .mainContents__block--coordinate02 .mainContents__cell:nth-child(1) {
    grid-column: 3;
    grid-row: 1/span 3;
  }
  .mainContents__block--coordinate02 .mainContents__cell:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }
  .mainContents__block--coordinate02 .mainContents__prices {
    transform: translateY(-0.1em);
  }
  .mainContents__block--coordinate02 .mainContents__flowers {
    bottom: calc(-12 * var(--rate));
    left: calc(-45 * var(--rate));
    width: calc(114 * var(--rate));
  }
  .mainContents__block--coordinate03 {
    grid-template-columns: calc(500 * var(--rate));
  }
  .mainContents__block--coordinate03 .mainContents__cell:nth-child(1) {
    grid-column: 1;
  }
  .mainContents__block--coordinate03 .mainContents__prices {
    transform: translateY(-0.25em);
  }
  .mainContents__block--coordinate03 .mainContents__heading {
    top: calc(191 * var(--rate));
    right: calc(-38 * var(--rate));
  }
  .mainContents__block--coordinate04 {
    grid-template-columns: calc(440 * var(--rate)) calc(80 * var(--rate)) calc(400 * var(--rate));
    grid-template-rows: calc(60 * var(--rate)) auto 1fr;
  }
  .mainContents__block--coordinate04 .mainContents__cell:nth-child(1) {
    grid-column: 1;
    grid-row: 1/span 3;
  }
  .mainContents__block--coordinate04 .mainContents__cell:nth-child(2) {
    --cell-spacer: calc(40 * var(--rate));
    grid-column: 3;
    grid-row: 2;
    -webkit-padding-after: var(--cell-spacer);
            padding-block-end: var(--cell-spacer);
    -webkit-padding-end: var(--cell-spacer);
            padding-inline-end: var(--cell-spacer);
  }
  .mainContents__block--coordinate04 .mainContents__cell:nth-child(2)::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100% - var(--cell-spacer));
    height: calc(100% - var(--cell-spacer));
    background-color: var(--color-light-green);
  }
  .mainContents__block--coordinate04 .mainContents__prices {
    transform: translateY(-0.15em);
  }
  .mainContents__block--coordinate04 .mainContents__heading {
    top: calc(190 * var(--rate));
    right: calc(-44 * var(--rate));
  }
  .mainContents__block--coordinate04 .mainContents__flowers {
    bottom: calc(20.5 * var(--rate));
    right: calc(-38.4 * var(--rate));
    width: calc(178 * var(--rate));
  }
  .mainContents__block--coordinate05 {
    grid-template-columns: calc(300 * var(--rate)) calc(60 * var(--rate)) calc(320 * var(--rate)) calc(120 * var(--rate)) calc(440 * var(--rate));
    grid-template-rows: calc(160 * var(--rate)) calc(160 * var(--rate)) auto 1fr;
  }
  .mainContents__block--coordinate05 .mainContents__cell:nth-child(1) {
    grid-column: 5;
    grid-row: 1/span 4;
  }
  .mainContents__block--coordinate05 .mainContents__cell:nth-child(2) {
    grid-column: 3;
    grid-row: 3/span 2;
  }
  .mainContents__block--coordinate05 .mainContents__cell:nth-child(3) {
    grid-column: 1;
    grid-row: 2/span 2;
  }
  .mainContents__block--coordinate05 .mainContents__prices {
    padding-inline: 3em;
  }
  .mainContents__block--coordinate06 {
    grid-template-columns: calc(60 * var(--rate)) calc(360 * var(--rate)) calc(60 * var(--rate));
    grid-template-rows: auto calc(60 * var(--rate)) 1fr;
  }
  .mainContents__block--coordinate06 .mainContents__cell:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
  }
  .mainContents__block--coordinate06 .mainContents__cell:nth-child(2) {
    grid-column: 1/span 3;
    grid-row: 3;
  }
  .mainContents__block--coordinate06 .mainContents__flowers {
    bottom: calc(-22 * var(--rate));
    left: calc(-110 * var(--rate));
    width: calc(194 * var(--rate));
  }
  .mainContents__block--coordinate07 {
    grid-template-columns: calc(300 * var(--rate)) calc(173 * var(--rate)) calc(440 * var(--rate));
    grid-template-rows: calc(105 * var(--rate)) auto 1fr;
  }
  .mainContents__block--coordinate07 .mainContents__cell:nth-child(1) {
    grid-column: 1;
    grid-row: 2;
  }
  .mainContents__block--coordinate07 .mainContents__cell:nth-child(2) {
    grid-column: 3;
    grid-row: 1/span 3;
  }
  .mainContents__block--coordinate07 .mainContents__heading {
    top: calc(42 * var(--rate));
    left: calc(-38 * var(--rate));
    transform: rotate(180deg);
  }
  .mainContents__block--coordinate08 {
    grid-template-columns: calc(400 * var(--rate));
    grid-template-rows: auto calc(60 * var(--rate) - (var(--sticky-target-next-element-height) - var(--sticky-target-first-element-height))) 1fr;
  }
  .mainContents__block--coordinate08 .mainContents__cell:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    -webkit-margin-after: calc(var(--sticky-target-next-element-height) - var(--sticky-target-first-element-height));
            margin-block-end: calc(var(--sticky-target-next-element-height) - var(--sticky-target-first-element-height));
  }
  .mainContents__block--coordinate08 .mainContents__cell:nth-child(2) {
    grid-column: 1;
    grid-row: 3;
  }
  .mainContents__block--coordinate08 .mainContents__decoration {
    top: calc(17 * var(--rate));
    right: calc(-73 * var(--rate));
    width: calc(168 * var(--rate));
  }
  .mainContents__block--coordinate09 {
    grid-template-columns: calc(400 * var(--rate)) calc(120 * var(--rate)) calc(480 * var(--rate));
    grid-template-rows: calc(50 * var(--rate)) auto 1fr;
  }
  .mainContents__block--coordinate09 .mainContents__cell:nth-child(1) {
    grid-column: 3;
    grid-row: 1/span 3;
  }
  .mainContents__block--coordinate09 .mainContents__cell:nth-child(2) {
    --cell-spacer: calc(40 * var(--rate));
    grid-column: 1;
    grid-row: 2;
    -webkit-padding-before: var(--cell-spacer);
            padding-block-start: var(--cell-spacer);
    -webkit-padding-start: var(--cell-spacer);
            padding-inline-start: var(--cell-spacer);
  }
  .mainContents__block--coordinate09 .mainContents__cell:nth-child(2)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - var(--cell-spacer));
    height: calc(540 * var(--rate));
    background-color: var(--color-light-blue);
  }
  .mainContents__block--coordinate10 {
    grid-template-columns: calc(400 * var(--rate));
  }
  .mainContents__block--coordinate10 .mainContents__cell:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .mainContents__block--coordinate10 .mainContents__cell:nth-child(2) {
    position: absolute;
    top: calc(700 * var(--rate));
    left: calc(80 * var(--rate));
    width: calc(380 * var(--rate));
  }
  .mainContents__block--coordinate11 {
    justify-content: end;
    grid-template-columns: calc(250 * var(--rate)) calc(210 * var(--rate)) calc(50 * var(--rate)) calc(40 * var(--rate)) calc(300 * var(--rate));
    grid-template-rows: calc(240 * var(--rate)) auto calc(100 * var(--rate)) 1fr;
  }
  .mainContents__block--coordinate11 .mainContents__cell:nth-child(1) {
    grid-column: 4/span 2;
    grid-row: 1/span 2;
    align-self: start;
  }
  .mainContents__block--coordinate11 .mainContents__cell:nth-child(2) {
    grid-column: 2/span 3;
    grid-row: 2;
  }
  .mainContents__block--coordinate11 .mainContents__cell:nth-child(3) {
    grid-column: 1/span 2;
    grid-row: 4;
  }
  .mainContents__block--coordinate11 .mainContents__heading {
    top: calc(162 * var(--rate));
    right: calc(-38 * var(--rate));
  }
  .mainContents__block--coordinate11 .mainContents__flowers {
    top: calc(-95 * var(--rate));
    left: calc(-257 * var(--rate));
    width: calc(318 * var(--rate));
  }
  .mainContents__block--coordinate12 {
    grid-template-columns: calc(420 * var(--rate)) calc(60 * var(--rate)) calc(420 * var(--rate));
    grid-template-rows: auto calc(24 * var(--rate)) 1fr;
  }
  .mainContents__block--coordinate12 .mainContents__cell:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .mainContents__block--coordinate12 .mainContents__cell:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }
  .mainContents__block--coordinate12 .mainContents__cell:nth-child(3) {
    grid-column: 1/span 3;
    grid-row: 3;
  }
  .mainContents__block--coordinate12 .mainContents__flowers {
    top: calc(348 * var(--rate));
    left: calc(158 * var(--rate));
    width: calc(154 * var(--rate));
  }
  .mainContents__block--coordinate13, .mainContents__block--coordinate14 {
    grid-template-columns: calc(460 * var(--rate));
  }
  .mainContents__block--coordinate13 .mainContents__prices, .mainContents__block--coordinate14 .mainContents__prices {
    transform: translateY(-0.25em);
  }
  .mainContents__block--coordinate14 .mainContents__flowers {
    top: calc(12 * var(--rate));
    right: calc(-91 * var(--rate));
    width: calc(178 * var(--rate));
  }
  .mainContents__block--coordinate15 {
    justify-content: end;
    grid-template-columns: calc(360 * var(--rate));
  }
  .mainContents__block--coordinate16 {
    grid-template-columns: calc(460 * var(--rate)) calc(260 * var(--rate));
  }
  .mainContents__block--coordinate16 .mainContents__cell:nth-child(1) {
    position: absolute;
    top: calc(-300 * var(--rate));
    left: calc(80 * var(--rate));
    width: calc(320 * var(--rate));
    z-index: 2;
  }
  .mainContents__block--coordinate16 .mainContents__cell:nth-child(2) {
    grid-column: 1;
  }
  .mainContents__block--coordinate17 {
    grid-template-columns: calc(480 * var(--rate));
  }
  .mainContents__block--coordinate17 .mainContents__cell:nth-child(1) {
    grid-column: 1;
  }
  .mainContents__block--coordinate17 .mainContents__cell:nth-child(2) {
    position: absolute;
    top: calc(924 * var(--rate));
    left: calc(100 * var(--rate));
    width: calc(458 * var(--rate));
    -webkit-padding-start: calc(58 * var(--rate));
            padding-inline-start: calc(58 * var(--rate));
    -webkit-padding-after: calc(60 * var(--rate));
            padding-block-end: calc(60 * var(--rate));
  }
  .mainContents__block--coordinate17 .mainContents__cell:nth-child(2):before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 58 * var(--rate));
    height: calc(100% - 60 * var(--rate));
    background-color: var(--color-light-pink);
  }
  .mainContents__block--coordinate17 .mainContents__prices {
    padding-inline: 3em;
    transform: translateY(-0.25em);
  }
  .mainContents__block--coordinate17 .mainContents__heading {
    top: calc(116 * var(--rate));
    right: calc(-38 * var(--rate));
  }
  .mainContents__block--coordinate17 .mainContents__flowers {
    top: calc(-89 * var(--rate));
    left: calc(-71 * var(--rate));
    width: calc(320 * var(--rate));
  }
  .mainContents__block--coordinate18 {
    justify-content: end;
    grid-template-columns: calc(440 * var(--rate));
  }
  .mainContents__block--coordinate18 .mainContents__prices {
    padding-inline: 1em;
    transform: translateY(-0.25em);
  }
  .mainContents__block--coordinate19 {
    grid-template-columns: calc(420 * var(--rate));
    grid-template-rows: auto calc(60 * var(--rate) - (var(--sticky-target-next-element-height) - var(--sticky-target-first-element-height))) 1fr;
  }
  .mainContents__block--coordinate19 .mainContents__cell:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
    -webkit-margin-after: calc(var(--sticky-target-next-element-height) - var(--sticky-target-first-element-height));
            margin-block-end: calc(var(--sticky-target-next-element-height) - var(--sticky-target-first-element-height));
  }
  .mainContents__block--coordinate19 .mainContents__cell:nth-child(2) {
    grid-row: 1;
    grid-column: 1;
    width: calc(420 * var(--rate));
    height: var(--sticky-target-next-element-height);
    z-index: 100;
    pointer-events: none;
  }
  .mainContents__block--coordinate19:not(.is-sticky) .mainContents__cell:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .mainContents__block--coordinate19 .mainContents__cell:nth-child(3) {
    grid-row: 3;
  }
  .mainContents__block--coordinate19 .mainContents__prices {
    padding-inline: 4em;
    transform: translateY(-0.1em);
  }
  .mainContents__block--coordinate19 .mainContents__decoration {
    top: calc(102 * var(--rate));
    right: calc(-70 * var(--rate));
    width: calc(176 * var(--rate));
  }
  .mainContents__block--coordinate19 .mainContents__flowers {
    bottom: calc(145 * var(--rate));
    left: calc(-86 * var(--rate));
    width: calc(154 * var(--rate));
  }
  .mainContents__block--coordinate20 {
    grid-template-columns: calc(100 * var(--rate)) calc(380 * var(--rate));
  }
  .mainContents__block--coordinate20 .mainContents__cell:nth-child(1) {
    grid-column: 2;
  }
  .mainContents__block--coordinate20 .mainContents__cell:nth-child(2) {
    position: absolute;
    top: calc(280 * var(--rate));
    left: calc(80 * var(--rate));
    width: calc(420 * var(--rate));
  }
  .mainContents__block--coordinate20 .mainContents__cell:nth-child(2) .mainContents__prices {
    padding-inline: 4em;
  }
  .mainContents__block--coordinate20 .mainContents__heading {
    top: calc(132 * var(--rate));
    left: calc(-38 * var(--rate));
    transform: rotate(180deg);
  }
  .mainContents__block--coordinate21 {
    justify-content: end;
    grid-template-columns: calc(550 * var(--rate)) calc(110 * var(--rate)) calc(290 * var(--rate));
    grid-template-rows: auto calc(100 * var(--rate)) 1fr;
  }
  .mainContents__block--coordinate21 .mainContents__cell:nth-child(1) {
    grid-column: 2/span 2;
    grid-row: 1;
  }
  .mainContents__block--coordinate21 .mainContents__cell:nth-child(2) {
    grid-column: 1/span 2;
    grid-row: 3;
  }
  .mainContents__block--coordinate21 .mainContents__flowers {
    top: calc(439 * var(--rate));
    left: calc(-370 * var(--rate));
    width: calc(318 * var(--rate));
  }
}
/**
 * footer
 */
.lpFooter {
  margin-inline: auto;
}
.lpFooter * {
  text-align: center;
}
.lpFooter__links {
  font-family: var(--font-en-primary);
  font-weight: 500;
}
.lpFooter__links--all {
  --display: block;
  position: relative;
  background-color: var(--color-white);
}
.lpFooter__links--all::before, .lpFooter__links--all::after {
  content: "";
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
.lpFooter__links--all::before {
  background-image: url(../../public/images/decorations/flower-button-before.svg);
}
.lpFooter__links--categories {
  display: grid;
  grid-template-columns: repeat(var(--column-length), 1fr);
  gap: var(--categories-grid-gap);
}
.lpFooter__links--categories > * {
  background-color: var(--color-white);
}
.lpFooter__credit {
  font-family: var(--font-en-secondary);
  letter-spacing: 0.06em;
  line-height: 2;
}
.lpFooter__credit > dd > dl {
  display: flex;
  justify-content: center;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lpFooter {
    -webkit-margin-before: calc(188 * var(--rate));
            margin-block-start: calc(188 * var(--rate));
    padding-inline: calc(30 * var(--rate));
  }
  .lpFooter__links--all {
    font-size: calc(34 * var(--rate));
    line-height: calc(140 * var(--rate));
  }
  .lpFooter__links--all::before {
    top: calc(-30 * var(--rate));
    left: calc(-20 * var(--rate));
    width: calc(100 * var(--rate));
    height: calc(113 * var(--rate));
  }
  .lpFooter__links--all::after {
    bottom: calc(-28 * var(--rate));
    right: calc(-20 * var(--rate));
    width: calc(90 * var(--rate));
    height: calc(105 * var(--rate));
    background-image: url(../../public/images/decorations/flower-button-after-sml.svg);
  }
  .lpFooter__links--categories {
    --column-length: 2;
    --categories-grid-gap: calc(12 * var(--rate));
    -webkit-margin-before: calc(68 * var(--rate));
            margin-block-start: calc(68 * var(--rate));
    font-size: calc(30 * var(--rate));
  }
  .lpFooter__links--categories > * {
    line-height: calc(76 * var(--rate));
  }
  .lpFooter__credit {
    -webkit-margin-before: calc(150 * var(--rate));
            margin-block-start: calc(150 * var(--rate));
    font-size: calc(24 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lpFooter {
    width: calc(550 * var(--rate));
    -webkit-margin-before: calc(120 * var(--rate));
            margin-block-start: calc(120 * var(--rate));
  }
  .lpFooter__links--all {
    font-size: calc(20 * var(--rate));
    line-height: calc(72 * var(--rate));
  }
  .lpFooter__links--all::before {
    top: calc(-20 * var(--rate));
    left: calc(-15 * var(--rate));
    width: calc(66 * var(--rate));
    height: calc(78 * var(--rate));
  }
  .lpFooter__links--all::after {
    bottom: calc(-17 * var(--rate));
    right: calc(-15 * var(--rate));
    width: calc(71 * var(--rate));
    height: calc(60 * var(--rate));
    background-image: url(../../public/images/decorations/flower-button-after-lrg.svg);
  }
  .lpFooter__links--categories {
    --column-length: 3;
    --categories-grid-gap: calc(8 * var(--rate));
    -webkit-margin-before: calc(37 * var(--rate));
            margin-block-start: calc(37 * var(--rate));
    font-size: calc(16 * var(--rate));
  }
  .lpFooter__links--categories > * {
    line-height: calc(38 * var(--rate));
  }
  .lpFooter__credit {
    -webkit-margin-before: calc(94 * var(--rate));
            margin-block-start: calc(94 * var(--rate));
    font-size: calc(12 * var(--rate));
  }
}
/**
 * animation
 */
.anim-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: calc(50vh - var(--sticky-target-first-element-height) / 2);
}

.js-animation-trigger.anim-fade-in {
  transform: translate3d(0, 30px, 0);
  opacity: 0;
}
.js-animation-trigger.anim-fade-in.is-show {
  -webkit-animation: fade-in 1.5s forwards;
          animation: fade-in 1.5s forwards;
}

@-webkit-keyframes fade-in {
  0% {
    transform: translate3d(0, 30px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    transform: translate3d(0, 30px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}