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

Title : style.scss
For   : Page/style/250214/

Created       : 2025-02-05
Last Modified : 2025-02-05

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

Content

////////////////////////////////////////////////// */
/**
 * variables, layouts
 */
#CE250214dress {
  --color-dark: #000;
  --font-en: "bellefair", sans-serif;
  --font-primary: var(--font-en);
  --color-ivory-tint: #FDFFE3;
  --color-sky-tint: #D6F0FF;
  --color-mint-tint: #E6FFD1;
  --color-lemon-tint: #FBFFCE;
  --color-pink-blush: #FFF0F6;
  --zindex-behind: -1;
  --zindex-base: 1;
  --zindex-front: 10;
  --zindex-float: 20;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  #CE250214dress {
    --section-gutter: 0;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  #CE250214dress {
    --section-gutter: calc(100 * var(--rate));
    --section-spacer: calc(75 * var(--rate));
  }
}
#CE250214dress {
  width: 100%;
  margin-inline: auto;
  font-family: var(--font-primary, var(--font-family));
}

.main-area .main-inner {
  max-width: 100%;
  width: 100%;
  padding-inline: 0;
}

#breadcrumb {
  max-width: 1200px;
  margin-inline: auto;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .header {
    background-color: transparent;
  }
  .header.js-header-background {
    background-color: transparent;
  }
  .header .header_icon_area > *:not(.btn-menu) {
    visibility: hidden;
    opacity: 0;
    z-index: -999;
  }
  .main-area.lp {
    -webkit-padding-before: 0 !important;
            padding-block-start: 0 !important;
  }
  #CE250214dress {
    --rate: 100vw / 750;
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
  #CE250214dress .hidden-sml {
    display: none !important;
  }
  #CE250214dress .carousel-for-large-viewport.splide {
    visibility: visible;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .header.is-fixed {
    position: fixed;
    transition: all 1000ms ease-out;
    transform: translateY(-100%);
  }
  .header.is-obverse {
    transform: translateY(-100%);
  }
  .header.is-reverse {
    transform: translateY(0%);
  }
  #CE250214dress {
    --rate: .1rem;
    -webkit-padding-before: calc(50 * var(--rate));
            padding-block-start: calc(50 * var(--rate));
  }
  #CE250214dress .hidden-lrg {
    display: none !important;
  }
  #CE250214dress .carousel-for-small-viewport.splide {
    visibility: visible;
  }
}
/* --- for middle viewport --- */
@media screen and (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: 0.7142857143vw;
  }
}
/**
 * common
 */
.lp-celford img,
.lp-celford picture {
  display: var(--display, block);
}
.lp-celford img,
.lp-celford video,
.lp-celford svg {
  width: 100%;
  height: auto;
}
.lp-celford iframe {
  width: 100%;
  height: 100%;
}
.lp-celford a {
  display: var(--display, inline-block);
}
.lp-celford a:has(img) {
  --display: block;
}
.lp-celford * {
  box-sizing: border-box;
  text-align: var(--text-align, center);
  font-weight: var(--font-weight, 400);
}

/**
 * first view
 */
