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

Title : common.scss
For   : Page/feature/2025/ss2nd_preorder/

Created       : 2025-04-01
Last Modified : 2025-04-01

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

Content

////////////////////////////////////////////////// */
/**
 * variables
 */
#LB250409preorder {
  --color-dark: #222;
  --color-gray: #727272;
  --color-dark-pale: rgba(34, 34, 34, .4);
  --color-white: #fff;
  --color-dusty-blue: #79ADC9;
  --color-fresh-lime: #D1EA9B;
  --color-sky-breeze: #AAD1E5;
  --color-lavender-mist: #D6BAE2;
  --color-ruby-red: #D52342;
  --color-ocean-deep: #3389AA;
  --font-en-serif: "stix-two-text", serif;
  --font-en-sans: "stevie-sans", sans-serif;
  --font-ja: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
  --zindex-behind: -1;
  --zindex-base: 1;
  --zindex-overlay: 10;
  --zindex-floating-element: 20;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  #LB250409preorder {
    --rate: 100vw / 750;
    --border-container-gap: calc(10 * var(--rate));
    --lp-global-spacer: calc(160 * var(--rate));
    -webkit-padding-after: calc(290 * var(--rate));
            padding-block-end: calc(290 * var(--rate));
  }
  #LB250409preorder .hidden-sml {
    display: none !important;
  }
  #LB250409preorder .hidden-lrg {
    display: block !important;
  }
  .main-area {
    overflow: initial;
  }
  .main-area .main-inner {
    width: 100%;
  }
  .category__navBody {
    display: none;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #LB250409preorder {
    --rate: .1rem;
    --border-container-gap: calc(10 * var(--rate));
    --lp-global-spacer: calc(100 * var(--rate));
    -webkit-padding-after: calc(220 * var(--rate));
            padding-block-end: calc(220 * var(--rate));
  }
  #LB250409preorder .hidden-lrg {
    display: none !important;
  }
  #LB250409preorder .hidden-sml {
    display: block !important;
  }
}
/* --- for middle viewport --- */
@media screen and (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: 0.7142857143vw;
  }
}
/**
 * common
 */
.lp-lilybrown img,
.lp-lilybrown svg,
.lp-lilybrown video,
.lp-lilybrown picture {
  display: var(--display, block);
}
.lp-lilybrown img,
.lp-lilybrown svg,
.lp-lilybrown video {
  width: 100%;
  height: auto;
}
.lp-lilybrown a {
  display: var(--display, inline-block);
}
.lp-lilybrown a:has(img) {
  --display: block;
}
.lp-lilybrown a.splide__list {
  --display: flex;
}
.lp-lilybrown * {
  box-sizing: border-box;
  font-feature-settings: "halt";
  color: var(--color, var(--color-dark));
  letter-spacing: var(--letter-spacing, 0.02em);
}

.go-top,
.page-top {
  display: none !important;
}

.lp-lilybrown__sticky-container {
  position: -webkit-sticky;
  position: sticky;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lp-lilybrown__sticky-container {
    top: calc(100svh - var(--sticky-shell-height) - 20vh);
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lp-lilybrown__sticky-container {
    top: calc(100vh - var(--sticky-shell-height) - 50vh);
  }
}
/**
 * pager
 */
.carousel-pager {
  display: flex;
  justify-content: center;
}

.carousel-pager__progress {
  position: relative;
  display: block;
  background-color: var(--color-dark-pale);
}
.carousel-pager__progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--color-dark);
}
.carousel-pager__progress.is-active::after {
  -webkit-animation: progress 2.5s ease-in-out forwards;
          animation: progress 2.5s ease-in-out forwards;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .carousel-pager {
    -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));
  }
  .carousel-pager__progress {
    width: calc(120 * var(--rate));
    height: calc(2 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .carousel-pager {
    -moz-column-gap: calc(4 * var(--rate));
         column-gap: calc(4 * var(--rate));
    -webkit-margin-before: calc(10 * var(--rate));
            margin-block-start: calc(10 * var(--rate));
  }
  .carousel-pager__progress {
    width: calc(60 * var(--rate));
    height: calc(1 * var(--rate));
  }
}
/*# sourceMappingURL=common.css.map */