@charset "UTF-8";

:root {
  --pw: 1440;
  --sw: 390;
  --artboard-pw: 500;
  --artboard-sw: 390;
  --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));
  }
}

@media (min-width: 1441px) {
  :root {
    --variable: 1px;
  }
}

.p-feature {
  --base-font-color: #0f3655;
  --color-navy: #0f3655;
  --color-navy-faint: rgb(15 54 85 / .2);
  --color-gold: #9a7110;
  --color-gold-nav: #9c803a;
  --color-text: #3f3f3f;
  --color-bg: #f1f0d8;
  --color-lead-bg: #e5e4e2;
  --color-green: #cbd9ce;
  --color-blue: #b7cce0;
  --color-rule: #f1f0d8;
  --color-rule-faint: rgb(241 240 216 / .5);
  --dash: calc(2 * var(--rem));
  --dash-fine: calc(1 * var(--rem));
  --dash-w: 1px;

  --lp-font-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --lp-font-en: "Inter", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-display: "fleur", "Times New Roman", serif;
  --font-serif: "Playfair Display", "Times New Roman", serif;
  --font-serif-ja: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-note: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  --transition-timing: cubic-bezier(.51, .21, .41, 1);
  --duration-fade: 1.2s;
  --letter-spacing: .05em;

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

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

  & *,
  & *: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);
  }

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

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

  & sup {
    top: 0;
    font-size: .6em;
    vertical-align: super;
  }

  & :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;

    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }

  & :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;
}

body {
  -webkit-tap-highlight-color: transparent;
}

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

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

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

