@charset "UTF-8";

:root {
  --pw: 1400;
  --sw: 750;
  --artboard-pw: 462;
  --artboard-sw: 750;
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
  --ratio: 1;
  --variable: calc(100vw / var(--sw));
}

@media (min-width: 769px) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}

.p-feature {
  --base-font-color: #000;
  --color-accent: #000;
  --color-tint: #efefef;
  --color-note: #757575;

  --lp-font-ja: "articulat-cf", "Noto Sans JP", hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-en: "articulat-cf", "Noto Sans JP", Verdana, Helvetica, Arial, sans-serif;

  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);
  --letter-spacing: .06em;

  --z-base: 1;
  --z-sticky: 10;
  --z-modal-overlay: 1000;
  --z-modal: 1010;
}

.lp_contents {
  position: relative;
  font-family: var(--lp-font-ja);
  background-color: #ffffff;
  color: var(--base-font-color, #000);
  font-style: normal;
  line-height: 1.75;
  letter-spacing: var(--letter-spacing);

  & * {
    font-feature-settings: "pkna";
  }

  & *,
  & *:before,
  & *:after {
    box-sizing: border-box;
  }

  & :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, a, button, figure, figcaption, span, sup, b) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: var(--letter-spacing);
    font-feature-settings: "pkna";
  }

  & ul,
  & ol,
  & li {
    list-style: none;
  }

  & :where(img) {
    display: block;
    width: 100%;
    height: auto;
  }

  & :where(a, a:before, a:after, a img, button) {
    --duration: .3s;
    --timing: ease-in-out;
    transition: opacity var(--duration) var(--timing), color var(--duration) var(--timing), background-color var(--duration) var(--timing), border-color var(--duration) var(--timing);
  }

  & :where(a) {
    color: inherit;
    text-decoration: none;
  }

  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
}

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

#footer,
footer,
#FooterWrap {
  position: relative;
  z-index: 2;
}

.lp_contents a:hover {
  opacity: 1;
}

.lp_contents {
  & .u-d-lg {
    @media (max-width: 768px) {
      display: none !important;
    }
  }

  & .u-d-md {
    @media (min-width: 769px) {
      display: none !important;
    }
  }
}