.lp-celford__firstview {
  background-color: var(--color-ivory-tint);
  letter-spacing: -0.01em;
  line-height: 1;
}
.lp-celford__page-title--primary {
  display: block;
}
.lp-celford__page-title--secondary {
  display: flex;
  justify-content: space-between;
  letter-spacing: -0.01em;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lp-celford__firstview {
    -webkit-padding-before: calc(25 * var(--rate));
            padding-block-start: calc(25 * var(--rate));
    -webkit-padding-after: calc(65 * var(--rate));
            padding-block-end: calc(65 * var(--rate));
    padding-inline: calc(25 * var(--rate));
    font-size: calc(22.68 * var(--rate));
  }
  .lp-celford__firstview-text-container {
    -webkit-margin-before: calc(37 * var(--rate));
            margin-block-start: calc(37 * var(--rate));
  }
  .lp-celford__page-title {
    -webkit-padding-start: calc(38 * var(--rate));
            padding-inline-start: calc(38 * var(--rate));
    -webkit-padding-end: calc(42 * var(--rate));
            padding-inline-end: calc(42 * var(--rate));
  }
  .lp-celford__page-title--primary {
    -webkit-margin-before: calc(32 * var(--rate));
            margin-block-start: calc(32 * var(--rate));
  }
  .lp-celford__page-title--secondary {
    -webkit-padding-start: 0.4em;
            padding-inline-start: 0.4em;
    transform: translateX(calc(2 * var(--rate)));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lp-celford__firstview {
    padding-block: calc(50 * var(--rate));
    font-size: 1.3164285714vw;
  }
  .lp-celford__firstview-container {
    display: grid;
    grid-template-columns: 46.4285714286vw 1fr;
    -moz-column-gap: 1.7857142857vw;
         column-gap: 1.7857142857vw;
  }
  .lp-celford__firstview-images-container {
    grid-column: 1/span 2;
    display: grid;
    grid-template-columns: 76.4285714286vw 1fr;
    -moz-column-gap: 1.7857142857vw;
         column-gap: 1.7857142857vw;
    grid-row: 1;
  }
  .lp-celford__firstview-images-wrapper {
    grid-column: 1;
  }
  .lp-celford__firstview-images-wrapper + * {
    grid-column: 2;
  }
  .lp-celford__firstview-images {
    display: grid !important;
    grid-template-columns: 46.4285714286vw 1fr;
    -moz-column-gap: 1.7857142857vw;
         column-gap: 1.7857142857vw;
  }
  .lp-celford__firstview-image {
    align-self: start;
  }
  .lp-celford__firstview-text-container {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    position: relative;
    z-index: var(--zindex-front);
  }
  .lp-celford__page-title {
    -webkit-padding-start: 2.1428571429vw;
            padding-inline-start: 2.1428571429vw;
    -webkit-padding-end: 4.5vw;
            padding-inline-end: 4.5vw;
  }
  .lp-celford__page-title--primary {
    -webkit-margin-before: 1.6428571429vw;
            margin-block-start: 1.6428571429vw;
    transform: translateY(0.1428571429vw);
  }
  .lp-celford__page-title--secondary {
    padding-inline: 0.25em;
  }
}
/**
 * main contents
 */
.lp-celford__contents-container {
  position: relative;
  line-height: 1.5402704292;
}
.lp-celford__contents-sticky-title {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
}
.lp-celford__contents-sticky-title img {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  -webkit-padding-before: var(--sticky-position);
          padding-block-start: var(--sticky-position);
}
.lp-celford__contents-section:nth-child(1) {
  background-color: var(--color-sky-tint);
}
.lp-celford__contents-section:nth-child(2) {
  background-color: var(--color-mint-tint);
}
.lp-celford__contents-section:nth-child(3) {
  background-color: var(--color-lemon-tint);
}
.lp-celford__contents-section:nth-child(4) {
  background-color: var(--color-pink-blush);
}
.lp-celford__contents-shell {
  max-width: 1400px;
  margin-inline: auto;
}
.lp-celford__contents-block {
  display: grid;
}
.lp-celford__heading {
  margin-inline: auto;
}
.lp-celford__details {
  font-size: calc(17.01 * var(--rate));
}
.lp-celford__details--spacer {
  letter-spacing: -0.1em;
}
.lp-celford__prices > dt {
  font-size: calc(17.01 * var(--rate));
}
.lp-celford__prices > dd {
  font-size: 0;
}
.lp-celford__prices > dd > a {
  font-size: calc(17.01 * var(--rate));
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lp-celford__contents-container {
    letter-spacing: 0.015em;
  }
  .lp-celford__contents-sticky-title {
    --sticky-position: calc(35 * var(--rate));
    left: calc(25 * var(--rate));
    width: calc(36.25 * var(--rate));
  }
  .lp-celford__contents-section {
    -webkit-padding-after: calc(156 * var(--rate));
            padding-block-end: calc(156 * var(--rate));
  }
  .lp-celford__contents-section .lp-celford__contents-cell:nth-child(n+3) {
    -webkit-margin-before: var(--cell-spacer, calc(80 * var(--rate)));
            margin-block-start: var(--cell-spacer, calc(80 * var(--rate)));
    padding-inline: calc(150 * var(--rate));
  }
  .lp-celford__contents-section .lp-celford__contents-cell .carousel-for-large-viewport .splide__list {
    display: grid;
    grid-template-columns: 100%;
    row-gap: calc(80 * var(--rate));
  }
  .lp-celford__contents-section:nth-child(odd) .lp-celford__contents-cell:nth-child(1) {
    padding-block: var(--cell-gap, calc(80 * var(--rate)));
  }
  .lp-celford__contents-section:nth-child(even) .lp-celford__contents-cell:nth-child(1) {
    padding-block: calc(77 * var(--rate));
  }
  .lp-celford__contents-section:not(:first-child) .lp-celford__contents-cell:nth-child(1) {
    grid-row: 2;
  }
  .lp-celford__contents-section:not(:first-child) .lp-celford__contents-cell:nth-child(2) {
    grid-row: 1;
  }
  .lp-celford__contents-section:not(:first-child) .lp-celford__contents-cell:nth-child(3) {
    --cell-spacer: 0;
  }
  .lp-celford__contents-section:nth-child(3) .lp-celford__contents-cell:nth-child(1) {
    --cell-gap: calc(90 * var(--rate));
  }
  .lp-celford__contents-section:nth-child(1) .lp-celford__heading {
    width: calc(164 * var(--rate));
  }
  .lp-celford__contents-section:nth-child(3) .lp-celford__heading {
    width: calc(287 * var(--rate));
  }
  .lp-celford__contents-section:nth-child(3) .lp-celford__heading > * {
    transform: translateX(calc(5 * var(--rate)));
  }
  .lp-celford__contents-block {
    grid-template-columns: 100%;
  }
  .lp-celford__prices {
    -webkit-margin-before: calc(25 * var(--rate));
            margin-block-start: calc(25 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lp-celford__contents-container {
    letter-spacing: 0.03em;
  }
  .lp-celford__contents-sticky-title {
    --sticky-position: calc(50 * var(--rate));
    /*right: calc(50vw + 613 * var(--rate));*/
    left: calc(50* var(--rate));
    width: calc(36.25 * var(--rate));
  }
  .lp-celford__contents-section .lp-celford__contents-cell:nth-child(1) {
    align-self: center;
  }
  .lp-celford__contents-section .lp-celford__contents-cell:nth-child(2) {
    -webkit-padding-end: var(--section-gutter);
            padding-inline-end: var(--section-gutter);
  }
  .lp-celford__contents-section .lp-celford__contents-cell:nth-child(3) {
    -webkit-padding-start: var(--section-gutter);
            padding-inline-start: var(--section-gutter);
  }
  .lp-celford__contents-section .lp-celford__contents-cell:nth-child(4) {
    -webkit-padding-before: var(--section-spacer);
            padding-block-start: var(--section-spacer);
    -webkit-padding-start: var(--section-spacer);
            padding-inline-start: var(--section-spacer);
    -webkit-padding-end: calc(var(--section-gutter) + var(--section-spacer));
            padding-inline-end: calc(var(--section-gutter) + var(--section-spacer));
  }
  .lp-celford__contents-section:nth-child(1) .lp-celford__heading {
    width: calc(164 * var(--rate));
  }
  .lp-celford__contents-section:nth-child(3) .lp-celford__heading {
    width: calc(287 * var(--rate));
  }
  .lp-celford__contents-block {
    grid-template-columns: repeat(2, 1fr);
  }
  .lp-celford__prices {
    -webkit-margin-before: calc(37 * var(--rate));
            margin-block-start: calc(37 * var(--rate));
  }
}
/**
 * footer
 */
.lp-celford__footer {
  position: relative;
}
.lp-celford__footer-line {
  position: absolute;
  left: 0;
  right: 0;
  width: 1px;
  margin: auto;
}
.lp-celford__footer-line::after {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 0;
  background-color: #090000;
}
.lp-celford__footer-link-all-button {
  font-size: calc(42.52 * var(--rate));
  line-height: 1;
  letter-spacing: 0.01em;
}
.lp-celford__footer-closing-thumbnail {
  width: calc(450 * var(--rate));
  margin-inline: auto;
}
.lp-celford__footer-closing-title {
  width: calc(436.62 * var(--rate));
  margin-inline: auto;
}
.lp-celford__footer-closing-staffcredit {
  letter-spacing: 0.02em;
}
.lp-celford__footer-closing-staffcredit > dl {
  display: flex;
  justify-content: center;
}
.lp-celford__footer-closing-brand-logo {
  margin-inline: auto;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lp-celford__footer {
    -webkit-padding-before: calc(208 * var(--rate));
            padding-block-start: calc(208 * var(--rate));
    -webkit-padding-after: calc(80 * var(--rate));
            padding-block-end: calc(80 * var(--rate));
  }
  .lp-celford__footer-line {
    top: calc(30 * var(--rate));
    height: calc(150 * var(--rate));
  }
  .lp-celford__footer-closing {
    -webkit-margin-before: calc(25 * var(--rate));
            margin-block-start: calc(25 * var(--rate));
  }
  .lp-celford__footer-closing-title {
    -webkit-margin-before: calc(50 * var(--rate));
            margin-block-start: calc(50 * var(--rate));
  }
  .lp-celford__footer-closing-staffcredit {
    -webkit-margin-before: calc(42 * var(--rate));
            margin-block-start: calc(42 * var(--rate));
    font-size: calc(17.01 * var(--rate));
    line-height: 2.1751910641;
  }
  .lp-celford__footer-closing-brand-logo {
    width: calc(283 * var(--rate));
    -webkit-margin-before: calc(150 * var(--rate));
            margin-block-start: calc(150 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .lp-celford__footer {
    -webkit-padding-before: calc(334 * var(--rate));
            padding-block-start: calc(334 * var(--rate));
    -webkit-padding-after: calc(200 * var(--rate));
            padding-block-end: calc(200 * var(--rate));
  }
  .lp-celford__footer-line {
    top: calc(100 * var(--rate));
    height: calc(185 * var(--rate));
  }
  .lp-celford__footer-closing {
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
  }
  .lp-celford__footer-closing-title {
    -webkit-margin-before: calc(51 * var(--rate));
            margin-block-start: calc(51 * var(--rate));
  }
  .lp-celford__footer-closing-title > * {
    transform: translateX(calc(3 * var(--rate)));
  }
  .lp-celford__footer-closing-staffcredit {
    -webkit-margin-before: calc(58 * var(--rate));
            margin-block-start: calc(58 * var(--rate));
    font-size: calc(14.17 * var(--rate));
    line-height: 2.1100917431;
  }
  .lp-celford__footer-closing-staffcredit > * {
    transform: translateX(calc(4 * var(--rate)));
  }
  .lp-celford__footer-closing-brand-logo {
    width: calc(258 * var(--rate));
    -webkit-margin-before: calc(106 * var(--rate));
            margin-block-start: calc(106 * var(--rate));
  }
}
/**
 * animation
 */
.js-animation-trigger.anim-fade-up {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: all 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js-animation-trigger.anim-fade-up.is-show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.js-animation-trigger.anim-footer .lp-celford__footer-link-all-button {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: all 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 1000ms;
}
.js-animation-trigger.anim-footer .lp-celford__footer-closing-thumbnail {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: all 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 2000ms;
}
.js-animation-trigger.anim-footer .lp-celford__footer-closing-title {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: all 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 2500ms;
}
.js-animation-trigger.anim-footer .lp-celford__footer-closing-staffcredit {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: all 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 3000ms;
}
.js-animation-trigger.anim-footer .lp-celford__footer-closing-brand-logo {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: all 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 3500ms;
}
.js-animation-trigger.anim-footer.is-show .lp-celford__footer-line::after {
  -webkit-animation: stretch 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
          animation: stretch 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.js-animation-trigger.anim-footer.is-show .lp-celford__footer-link-all-button, .js-animation-trigger.anim-footer.is-show .lp-celford__footer-closing-thumbnail, .js-animation-trigger.anim-footer.is-show .lp-celford__footer-closing-title, .js-animation-trigger.anim-footer.is-show .lp-celford__footer-closing-staffcredit, .js-animation-trigger.anim-footer.is-show .lp-celford__footer-closing-brand-logo {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .js-animation-trigger.anim-firstview .lp-celford__firstview-images-container {
    opacity: 0;
    transition: all 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .js-animation-trigger.anim-firstview .lp-celford__firstview-text-container {
    opacity: 0;
    transition: all 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 1000ms;
  }
  .js-animation-trigger.anim-firstview.is-show .lp-celford__firstview-images-container, .js-animation-trigger.anim-firstview.is-show .lp-celford__firstview-text-container {
    opacity: 1;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .js-animation-trigger.anim-firstview .lp-celford__firstview-images .lp-celford__firstview-image {
    opacity: 0;
    transition: all 1500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .js-animation-trigger.anim-firstview .lp-celford__firstview-images .lp-celford__firstview-image:nth-child(2) {
    transition-delay: 200ms;
  }
  .js-animation-trigger.anim-firstview .lp-celford__firstview-images-wrapper + .lp-celford__firstview-image {
    opacity: 0;
    transition: all 1500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 400ms;
  }
  .js-animation-trigger.anim-firstview .lp-celford__firstview-text-container {
    opacity: 0;
    transition: all 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 1000ms;
  }
  .js-animation-trigger.anim-firstview.is-show .lp-celford__firstview-images .lp-celford__firstview-image {
    opacity: 1;
  }
  .js-animation-trigger.anim-firstview.is-show .lp-celford__firstview-images-wrapper + .lp-celford__firstview-image {
    opacity: 1;
  }
  .js-animation-trigger.anim-firstview.is-show .lp-celford__firstview-text-container {
    opacity: 1;
  }
}
@-webkit-keyframes stretch {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes stretch {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}