.lp_contents {
  & .ani-fadein {
    transition: opacity var(--duration-fade) var(--transition-timing);
  }

  & .ani-fadeup {
    translate: 0 calc(20 * var(--rem));
    transition: opacity 1s var(--transition-timing), translate 1s var(--transition-timing);

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

  & .ani-fadein--load {
    animation: lp-fadein var(--duration-fade) var(--transition-timing) both;
  }

  & .ani-fadeup--load {
    animation: lp-fadeup 1s var(--transition-timing) .3s both;
  }
}

@keyframes lp-fadein {
  from {
    opacity: 0;
  }
}

@keyframes lp-fadeup {
  from {
    opacity: 0;
    translate: 0 calc(20 * var(--rem));
  }
}

html.js .lp_contents {
  & .ani-fadein,
  & .ani-fadeup {
    opacity: 0;

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

html.js .lp_contents {
  & .project-category__card:not(.is-active),
  & .project-wrapping__card:not(.is-active) {
    background-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .lp_contents .ani-fadein,
  html.js .lp_contents .ani-fadeup {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }

  .lp_contents .ani-fadein--load,
  .lp_contents .ani-fadeup--load {
    animation: none;
  }
}

.lp_contents {
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

.lp_contents {
  & .project-mv {
    display: block;
  }

  & .project-lead {
    position: relative;
    margin-top: calc(-115 * var(--rem));
    padding: calc(40 * var(--rem)) 0 calc(37 * var(--rem));
    background: linear-gradient(to bottom, rgb(229 228 226 / 0) 0, var(--color-lead-bg) calc(39 * var(--rem)), var(--color-lead-bg) calc(90 * var(--rem)), var(--color-bg) 100%);
    overflow: hidden;
    transition: padding-bottom .4s var(--transition-timing);

    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: calc(30 * var(--rem));
      background: linear-gradient(to bottom, rgb(241 240 216 / 0), var(--color-bg));
      transition: opacity .4s var(--transition-timing);
      content: "";
    }

    &.is-open {
      padding-bottom: calc(25 * var(--rem));

      &::after {
        opacity: 0;
      }
    }
  }

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

  & .project-lead__body {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & .project-lead__text {
    font-size: calc(14 * var(--rem));
    line-height: 1.8;
    letter-spacing: .1em;
    text-align: center;
    white-space: nowrap;
  }

  & .project-lead__more-inner {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--rem));
    padding-top: calc(20 * var(--rem));
  }

  & .project-lead__button {
    position: relative;
    margin-top: calc(13 * var(--rem));
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(11 * var(--rem));
    line-height: 1;
    letter-spacing: .1em;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
  }

  & .project-lead__button::after {
    position: absolute;
    inset: calc(-17 * var(--rem)) calc(-12 * var(--rem));
    content: "";
  }

  & .project-lead__button-label {
    letter-spacing: .1em;
  }

  & :where(.project-lead__button, .project-category__thumb):focus-visible {
    outline: 2px solid var(--color-navy);
    outline-offset: 2px;
  }

  & .project-lead__button-label--close {
    display: none;
  }

  & .project-lead.is-open {
    & .project-lead__button-label--open {
      display: none;
    }

    & .project-lead__button-label--close {
      display: inline;
    }
  }
}

.lp_contents {
  & .project-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(361 * var(--rem));
    margin: calc(20 * var(--rem)) auto 0;
  }

  & .project-nav__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(10 * var(--rem));
    width: 100%;

    &::after {
      display: block;
      flex-shrink: 0;
      width: calc(19 * var(--rem));
      height: calc(19 * var(--rem));
      margin: calc(-3 * var(--rem)) calc(-7 * var(--rem)) calc(-7 * var(--rem)) calc(-3 * var(--rem));
      background: url(../img/pearl.png) 0 0 / 100% 100% no-repeat;
      translate: 0 calc(3 * var(--rem));
      content: "";
    }

    & + .project-nav__list {
      margin-top: calc(10 * var(--rem));
      padding-top: calc(13 * var(--rem));
      background: repeating-linear-gradient(to right, var(--color-navy-faint) 0 var(--dash-fine), transparent var(--dash-fine) calc(2 * var(--dash-fine))) 0 0 / 100% var(--dash-w) no-repeat;
    }
  }

  & .project-nav__item {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--rem));

    &::before {
      display: block;
      flex-shrink: 0;
      width: calc(19 * var(--rem));
      height: calc(19 * var(--rem));
      margin: calc(-3 * var(--rem)) calc(-7 * var(--rem)) calc(-7 * var(--rem)) calc(-3 * var(--rem));
      background: url(../img/pearl.png) 0 0 / 100% 100% no-repeat;
      translate: 0 calc(3 * var(--rem));
      content: "";
    }
  }

  & .project-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: calc(15 * var(--rem));
    letter-spacing: .05em;
    text-align: center;
    white-space: nowrap;

    &::after {
      display: block;
      width: calc(8 * var(--rem));
      height: calc(5 * var(--rem));
      margin-top: calc(6 * var(--rem));
      background: url(../img/icon-chevron-down.svg) 0 0 / 100% 100% no-repeat;
      content: "";
    }
  }

  & .project-nav__en {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1;
    color: var(--color-gold-nav);
    letter-spacing: .05em;
  }

  & .project-nav__ja {
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .05em;
  }
}