.lp_contents {
  & .ani-inview {
    opacity: 0;
    transition: opacity .8s var(--transition-timing);

    &.is-active {
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents .ani-inview {
    opacity: 1;
    transition: none;
  }

  .lp_contents .modal,
  .lp_contents .project-popup__image {
    transition: none;
  }
}

.lp_contents {
  & .modal {
    position: fixed;
    z-index: var(--z-modal-overlay);
    inset: 0;
    display: none;
    opacity: 0;
    background: #fff;
    transition: opacity .4s var(--transition-timing);

    @media (min-width: 769px) {
      background: rgb(230 230 230 / .5);
    }

    &.is-open {
      display: block;

      @media (min-width: 769px) {
        display: grid;
        place-items: center;
      }
    }

    &.is-visible {
      opacity: 1;
    }
  }

  & .modal_outside {
    width: 100%;
    height: 100%;
    overflow: hidden;

    @media (min-width: 769px) {
      position: relative;
      width: calc(750 * var(--rem));
      height: 95vh;
      background: #fff;
    }
  }

  & .modal__body {
    position: relative;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;

    @media (min-width: 769px) {
      position: static;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.lp_contents {
  & .component-button {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(264 * var(--rem));
    height: calc(80 * var(--rem));
    padding-right: calc(11 * var(--rem));
    border: calc(2 * var(--rem)) solid var(--color-accent);
    border-radius: calc(4 * var(--rem));
    font-size: calc(26 * var(--rem));
    margin-inline: auto;
    white-space: nowrap;

    &.component-button--wide {
      width: calc(540 * var(--rem));
    }

    &.component-button--gift {
      width: calc(594 * var(--rem));
    }

    &.component-button--all {
      width: calc(234 * var(--rem));
    }
  }

  & .component-button__arrow {
    position: absolute;
    top: calc(31 * var(--rem));
    right: calc(10 * var(--rem));
    display: block;
    width: calc(15 * var(--rem));
    height: calc(15 * var(--rem));
    background: url(../img/arrow.svg) no-repeat;
    background-size: contain;
    content: "";
    transform: rotate(270deg);
  }

  & .component-badge {
    display: grid;
    place-items: center;
    width: calc(120 * var(--rem));
    height: calc(38 * var(--rem));
    padding-bottom: calc(4 * var(--rem));
    border-radius: calc(4 * var(--rem));
    background: var(--color-tint);
    font-size: calc(26 * var(--rem));
    line-height: 1;
    white-space: nowrap;
  }

  & .component-day {
    margin-left: calc(4 * var(--rem));
    font-feature-settings: "palt";
    letter-spacing: .1em;
  }

  & .component-tax {
    font-feature-settings: "palt";
    font-weight: inherit;
    letter-spacing: .1em;
    font-weight: inherit;
  }

  & .component-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(29 * var(--rem));
    width: fit-content;
    margin-inline: auto;
    font-size: calc(26 * var(--rem));
    white-space: nowrap;
  }

  & .component-toggle::after {
    content: "";
    position: absolute;
    inset: calc(-21 * var(--rem)) 0;
  }

  & .component-toggle__label--close {
    display: none;
  }

  & .is-open > .component-toggle .component-toggle__label--more {
    display: none;
  }

  & .is-open > .component-toggle .component-toggle__label--close {
    display: block;
  }

  & .component-toggle__icon {
    position: relative;
    flex: none;
    width: calc(26 * var(--rem));
    height: calc(26 * var(--rem));

    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
      background: var(--color-accent);
    }

    &::before {
      width: 100%;
      height: calc(2 * var(--rem));
    }

    &::after {
      width: calc(2 * var(--rem));
      height: 100%;
    }
  }

  & .is-open > .component-toggle .component-toggle__icon::after {
    display: none;
  }

  & .component-zoom {
    position: absolute;
    display: block;
    width: calc(36 * var(--rem));
    height: calc(36 * var(--rem));
    padding: calc(26 * var(--rem));
    box-sizing: content-box;
    translate: calc(-26 * var(--rem)) calc(-26 * var(--rem));
  }

  & .component-close {
    position: absolute;
    top: calc(30 * var(--rem));
    right: calc(30 * var(--rem));
    width: calc(102 * var(--rem));
    height: calc(102 * var(--rem));

    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
      width: calc(140 * var(--rem));
      height: calc(2 * var(--rem));
      background: var(--color-accent);
      top: 50%;
      left: calc(-20 * var(--rem));
      @media (min-width: 769px) {
        top: 0;
      }
    }

    &::before {
      rotate: 45deg;
    }

    &::after {
      rotate: -45deg;
    }
  }
}

.lp_contents {
  & .project-lead {
    position: relative;
    margin-top: calc(98 * var(--rem));
  }

  & .project-lead__title {
    font-family: var(--lp-font-en);
    font-size: calc(40 * var(--rem));
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
  }

  & .project-lead__body {
    position: relative;
    z-index: var(--z-base);
    margin-top: calc(56 * var(--rem));
    max-height: calc(266 * var(--rem));
    overflow: hidden;
    transition: max-height .4s var(--transition-timing);

    &::after {
      content: "";
      position: absolute;
      top: calc(14 * var(--rem));
      left: 0;
      width: 100%;
      height: calc(253 * var(--rem));
      background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff 81%);
      pointer-events: none;
      transition: opacity .4s var(--transition-timing);
    }
  }

  & .project-lead.is-open .project-lead__body::after {
    opacity: 0;
  }

  & .project-lead__text {
    font-size: calc(26 * var(--rem));
    text-align: center;
    white-space: nowrap;
    line-height: calc(45.5/26);
  }

  & .project-lead__toggle {
    position: relative;
    z-index: var(--z-base);
    margin-top: calc(-39 * var(--rem));
  }

  & .project-lead.is-open .project-lead__toggle {
    margin-top: calc(40 * var(--rem));
  }
}

.lp_contents {
  & .project-release {
    position: relative;
    margin-top: calc(151 * var(--rem));
  }

  & .project-release__deco {
    position: absolute;
    top: calc(-116 * var(--rem));
    left: calc(-23 * var(--rem));
    width: calc(240 * var(--rem));
  }

  & .project-release__row {
    position: relative;
    display: flex;
    width: calc(692 * var(--rem));
    margin: 0 auto;
    padding: 0 0 calc(55 * var(--rem)) 0;

    @media (min-width: 769px) {
        padding: 0 0 calc(75 * var(--rem)) 0;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: calc(2 * var(--rem));
      height: calc(148 * var(--rem));
      background: var(--color-accent);
    }
    &::after {
      content: "";
      position: absolute;
      bottom: calc(0 * var(--rem));
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: calc(2 * var(--rem));
      background: var(--color-accent);
    }
  }

  & .project-release__col {
    padding-top: calc(22 * var(--rem));
    text-align: center;

    &.project-release__col--reserve {
      flex: 1;
    }

    &.project-release__col--launch {
      flex: 1;
    }
  }

  & .project-release__label {
    font-size: calc(26 * var(--rem));
    white-space: nowrap;
  }

  & .project-release__date {
    margin-top: calc(17 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(30 * var(--rem));
    white-space: nowrap;
  }

  & .project-release__label--advance {
    position: relative;
    margin: 0 auto;
    padding-top: calc(51 * var(--rem));
    text-align: center;
  }

  & .project-release__date--advance {
    margin-top: calc(17 * var(--rem));
    text-align: center;
  }

  & .project-release__place {
    margin-top: calc(15 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(26 * var(--rem));
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.06em;
  }

  & .project-release__action {
    margin-top: calc(52 * var(--rem));
  }
}


.lp_contents {
  & .project-nav {
    margin-top: calc(160 * var(--rem));
  }

  & .project-nav__list {
    display: flex;
    justify-content: center;
    gap: calc(30 * var(--rem));
  }

  & .project-nav__item {
    width: calc(150 * var(--rem));
  }

  & .project-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(343 * var(--rem));
  }

  & .project-nav__thumb {
    width: calc(130 * var(--rem));
  }

  & .project-nav__label {
    margin-top: calc(29 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(26 * var(--rem));
    text-align: center;
    white-space: nowrap;
    line-height: calc(45.5/26);
  }

  & .project-nav__item--nothumb .project-nav__label {
    margin-top: calc(111 * var(--rem));
  }

  & .project-nav__caret {
    margin-top: auto;
    width: calc(15 * var(--rem));
    height: calc(15 * var(--rem));
    background: url(../img/arrow.svg) no-repeat;
    background-size: contain;
    content: "";
  }
}

.lp_contents {
  & .project-collab {
    margin-top: calc(152 * var(--rem));
    margin-inline: auto;
    width: calc(690 * var(--rem));
    padding: calc(53 * var(--rem)) 0 calc(91 * var(--rem));
    background: var(--color-tint);
    text-align: center;
    border-radius:calc(12 * var(--rem));
  }

  & .project-collab__label {
    font-family: var(--lp-font-en);
    font-size: calc(30 * var(--rem));
    white-space: nowrap;
  }

  & .project-collab__logo {
    margin-top: calc(18 * var(--rem));
    margin-inline: auto;
    width: calc(270 * var(--rem));
  }

  & .project-collab__text {
    margin-top: calc(52 * var(--rem));
    font-size: calc(26 * var(--rem));
    white-space: nowrap;
    line-height: calc(45.5/26);
  }
}

.lp_contents {
  & .project-item {
    margin-top: calc(160 * var(--rem));
  }

  & .project-item--cheek {
    margin-top: calc(159 * var(--rem));
  }

  & .project-item--balm {
    margin-top: calc(134 * var(--rem));
  }

  & .project-item__slider {
    width: 100%;
  }

  & .project-item__pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(14 * var(--rem));
    margin-top: calc(20 * var(--rem));

    & .swiper-pagination-bullet {
      display: grid;
      place-items: center;
      width: calc(28 * var(--rem));
      height: calc(88 * var(--rem));
      margin: calc(-37 * var(--rem)) 0;
      border-radius: 0;
      background: none;
      opacity: 1;

      &::before {
        content: "";
        width: calc(14 * var(--rem));
        height: calc(14 * var(--rem));
        border: calc(2 * var(--rem)) solid var(--color-tint);
        border-radius: 50%;
      }
    }

    & .swiper-pagination-bullet-active::before {
      background: var(--color-tint);
    }
  }

  & .project-item__ghost {
    font-family: var(--lp-font-en);
    font-size: calc(88 * var(--rem));
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .012em;
    color: var(--color-tint);
    text-align: center;
    white-space: nowrap;
  }

  & .project-item--eyes .project-item__ghost {
    margin-top: calc(82 * var(--rem));
  }

  & .project-item--cheek .project-item__ghost {
    margin-top: calc(82 * var(--rem));
  }

  & .project-item__name {
    font-size: calc(30 * var(--rem));
    text-align: center;
    white-space: nowrap;
  }

  & .project-item--eyes .project-item__name {
    margin-top: calc(56 * var(--rem));
  }

  & .project-item--cheek .project-item__name {
    margin-top: calc(54 * var(--rem));
  }

  & .project-item--balm .project-item__name {
    margin-top: calc(49 * var(--rem));
  }

  & .project-item__price {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--lp-font-en);
    font-size: calc(26 * var(--rem));
    white-space: nowrap;

    & .component-badge {
      margin-top: calc(5 * var(--rem));
    }
  }

  & .project-item--eyes .project-item__price {
    gap: calc(20 * var(--rem));
    margin: calc(16 * var(--rem)) auto 0;
  }

  & .project-item__price--pair {
    gap: calc(20 * var(--rem));
    margin: calc(19 * var(--rem)) auto 0;
  }

  & .project-item__price-group {
    display: flex;
    gap: calc(5 * var(--rem));
  }

  & .project-item__visual {
    position: relative;
    margin-top: calc(58 * var(--rem));
    background: #fff;
  }

  & .project-item--cheek .project-item__visual,
  & .project-item--balm .project-item__visual {
    margin-top: calc(58 * var(--rem));
  }

  & .project-item__visual-link {
    display: block;
  }

  & .project-item__visual-sub {
    position: absolute;
    pointer-events: none;
  }

  & .project-item__visual-sub--black {
    top: calc(214 * var(--rem));
    left: calc(550 * var(--rem));
    width: calc(170 * var(--rem));
  }

  & .project-item__visual-sub--white {
    top: calc(342 * var(--rem));
    left: calc(470 * var(--rem));
    width: calc(170 * var(--rem));
  }

  & .project-item__visual-sub--chain {
    top: calc(44 * var(--rem));
    left: calc(570 * var(--rem));
    width: calc(130 * var(--rem));
  }

  & .project-item__visual-sub--chainbox {
    top: calc(117 * var(--rem));
    left: calc(420 * var(--rem));
    width: calc(180 * var(--rem));
  }

  & .project-item__visual-sub--box {
    top: calc(264 * var(--rem));
    left: calc(570 * var(--rem));
    width: calc(130 * var(--rem));
  }

  & .project-item__visual-sub--single {
    top: calc(323 * var(--rem));
    left: calc(519 * var(--rem));
    width: calc(111 * var(--rem));
  }

  & .project-item__visual .component-zoom {
    top: calc(497 * var(--rem));
    left: calc(684 * var(--rem));
  }

  & .project-item--cheek .project-item__visual .component-zoom,
  & .project-item--balm .project-item__visual .component-zoom {
    top: calc(434 * var(--rem));
  }

  & .project-item__shade {
    margin-top: calc(20 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(26 * var(--rem));
    text-align: center;
    white-space: nowrap;
  }

  & .project-item__text {
    font-size: calc(30 * var(--rem));
    text-align: center;
    white-space: nowrap;
    line-height: calc(52.5/30);
  }

  & .project-item--eyes .project-item__text {
    margin-top: calc(87 * var(--rem));
  }

  & .project-item--cheek .project-item__text {
    margin-top: calc(87 * var(--rem));
  }

  & .project-item--balm .project-item__text {
    margin-top: calc(81 * var(--rem));
  }

  & .project-item--balm .project-item__text--fragrance {
    margin-top: calc(49 * var(--rem));
    font-size: calc(26 * var(--rem));
    line-height: calc(45.5/26);
    letter-spacing: 0.02em;
  }

  & .project-item__action {
    margin-top: calc(49 * var(--rem));
  }

  & .project-item__action--wide {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--rem));
    margin-top: calc(49 * var(--rem));
    align-items: center;
  }
}