.lp_contents {
  & .project-categories {
    position: relative;
  }

  & .project-categories__illust {
    position: absolute;
    top: calc(60 * var(--rem));
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;

    & img {
      position: sticky;
      top: 0;
    }
  }

  & .project-category {
    position: relative;
    width: calc(360 * var(--rem));
    margin: 0 auto;
    padding-top: calc(60 * var(--rem));
  }

  & .project-category__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(698 * var(--rem));
    padding: calc(40 * var(--rem)) 0;
    border-radius: calc(30 * var(--rem));
    background: url(../img/card-glitter.png) center top / 100% auto no-repeat, url(../img/card-texture.jpg) center / auto 100% no-repeat;
    background-color: var(--color-green);
    background-blend-mode: normal, multiply;
    box-shadow: inset 0 calc(4 * var(--rem)) calc(4 * var(--rem)) rgb(0 0 0 / .25);
    overflow: hidden;
  }

  & .project-category--skincare .project-category__card,
  & .project-category--bodycare .project-category__card {
    background-color: var(--color-blue);
  }

  & .project-category--recommend .project-category__card {
    justify-content: flex-start;
    min-height: calc(704 * var(--rem));
  }

  & .project-category__head {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & .project-category__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    white-space: nowrap;

    &::after {
      display: block;
      width: calc(17 * var(--rem));
      height: calc(17 * var(--rem));
      margin: calc(2 * var(--rem)) calc(-6 * var(--rem)) calc(-6 * var(--rem)) calc(-3 * var(--rem));
      background: url(../img/pearl.png) 0 0 / 100% 100% no-repeat;
      content: "";
    }
  }

  & .project-category__title-en {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: calc(24 * var(--rem));
    line-height: 1;
    color: var(--color-gold);
    letter-spacing: .02em;
  }

  & .project-category__title-ja {
    display: block;
    margin-top: calc(-3 * var(--rem));
    font-weight: 500;
    font-size: calc(25 * var(--rem));
    line-height: 1.3;
    letter-spacing: .05em;
  }

  & .project-category__lead {
    margin-top: calc(5 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }

  & .project-category__slider {
    width: 100%;
    margin-top: calc(20 * var(--rem));
    padding: 0 calc(5 * var(--rem)) 0 calc(20 * var(--rem));
  }

  & .project-category__item {
    display: flex;
    flex-direction: column;
    width: calc(230 * var(--rem));
    margin-right: calc(15 * var(--rem));
  }

  & .project-category__image a {
    display: block;

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
      }
    }
  }

  & .project-category__image img {
    border-radius: calc(5 * var(--rem));
  }

  & .project-category__catch {
    margin-top: calc(10 * var(--rem));
    padding: 0 calc(10 * var(--rem)) calc(12 * var(--rem));
    background: repeating-linear-gradient(to right, var(--color-rule) 0 var(--dash), transparent var(--dash) calc(2 * var(--dash))) calc(10 * var(--rem)) 100% / calc(210 * var(--rem)) var(--dash-w) no-repeat;
    font-weight: 700;
    font-size: calc(12 * var(--rem));
    line-height: 1.5;
    white-space: nowrap;
  }

  & .project-category__product {
    display: grid;
    grid-template: 1fr auto / 1fr auto;
    height: calc(105 * var(--rem));
    margin-top: calc(12 * var(--rem));
    padding: 0 calc(10 * var(--rem));
  }

  & .project-category--recommend .project-category__product {
    height: calc(116 * var(--rem));
  }

  & .project-category__credit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-area: 1 / 1 / 3 / 3;
    padding-top: calc(1 * var(--rem));

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
      }
    }
  }

  & .project-category__badge {
    padding: calc(4 * var(--rem)) calc(8 * var(--rem));
    background-color: rgb(255 255 255 / .25);
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(13 * var(--rem));
    line-height: 1;
    color: var(--color-gold);
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-category__brand {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: calc(15 * var(--rem));
    line-height: 1;
    color: var(--color-gold);
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-category__badge + .project-category__brand {
    margin-top: calc(5 * var(--rem));
  }

  & .project-category__brand--ja {
    font-family: var(--font-serif-ja);
  }

  & .project-category__name {
    margin-top: calc(6 * var(--rem));
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(13 * var(--rem));
    line-height: 1.5;
    color: var(--color-text);
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-category__price {
    margin: auto 0 calc(12 * var(--rem));
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(13 * var(--rem));
    line-height: 1;
    color: var(--color-text);
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-category__price-prefix,
  & .project-category__tax {
    font-size: calc(10 * var(--rem));
    letter-spacing: .065em;
  }

  & .project-category__button {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    align-items: center;
    gap: calc(8 * var(--rem));
    grid-area: 2 / 2 / 3 / 3;
    width: calc(90 * var(--rem));
    height: calc(36 * var(--rem));
    padding-bottom: calc(2 * var(--rem));
    padding-left: calc(15 * var(--rem));
    border-radius: calc(20 * var(--rem));
    background-color: var(--color-gold);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: calc(16 * var(--rem));
    line-height: 1;
    color: #fff;
    letter-spacing: .05em;
    white-space: nowrap;

    &::after {
      display: block;
      flex-shrink: 0;
      width: calc(5 * var(--rem));
      height: calc(8 * var(--rem));
      translate: 0 calc(1 * var(--rem));
      background: url(../img/icon-chevron-white.svg) 0 0 / 100% 100% no-repeat;
      content: "";
    }
  }

  & .project-category__product--kit {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    & .project-category__price {
      margin: calc(5 * var(--rem)) 0 0;
    }
  }

  & .project-category__buttons {
    display: flex;
    justify-content: space-between;
  }

  & .project-category__button--kit {
    gap: calc(5 * var(--rem));
    width: calc(100 * var(--rem));
    padding-left: calc(9 * var(--rem));
    font-size: calc(13 * var(--rem));
  }

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

  & .project-category__thumb {
    display: block;
    width: calc(54 * var(--rem));
    height: calc(54 * var(--rem));
    padding: calc(2 * var(--rem));
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--color-navy-faint);
    transition: box-shadow var(--duration) var(--timing);

    &.is-active {
      box-shadow: inset 0 0 0 1.5px var(--color-navy);
    }

    & img {
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 50%;
    }
  }

  & .project-category__deco {
    position: absolute;
    z-index: var(--z-base);
  }

  & .project-category--limited {
    & .project-category__deco--snowdome {
      top: calc(25 * var(--rem));
      left: calc(15 * var(--rem));
      width: calc(65 * var(--rem));
    }

    & .project-category__deco--cinnamon {
      top: calc(92 * var(--rem));
      left: calc(331 * var(--rem));
      width: calc(42 * var(--rem));
    }

    & .project-category__deco--ribbon {
      bottom: calc(-46 * var(--rem));
      left: calc(23 * var(--rem));
      width: calc(64 * var(--rem));
    }
  }

  & .project-category--skincare {
    & .project-category__deco--crystal {
      top: calc(9 * var(--rem));
      left: calc(281 * var(--rem));
      width: calc(76 * var(--rem));
    }

    & .project-category__deco--butterfly {
      top: calc(86 * var(--rem));
      left: calc(-11 * var(--rem));
      width: calc(41 * var(--rem));
    }

    & .project-category__deco--fir {
      bottom: calc(-60 * var(--rem));
      left: calc(214 * var(--rem));
      width: calc(133 * var(--rem));
    }
  }

  & .project-category--innercare {
    & .project-category__deco--quetzal {
      top: calc(11 * var(--rem));
      left: calc(-9 * var(--rem));
      width: calc(95 * var(--rem));
    }

    & .project-category__deco--key {
      top: calc(98.02 * var(--rem));
      left: calc(318 * var(--rem));
      width: calc(58.1 * var(--rem));
    }

    & .project-category__deco--cinnamon {
      bottom: calc(-35 * var(--rem));
      left: calc(60 * var(--rem));
      width: calc(56 * var(--rem));
    }
  }

  & .project-category--bodycare {
    & .project-category__deco--cookie {
      top: calc(25 * var(--rem));
      left: calc(282 * var(--rem));
      width: calc(77 * var(--rem));
    }

    & .project-category__deco--ring {
      top: calc(76 * var(--rem));
      left: calc(-15 * var(--rem));
      width: calc(49 * var(--rem));
    }

    & .project-category__deco--butterfly {
      bottom: calc(-20 * var(--rem));
      left: calc(245 * var(--rem));
      width: calc(41 * var(--rem));
    }
  }

  & .project-category--recommend {
    & .project-category__deco--cake {
      top: calc(42 * var(--rem));
      left: calc(21 * var(--rem));
      width: calc(58 * var(--rem));
    }

    & .project-category__deco--candle {
      top: calc(86 * var(--rem));
      left: calc(322 * var(--rem));
      width: calc(58.14 * var(--rem));
    }

    & .project-category__deco--key {
      bottom: calc(-31.95 * var(--rem));
      left: calc(211 * var(--rem));
      width: calc(58.1 * var(--rem));
    }
  }
}

.lp_contents {
  & .project-allitems {
    display: flex;
    justify-content: center;
    margin-top: calc(61 * var(--rem));
  }

  & .project-allitems__button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(300 * var(--rem));
    height: calc(60 * var(--rem));
    padding-top: calc(14 * var(--rem));
    border-radius: calc(30 * var(--rem));
    background-color: var(--color-gold);
    color: #fff;
    white-space: nowrap;

    &::after {
      position: absolute;
      top: calc(26 * var(--rem));
      right: calc(10 * var(--rem));
      width: calc(5 * var(--rem));
      height: calc(8 * var(--rem));
      background: url(../img/icon-chevron-white.svg) 0 0 / 100% 100% no-repeat;
      content: "";
    }
  }

  & .project-allitems__ja {
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
  }

  & .project-allitems__en {
    margin-top: calc(6 * var(--rem));
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: calc(13 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
  }
}

.lp_contents {
  & .project-wrapping {
    width: calc(360 * var(--rem));
    margin: calc(60 * var(--rem)) auto 0;
  }

  & .project-wrapping__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(40 * var(--rem)) 0;
    border-radius: calc(30 * var(--rem));
    background: url(../img/card-glitter.png) center top / 100% auto no-repeat, url(../img/card-texture.jpg) center / auto 100% no-repeat;
    background-color: var(--color-blue);
    background-blend-mode: normal, multiply;
    box-shadow: inset 0 calc(4 * var(--rem)) calc(4 * var(--rem)) rgb(0 0 0 / .25);
    overflow: hidden;
  }

  & .project-wrapping__title {
    margin-top: calc(1 * var(--rem));
    margin-right: -.05em;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: calc(46 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-wrapping__gallery {
    display: flex;
    align-items: center;
    gap: calc(13 * var(--rem));
    margin-top: calc(12 * var(--rem));
  }

  & .project-wrapping__slider {
    width: calc(280 * var(--rem));
    margin: 0;
  }

  & .project-wrapping__arrow {
    position: relative;
    flex-shrink: 0;
    width: calc(89 / 6 * var(--rem));
    height: calc(28 * var(--rem));
    background: url(../img/icon-arrow-navy.svg) center / 100% 100% no-repeat;
    cursor: pointer;

    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }

    &:focus-visible {
      outline: 2px solid var(--color-navy);
      outline-offset: 2px;
    }
  }

  & .project-wrapping__arrow::after {
    position: absolute;
    inset: calc(-8 * var(--rem)) calc(-10 * var(--rem));
    content: "";
  }

  & .project-wrapping__gallery:not(:has(.swiper-initialized)) .project-wrapping__arrow {
    visibility: hidden;
  }

  & .project-wrapping__arrow--prev {
    scale: -1 1;
  }

  & .project-wrapping__figure {
    position: relative;
    margin: 0;
  }

  & .project-wrapping__slide img {
    border-radius: calc(5 * var(--rem));
  }

  & .project-wrapping__caption {
    position: absolute;
    top: calc(253 * var(--rem));
    left: 0;
    width: 100%;
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(12 * var(--rem));
    line-height: 1;
    text-align: center;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-wrapping__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(10 * var(--rem));
    text-align: center;
    white-space: nowrap;
  }

  & .project-wrapping__text-sub {
    font-weight: 500;
    font-size: calc(12 * var(--rem));
    line-height: 1.5;
    letter-spacing: .054em;
  }

  & .project-wrapping__text-main {
    margin-top: calc(2 * var(--rem));
    font-weight: 700;
    font-size: calc(18 * var(--rem));
    line-height: 1.5;
    color: var(--color-gold);
    letter-spacing: .036em;
  }

  & .project-wrapping__price {
    width: calc(285 * var(--rem));
    margin-top: calc(15 * var(--rem));
    color: var(--color-text);
  }

  & .project-wrapping__price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc(35 * var(--rem));
    background: repeating-linear-gradient(to right, var(--color-rule-faint) 0 var(--dash), transparent var(--dash) calc(2 * var(--dash))) 0 100% / 100% var(--dash-w) no-repeat;
    white-space: nowrap;

    &:last-child {
      background: none;
    }
  }

  & .project-wrapping__price-name {
    font-weight: 500;
    font-size: calc(13 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
  }

  & .project-wrapping__price-ref {
    font-size: .645em;
    letter-spacing: .05em;
  }

  & .project-wrapping__price-value {
    font-family: var(--lp-font-en);
    font-size: calc(13 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
  }

  & .project-wrapping__price-tax {
    font-size: calc(10 * var(--rem));
    letter-spacing: .065em;
  }

  & .project-wrapping__note {
    display: flex;
    flex-direction: column;
    gap: calc(5 * var(--rem));
    width: calc(285 * var(--rem));
    margin-top: calc(15 * var(--rem));
  }

  & .project-wrapping__note-item {
    display: grid;
    grid-template-columns: calc(14 * var(--rem)) 1fr;
    align-items: start;
    column-gap: calc(4 * var(--rem));
    font-family: var(--font-note);
    font-size: calc(10 * var(--rem));
    line-height: 1.4;
    color: var(--color-text);
    letter-spacing: 0;
    white-space: nowrap;
  }

  & .project-wrapping__note-mark,
  & .project-wrapping__note-text {
    letter-spacing: 0;
  }

  & .project-wrapping__note-mark--num {
    font-size: .8em;
  }
}

.lp_contents {
  & .project-particle {
    position: fixed;
    inset: 0;
    z-index: var(--z-particle);
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
}

.lp_contents {
  & .project-rail-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem-pc));
  }

  & .project-rail-title__text {
    width: calc(351 * var(--rem-pc));
  }

  & .project-rail-title__logo {
    width: calc(161 * var(--rem-pc));
  }

  & .project-rail-nav {
    pointer-events: auto;
  }

  & .project-rail-nav__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(27 * var(--rem-pc));
    margin-top: calc(12 * var(--rem-pc));
  }

  & .project-rail-nav__link {
    display: flex;
    align-items: baseline;
    column-gap: calc(5 * var(--rem-pc));
    white-space: nowrap;

    &::before {
      display: block;
      flex-shrink: 0;
      align-self: center;
      width: calc(25 * var(--rem-pc));
      height: calc(25 * var(--rem-pc));
      margin: calc(-4 * var(--rem-pc)) calc(-4 * var(--rem-pc)) calc(-9 * var(--rem-pc)) calc(-4 * var(--rem-pc));
      background: url(../img/pearl.png) 0 0 / 100% 100% no-repeat;
      opacity: 0;
      transition: opacity .4s var(--transition-timing);
      content: "";
    }

    &.is-current::before {
      opacity: 1;
    }
  }

  & .project-rail-nav__ja {
    font-weight: 500;
    font-size: calc(20 * var(--rem-pc));
    line-height: 1;
    letter-spacing: .05em;
  }

  & .project-rail-nav__en {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: calc(22 * var(--rem-pc));
    line-height: 1;
    color: var(--color-gold-nav);
    letter-spacing: .05em;
  }
}