.lp_contents {
  & .project-color {
    margin-top: calc(100 * var(--rem));
  }

  & .project-color__body {
    position: relative;
    max-height: calc(597 * var(--rem));
    overflow: hidden;
    transition: max-height .4s var(--transition-timing);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff);
      pointer-events: none;
      transition: opacity .4s var(--transition-timing);
    }
  }

  & .project-color.is-open .project-color__body::after {
    opacity: 0;
  }

  & .project-color__row {
    display: flex;
    justify-content: center;
    min-height: calc(300 * var(--rem));
    gap: calc(50 * var(--rem));
  }

  & .project-color__chart {
    display: grid;
    grid-template-columns: repeat(3, calc(76 * var(--rem)));
    grid-auto-rows: calc(76 * var(--rem));
    gap: calc(6 * var(--rem));
    margin-left: calc(30 * var(--rem));
    width: calc(240 * var(--rem));

    & span {
      display: grid;
      place-items: center;
      border: calc(2 * var(--rem)) solid var(--color-tint);
      border-radius: calc(6 * var(--rem));
      font-family: var(--lp-font-en);
      font-size: calc(25 * var(--rem));
    }
  }

  & .project-color__cell {
    width: calc(300 * var(--rem));
  }

  & .project-color__row--head .project-color__cell {
    margin-left: calc(30 * var(--rem));
  }

  & .project-color__block {
    display: flex;
    align-items: center;
    gap: calc(30 * var(--rem));
  }

  & .project-color__swatch {
    width: calc(70 * var(--rem));
    border-radius: calc(6 * var(--rem));
  }

  & .project-color__name {
    font-family: var(--lp-font-en);
    font-size: calc(26 * var(--rem));
    white-space: nowrap;
  }

  & .project-color__desc {
    margin-top: calc(20 * var(--rem));
    font-size: calc(22 * var(--rem));
    letter-spacing: .02em;
    line-height: calc(38.5/22);
  }

  & .project-color__toggle {
    position: relative;
    margin-top: calc(-38 * var(--rem));
  }

  & .project-color.is-open .project-color__toggle {
    margin-top: calc(-14 * var(--rem));
  }
}

.lp_contents {
  & .project-kit {
    position: relative;
    margin-top: calc(152 * var(--rem));
    margin-inline: auto;
    width: calc(690 * var(--rem));
    padding: calc(60 * var(--rem)) 0 calc(100 * var(--rem));
    border: calc(2 * var(--rem)) solid var(--color-tint);
    border-radius: calc(10 * var(--rem));
  }

  & .project-kit__ghost {
    position: absolute;
    top: calc(60 * var(--rem));
    left: calc(30 * var(--rem));
    writing-mode: vertical-rl;
    font-family: var(--lp-font-en);
    font-size: calc(78 * var(--rem));
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .012em;
    color: var(--color-tint);
    white-space: nowrap;
  }

  & .project-kit__visual {
    position: relative;
  }

  & .project-kit__photo {
    margin-inline: auto;
    width: calc(686 * var(--rem));
  }

  & .project-kit__scrunchie {
    position: absolute;
    top: 0;
    left: calc(138 * var(--rem));
    width: calc(230 * var(--rem));
  }

  & .project-kit__name {
    margin-top: calc(55 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(30 * var(--rem));
    text-align: center;
    white-space: nowrap;
  }

  & .project-kit__price {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: calc(20 * var(--rem));
    margin: calc(18 * var(--rem)) auto 0;
    font-family: var(--lp-font-en);
    font-size: calc(26 * var(--rem));
    white-space: nowrap;

    & .component-badge {
      margin-top: calc(5 * var(--rem));
    }
  }

  & .project-kit__text {
    position: relative;
    z-index: var(--z-base);
    margin-top: calc(47 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(26 * var(--rem));
    text-align: center;
    white-space: nowrap;
    line-height: calc(45.5/26);
  }

  & .project-kit__action {
    margin-top: calc(53 * var(--rem));
  }

  & .project-kit__deco {
    position: absolute;
    top: calc(577 * var(--rem));
    left: calc(494 * var(--rem));
    width: calc(170 * var(--rem));
  }
}

.lp_contents {
  & .project-shade {
    margin-top: calc(94 * var(--rem));
  }

  & .project-shade__item + .project-shade__item {
    margin-top: calc(53 * var(--rem));
  }

  & .project-shade__item:last-child {
    margin-top: calc(48 * var(--rem));
  }

  & .project-shade__link {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-inline: auto;
    width: calc(650 * var(--rem));
  }

  & .project-shade__body {
    width: calc(430 * var(--rem));
  }

  & .project-shade__name {
    font-family: var(--lp-font-en);
    font-size: calc(26 * var(--rem));
    white-space: nowrap;
  }

  & .project-shade__desc {
    margin-top: calc(20 * var(--rem));
    font-size: calc(22 * var(--rem));
    letter-spacing: .02em;
    line-height: calc(38.5/22);
  }

  & .project-shade__swatch {
    flex-shrink: 0;
    margin-top: calc(6 * var(--rem));
    width: calc(170 * var(--rem));
  }

  & .project-shade__item:last-child .project-shade__swatch {
    margin-top: calc(24 * var(--rem));
  }
}

.lp_contents {
  & .project-fragrance {
    position: relative;
    margin-top: calc(104 * var(--rem));
    margin-left: calc(33 * var(--rem));
    width: calc(614 * var(--rem));
    aspect-ratio: 614 / 526;
    background-image: url(../img/fragrance-pyramid.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    color: #fff;
  }

  & .project-fragrance__ghost {
    position: absolute;
    top: calc(-2 * var(--rem));
    left: calc(526 * var(--rem));
    writing-mode: vertical-rl;
    font-family: var(--lp-font-en);
    font-size: calc(78 * var(--rem));
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .012em;
    color: var(--color-tint);
    white-space: nowrap;
  }

  & .project-fragrance__note {
    position: absolute;
    font-family: var(--lp-font-en);
    font-size: calc(26 * var(--rem));
    font-weight: 700;
    white-space: nowrap;
  }

  & .project-fragrance__list {
    position: absolute;
    font-size: calc(22 * var(--rem));
    text-align: center;
    white-space: nowrap;
    line-height: calc(38.5/22);
  }

  & .project-fragrance__note--top {
    top: calc(60 * var(--rem));
    left: calc(282 * var(--rem));
  }

  & .project-fragrance__list--top {
    top: calc(105 * var(--rem));
    left: calc(238 * var(--rem));
    width: calc(139 * var(--rem));
  }

  & .project-fragrance__note--middle {
    top: calc(204 * var(--rem));
    left: calc(263 * var(--rem));
  }

  & .project-fragrance__list--middle {
    top: calc(250 * var(--rem));
    left: calc(180 * var(--rem));
    width: calc(255 * var(--rem));
  }

  & .project-fragrance__note--last {
    top: calc(387 * var(--rem));
    left: calc(279 * var(--rem));
  }

  & .project-fragrance__list--last {
    top: calc(433 * var(--rem));
    left: calc(121 * var(--rem));
    width: calc(372 * var(--rem));
  }
}

.lp_contents {
  & .project-wrapping {
    position: relative;
    margin-top: calc(150 * var(--rem));
    margin-inline: auto;
    width: calc(690 * var(--rem));
    padding: calc(60 * var(--rem)) 0 calc(100 * var(--rem));
    border: calc(2 * var(--rem)) solid var(--color-tint);
    border-radius: calc(10 * var(--rem));
    text-align: center;
  }

  & .project-wrapping__ghost {
    position: absolute;
    top: calc(60 * var(--rem));
    left: calc(30 * var(--rem));
    writing-mode: vertical-rl;
    font-family: var(--lp-font-en);
    font-size: calc(78 * var(--rem));
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .012em;
    color: var(--color-tint);
    white-space: nowrap;
    text-align: left;
  }

  & .project-wrapping__visual {
    position: relative;
    height: calc(475 * var(--rem));
  }

  & .project-wrapping__item {
    position: absolute;
  }

  & .project-wrapping__item--ribbon {
    top: 0;
    left: calc(486 * var(--rem));
    width: calc(190 * var(--rem));
  }

  & .project-wrapping__item--pouch {
    top: calc(54 * var(--rem));
    left: calc(395 * var(--rem));
    width: calc(140 * var(--rem));
  }

  & .project-wrapping__item--bag-large {
    top: calc(107 * var(--rem));
    left: calc(194 * var(--rem));
    width: calc(190 * var(--rem));
  }

  & .project-wrapping__item--card {
    top: calc(144 * var(--rem));
    left: calc(486 * var(--rem));
    width: calc(170 * var(--rem));
  }

  & .project-wrapping__item--bag-small {
    top: calc(213 * var(--rem));
    left: calc(328 * var(--rem));
    width: calc(110 * var(--rem));
  }

  & .project-wrapping__lead {
    position: relative;
    z-index: var(--z-base);
    font-family: var(--lp-font-en);
    font-size: calc(26 * var(--rem));
    white-space: nowrap;
    line-height: calc(45.5/26);
  }

  & .project-wrapping__title {
    margin-top: calc(25 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(30 * var(--rem));
    white-space: nowrap;
  }

  & .project-wrapping__note {
    margin-top: calc(50 * var(--rem));
    font-size: calc(22 * var(--rem));
    color: var(--color-note);
    white-space: nowrap;
    line-height: calc(38.5/22);
  }

  & .project-wrapping__action {
    margin-top: calc(52 * var(--rem));
  }

  & .project-wrapping__deco {
    position: absolute;
    top: calc(425 * var(--rem));
    left: calc(20 * var(--rem));
    width: calc(170 * var(--rem));
  }
}

.lp_contents {
  & .project-novelty {
    margin-top: calc(146 * var(--rem));
  }

  & .project-novelty__label {
    font-size: calc(30 * var(--rem));
    text-align: center;
    white-space: nowrap;
  }

  & .project-novelty__ghost {
    margin-top: calc(15 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(78 * var(--rem));
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .012em;
    color: var(--color-tint);
    text-align: center;
    white-space: nowrap;
  }

  & .project-novelty__card {
    margin-top: calc(-16 * var(--rem));
    margin-inline: auto;
    width: calc(690 * var(--rem));
    padding: calc(60 * var(--rem)) 0 calc(92 * var(--rem));
    background: var(--color-tint);
    text-align: center;
  }

  & .project-novelty__photo {
    margin-inline: auto;
    width: calc(490 * var(--rem));
  }

  & .project-novelty__date {
    position: relative;
    margin-top: calc(57 * var(--rem));
    padding-bottom: calc(6 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(30 * var(--rem));
    white-space: nowrap;
    font-weight: 700;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: calc(186 * var(--rem));
      width: calc(318 * var(--rem));
      height: calc(2 * var(--rem));
      background: var(--color-accent);
    }
  }

  & .project-novelty__date-em {
    font-weight: 700;
  }

  & .project-novelty__lead {
    margin-top: calc(52 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(26 * var(--rem));
    white-space: nowrap;
    line-height: calc(45.5/26);
  }

  & .project-novelty__title {
    margin-top: calc(22 * var(--rem));
    font-size: calc(30 * var(--rem));
    white-space: nowrap;
  }

  & .project-novelty__note {
    margin-top: calc(53 * var(--rem));
    font-size: calc(22 * var(--rem));
    color: var(--color-note);
    white-space: nowrap;
    line-height: calc(38.5/22);
  }
}

.lp_contents {
  & .project-look {
    margin-top: calc(141 * var(--rem));
  }

  & .project-look__ghost {
    font-family: var(--lp-font-en);
    font-size: calc(78 * var(--rem));
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .012em;
    color: var(--color-tint);
    text-align: center;
    white-space: nowrap;
  }

  & .project-look__block {
    position: relative;
    margin-top: calc(100 * var(--rem));
  }

  & .project-look__block + .project-look__block {
    margin-top: calc(194 * var(--rem));
  }

  & .project-look__badge {
    position: absolute;
    z-index: var(--z-base);
    top: calc(-40 * var(--rem));
    left: calc(30 * var(--rem));
    width: calc(100 * var(--rem));
  }

  & .project-look__slider,
  & .project-look__slider .swiper-wrapper {
    z-index: auto;
  }

  & .project-look__number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 100%;
    font-family: var(--lp-font-en);
    font-size: calc(40 * var(--rem));
    font-weight: 700;
    text-align: center;
  }

  & .project-look__thumbs {
    display: flex;
    justify-content: center;
    gap: calc(40 * var(--rem));
    margin-top: calc(40 * var(--rem));
  }

  & .project-look__thumb {
    position: relative;
    display: block;
    width: calc(150 * var(--rem));

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgb(255 255 255 / .5);
      opacity: 0;
      transition: opacity .3s ease-in-out;
    }

    &.is-active::after {
      opacity: 1;
    }
  }

  & .project-look__items {
    position: relative;
    display: flex;
    justify-content: center;
    gap: calc(140 * var(--rem));
    margin-top: calc(60 * var(--rem));
  }

  & .project-look__item {
    position: relative;
    width: calc(210 * var(--rem));
    background: #fff;
  }

  & .project-look__item-link {
    display: block;
  }

  & .project-look__mark {
    position: absolute;
    top: calc(136 * var(--rem));
    left: calc(141 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(22 * var(--rem));
    line-height: 1;
  }

  & .project-look__item--palette .project-look__mark--a {
    top: calc(63 * var(--rem));
    left: calc(98 * var(--rem));
  }

  & .project-look__item--palette .project-look__mark--b {
    top: calc(63 * var(--rem));
    left: calc(145 * var(--rem));
  }

  & .project-look__item--palette .project-look__mark--c {
    top: calc(110 * var(--rem));
    left: calc(49 * var(--rem));
  }

  & .project-look__item--palette .project-look__mark--d {
    top: calc(110 * var(--rem));
    left: calc(145 * var(--rem));
  }

  & .project-look__item--palette .project-look__mark--e {
    top: calc(158 * var(--rem));
    left: calc(50 * var(--rem));
  }

  & .project-look__item-name {
    position: relative;
    margin-top: calc(21 * var(--rem));
    margin-inline: calc((100% - 300 * var(--rem)) / 2);
    width: calc(300 * var(--rem));
    font-size: calc(22 * var(--rem));
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
    .--small {
      font-size: calc(20 * var(--rem));
    }

    & a {
      letter-spacing: inherit;
    }
  }

  & .project-look__items::after {
    content: "";
    position: absolute;
    top: calc(-10 * var(--rem));
    left: 0;
    width: calc(750 * var(--rem));
    height: calc(318 * var(--rem));
    background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff);
    pointer-events: none;
    transition: opacity .4s var(--transition-timing);
  }

  & .project-look__items:has(.project-look__item-name .--small)::after {
    height: calc(400 * var(--rem));
  }

  & .project-look__block.is-open .project-look__items::after {
    opacity: 0;
  }

  & .project-look__how {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--transition-timing);
  }

  & .project-look__steps {
    margin-top: calc(52 * var(--rem));
    margin-inline: auto;
    width: calc(690 * var(--rem));
    padding: calc(36 * var(--rem)) 0 calc(44 * var(--rem));
    border-radius: calc(10 * var(--rem));
    background: var(--color-tint);
    counter-reset: step;

    & li {
      position: relative;
      margin-left: calc(118 * var(--rem));
      padding-left: calc(50 * var(--rem));
      font-family: var(--lp-font-en);
      font-size: calc(26 * var(--rem));
      white-space: nowrap;
      line-height: calc(45.5 / 26);

      &::before {
        content: counter(step) ".";
        counter-increment: step;
        position: absolute;
        left: 0;
      }
    }
  }

  & .project-look__steps--long li {
    margin-left: calc(69 * var(--rem));
  }

  & .project-look__toggle {
    position: relative;
    margin-top: calc(-54 * var(--rem));
  }

  & .project-look__block.is-open .project-look__toggle {
    margin-top: calc(49 * var(--rem));
  }
}

.lp_contents {
  & .project-outro {
    margin-top: calc(155 * var(--rem));
  }

  & .project-outro__photo {
    margin-inline: auto;
    width: calc(650 * var(--rem));
    border-radius: calc(12 * var(--rem));
  }

  & .project-outro__label {
    margin-top: calc(53 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(26 * var(--rem));
    text-align: center;
    white-space: nowrap;
  }

  & .project-outro__title {
    margin-top: calc(14 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(40 * var(--rem));
    text-align: center;
    white-space: nowrap;
  }

  & .project-outro__action {
    margin-top: calc(64 * var(--rem));
    padding-bottom: calc(160 * var(--rem));
  }
}

.lp_contents {
  & .project-popup {
    width: calc(750 * var(--rem));
    padding-block: calc(328 * var(--rem)) calc(256 * var(--rem));

    @media (min-width: 769px) {
      padding-block: 0;
    }
  }

  & .project-popup__frame {
    position: relative;
    margin-inline: auto;
    width: calc(610 * var(--rem));
    aspect-ratio: 1 / 1;
    touch-action: none;
  }

  & .project-popup__clip {
    position: absolute;
    top: calc(0 * var(--rem));
    left: calc(-70 * var(--rem));
    display: grid;
    place-items: center;
    width: calc(750 * var(--rem));
    height: calc(750 * var(--rem));
    overflow: hidden;
  }

  & .project-popup__image {
    width: calc(610 * var(--rem));
    transform-origin: center center;
    scale: var(--popup-zoom, 1);
    transition: scale .3s var(--transition-timing);
  }

  & .project-popup__frame.is-instant .project-popup__image {
    transition: none;
  }

  & .project-popup__frame .component-zoom {
    top: calc(684 * var(--rem));
    left: calc(614 * var(--rem));
    z-index: var(--z-base);
  }

  & .component-zoom__icon--out {
    display: none;
  }

  & .project-popup__frame.is-zoom .component-zoom__icon--in {
    display: none;
  }

  & .project-popup__frame.is-zoom .component-zoom__icon--out {
    display: block;
  }

  & .project-popup__caption {
    margin-top: calc(165 * var(--rem));
    padding-bottom: calc(30 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(26 * var(--rem));
    text-align: center;
    white-space: nowrap;
    line-height: 2.5;
  }

  & .project-popup__nav {
    // position: absolute;
    z-index: var(--z-base);
    bottom: 0;
    display: grid;
    place-items: center;
    width: calc(26 * var(--rem));
    height: calc(26 * var(--rem));


    &::before {
      content: "";
      width: calc(8 * var(--rem));
      height: calc(14 * var(--rem));
      background: var(--color-accent);
    }
  }

  & .project-popup__button--group {
      width: calc(448 * var(--rem));
      margin: calc(-73 * var(--rem)) auto 0;
      display: flex;
      justify-content: space-between;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
  }


  & .project-popup__nav--prev {
    // left: calc(110 * var(--rem));

    &::before {
      width: calc(15 * var(--rem));
      height: calc(15 * var(--rem));
      background: url(../img/arrow.svg) no-repeat;
      background-size: contain;
      content: "";
      transform: rotate(90deg);
    }
  }

  & .project-popup__nav--next {
    // left: calc(552 * var(--rem));

    &::before {
      width: calc(15 * var(--rem));
      height: calc(15 * var(--rem));
      background: url(../img/arrow.svg) no-repeat;
      background-size: contain;
      content: "";
      transform: rotate(270deg);
    }
  }

  & .project-popup .swiper-slide {
    height: auto; /* 允許內容自然撐開高度，不會限制在固定 100% */
  }
}

.lp_contents {
  & .project-navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky);
    width: 100%;
    background: #fff;
    translate: 0 100%;
    transition: translate .4s var(--transition-timing);

    &.is-active {
      translate: 0 0;
    }
  }

  & .project-navbar__list {
    display: flex;
    flex-wrap: wrap;
  }

  & .project-navbar__item {
    width: calc(250 * var(--rem));
    height: calc(100 * var(--rem));
    border-top: calc(2 * var(--rem)) solid var(--color-tint);
    border-left: calc(2 * var(--rem)) solid var(--color-tint);

    &:nth-child(-n + 3) {
      border-top: none;
    }

    &:first-child {
      border-left: none;
    }

    &.project-navbar__item--wide {
      width: calc(375 * var(--rem));
    }

    &.project-navbar__item--wide:first-of-type {
      border-left: none;
    }
  }

  & .project-navbar__link {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: calc(20 * var(--rem));
    padding-right: calc(5 * var(--rem));
  }

  & .project-navbar__caret {
    flex: none;
    margin-top: calc(15 * var(--rem));
    width: calc(15 * var(--rem));
    height: calc(15 * var(--rem));
    background: url(../img/arrow.svg) no-repeat;
    background-size: contain;
  }

  & .project-navbar__text {
    margin-left: calc(16 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(22 * var(--rem));
    white-space: nowrap;
  }

  & .project-navbar__link img {
    width: calc(90 * var(--rem));
    margin-left: auto;
  }
}

.lp_contents {
  & .layout-columns {
    @media (min-width: 769px) {
      display: grid;
      background: var(--color-tint);
    }

    &.layout-columns--col-3 {
      @media (min-width: 769px) {
        grid-template-columns: 1fr calc(var(--artboard-pw) * var(--rem-pc)) 1fr;
      }
    }
  }

  & .layout-rail {
    display: none;

    @media (min-width: 769px) {
      position: sticky;
      top: 0;
      z-index: var(--z-sticky);
      display: grid;
      place-items: center;
      height: 100dvh;
    }
  }

  & .layout-rail--left {
    @media (min-width: 769px) {
      display: block;
    }
  }

  & .layout-primary {
    min-width: 0;
    overflow-x: clip;

    @media (min-width: 769px) {
      background: #fff;
    }
  }

  & .layout-inner {
    display: flow-root;
    width: calc(var(--artboard-sw) * var(--rem));
    margin-inline: auto;
  }
}

.lp_contents {
  & .project-rail__logo {
    position: absolute;
    top:calc(40 * var(--rem-pc));
    left: calc(40 * var(--rem-pc));
    width: calc(312 * var(--rem-pc));
  }

  & .project-rail__sign {
    position: absolute;
    right: calc(40 * var(--rem-pc));
    bottom: calc(40 * var(--rem-pc));
  }

  & .project-rail__sign-logo {
    width: calc(170 * var(--rem-pc));
  }

  & .project-rail__sign-text {
    margin-top: calc(12 * var(--rem-pc));
    font-family: var(--lp-font-en);
    font-size: calc(12 * var(--rem-pc));
    line-height: 1.5;
    white-space: nowrap;
  }

  & .project-rail__nav {
    width: 100%;
    padding-left: calc(100 * var(--rem-pc));
    padding-right: calc(108 * var(--rem-pc));
  }

  & .project-rail__list {
    display: grid;
    gap: calc(14 * var(--rem-pc));
  }

  & .project-rail__link {
    display: flex;
    align-items: center;
    height: calc(66 * var(--rem-pc));
  }

  & .project-rail__caret {
    flex: none;
    margin-top: calc(6 * var(--rem-pc));
    margin-left: calc(7 * var(--rem-pc));
    width: calc(9 * var(--rem-pc));
    height: calc(9 * var(--rem-pc));
    background: url(../img/arrow.svg) no-repeat;
    background-size: contain;
  }

  & .project-rail__text {
    margin-left: calc(15 * var(--rem-pc));
    font-family: var(--lp-font-en);
    font-size: calc(14 * var(--rem-pc));
    white-space: nowrap;
  }

  & .project-rail__link img {
    width: calc(66 * var(--rem-pc));
    margin-left: auto;
  }
}