.lp_contents {
  & .layout-columns {
    @media (min-width: 769px) {
      display: grid;
      clip-path: inset(calc(-1 * (var(--rail-offset, 0px) + var(--header-height, 0px))) 0 0);
    }

    &::before,
    &::after {
      @media (min-width: 769px) {
        content: "";
        position: fixed;
        left: 0;
        width: 100%;
        aspect-ratio: 1440 / 165;
        background: url(../img/pc-glitter.png) center / 100% 100% no-repeat;
        background-color: var(--color-bg);
        background-blend-mode: overlay;
        pointer-events: none;
      }
    }

    &::before {
      @media (min-width: 769px) {
        top: var(--glitter-top, var(--header-height, 0px));
      }
    }

    &::after {
      @media (min-width: 769px) {
        bottom: 0;
        transform: scaleY(-1);
      }
    }

    &.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;
      margin-top: calc(-1 * (var(--rail-offset, 0px) + var(--header-height, 0px)));
      padding-top: var(--header-height, 0px);
      pointer-events: none;
    }
  }

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

    @media (min-width: 769px) {
      position: relative;
      z-index: var(--z-base);
      background-color: var(--color-bg);
      box-shadow: 0 0 calc(9 * var(--rem-pc)) rgb(0 0 0 / .08);
    }
  }

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