@charset "UTF-8";

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

.lp_contents {
  position: relative;

  font-family: var(--font-base);
  color: var(--color-text);
  font-style: normal;
  letter-spacing: var(--letter-spacing);

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

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

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

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

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

.p-feature {
  --color-text: #fff;
  --color-title: #ead8b2;
  --color-gold: #d6c98b;
  --color-sheet-ink: #445475;
  --color-hand-ink: #7f4555;
  --color-button: #f9efe1;
  --color-viewall: #ead8b2;
  --color-divider: #c1ad99;
  --color-marquee: rgb(255 255 255 / .11);
  --color-intro: #475137;
  --color-sheet: #5c697c;
  --color-hand: #896078;
  --color-rail: #4f564c;

  --font-base: "helvetica-lt-pro", "hiragino-kaku-gothic-pron", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-price: "century-gothic", "hiragino-kaku-gothic-pron", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-title: "the-seasons", "Times New Roman", serif;
  --font-button: "century-gothic", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-copy: "kinuta-maruminfuji-stdn", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;

  --transition-timing: cubic-bezier(.51, .21, .41, 1);
  --letter-spacing: .075em;
  --duration-sheet-marquee: 57s;
  --duration-hand-marquee: 49s;
  --delay-char-start: .5s;
  --delay-char-step: .3s;
  --delay-spread: 0s;
  --delay-photo: .4s;
  --duration-spread-fade: 1.33s;
  --duration-spread-mask: 2.13s;
  --ease-spread-mask: linear-gradient(0deg, transparent, transparent 40%, rgb(0 0 0 / .08) 45%, rgb(0 0 0 / .32) 48.3%, rgb(0 0 0 / .5) 50%, rgb(0 0 0 / .68) 51.7%, rgb(0 0 0 / .92) 55%, #000 58.3%, #000);

  --z-base: 1;
  --z-sticky: 10;
}

@keyframes project-marquee {
  from {
    translate: 0 0;
  }

  to {
    translate: -50% 0;
  }
}

.lp_contents {
  & .ani-spread {
    transition: opacity var(--duration-spread-fade) var(--transition-timing) calc(var(--ani-delay, 0s) + var(--delay-spread)), -webkit-mask-position var(--duration-spread-mask) linear calc(var(--ani-delay, 0s) + var(--delay-spread)), mask-position var(--duration-spread-mask) linear calc(var(--ani-delay, 0s) + var(--delay-spread));
  }

  & .project-sheet__photo-image,
  & .project-hand__photo-image {
    --delay-spread: var(--delay-photo);
  }

  & .ani-fadein {
    transition: opacity 2s var(--transition-timing) var(--ani-delay, 0s), filter 2s var(--transition-timing) var(--ani-delay, 0s);
  }

  & .ani-char {
    transition: opacity .8s ease calc(var(--ani-delay, 0s) + var(--delay-char-start) + var(--char-order) * var(--delay-char-step)), filter .8s ease calc(var(--ani-delay, 0s) + var(--delay-char-start) + var(--char-order) * var(--delay-char-step));
  }

  & .component-underline {
    text-decoration: underline;
    text-decoration-thickness: .06em;
    text-underline-offset: .18em;
    letter-spacing: .075em;
  }
}

html.js .lp_contents {
  & .ani-spread {
    opacity: 0;
    -webkit-mask-image: var(--ease-spread-mask);
    mask-image: var(--ease-spread-mask);
    -webkit-mask-size: 100% max(300%, 100vh);
    mask-size: 100% max(300%, 100vh);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center 100%;
    mask-position: center 100%;

    &.is-active {
      opacity: 1;
      -webkit-mask-position: center 0;
      mask-position: center 0;
    }
  }

  & .ani-fadein {
    opacity: 0;
    filter: blur(calc(5 * var(--rem)));

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

  & .ani-char {
    opacity: 0;
    filter: blur(calc(4 * var(--rem)));
  }

  & .ani-char.is-active {
    opacity: 1;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .lp_contents {
    & .ani-spread,
    & .ani-fadein,
    & .ani-char {
      opacity: 1;
      -webkit-mask-image: none;
      mask-image: none;
      filter: none;
      transition: none;
    }
  }
}

.lp_contents {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  & .layout-columns {
    @media (min-width: 769px) {
      background: url(../img/bg-noise.png) 0 0 / calc(120 * var(--rem)) auto repeat var(--color-rail);
      background-blend-mode: soft-light;
      transition: background-color .6s var(--transition-timing);

      &.is-sheet {
        --color-rail: var(--color-sheet);
      }

      &.is-hand {
        --color-rail: var(--color-hand);
      }
    }
  }

  & .layout-rail {
    pointer-events: none;
  }

  & .project-rail__link {
    pointer-events: auto;
  }

  & .project-sheet__kit-image,
  & .project-hand__kit-image,
  & .project-sheet__kit-text,
  & .project-hand__kit-text {
    flex-shrink: 0;
  }
}

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

  & .project-intro__mv-photo {
    mask-image: linear-gradient(#000 80%, transparent);
  }

  & .project-intro__title {
    position: absolute;
    top: calc(85 * var(--rem));
    left: 0;
    width: 100%;
  }

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

  & .project-intro__holiday {
    display: block;
    margin-top: calc(615 * var(--rem));
    width: calc(570 * var(--rem));
    margin-inline: auto;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: calc(76 * var(--rem));
    line-height: 1.3262;
    letter-spacing: .05em;
    text-align: center;
    padding-left: .05em;
    color: var(--color-title);
    white-space: nowrap;
  }

  & .project-intro__coffret {
    display: block;
    margin-top: calc(17 * var(--rem));
    width: calc(690 * var(--rem));
    margin-inline: auto;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: calc(92 * var(--rem));
    line-height: 1.0125;
    letter-spacing: .05em;
    text-align: center;
    padding-left: .05em;
    color: var(--color-title);
    white-space: nowrap;
  }

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

  & .project-intro__copy::before {
    position: absolute;
    z-index: 0;
    top: calc(-168 * var(--rem));
    left: calc(-25 * var(--rem));
    width: calc(800 * var(--rem));
    height: calc(620 * var(--rem));
    background: radial-gradient(closest-side, rgb(255 255 255 / .376) 0%, rgb(255 255 255 / .329) 10%, rgb(255 255 255 / .284) 20%, rgb(255 255 255 / .241) 30%, rgb(255 255 255 / .198) 40%, rgb(255 255 255 / .158) 50%, rgb(255 255 255 / .12) 60%, rgb(255 255 255 / .083) 70%, rgb(255 255 255 / .05) 80%, rgb(255 255 255 / .021) 90%, rgb(255 255 255 / 0) 100%);
    content: "";
  }

  & .project-intro__copy-en {
    position: relative;
    z-index: var(--z-base);
    width: calc(660 * var(--rem));
    margin-inline: auto;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: calc(48 * var(--rem));
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
    padding-left: .1em;
    color: var(--color-text);
    white-space: nowrap;
  }

  & .project-intro__copy-ja {
    position: relative;
    z-index: var(--z-base);
    margin-top: calc(25 * var(--rem));
    width: calc(660 * var(--rem));
    margin-inline: auto;
    font-family: var(--font-copy);
    font-size: calc(32 * var(--rem));
    line-height: 2;
    letter-spacing: .1em;
    text-align: center;
    padding-left: .1em;
    color: var(--color-text);
    white-space: nowrap;
  }

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

  & .project-intro__lead-text--01 {
    width: calc(620 * var(--rem));
    margin-inline: auto;
    font-family: var(--font-base);
    font-size: calc(24 * var(--rem));
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
    padding-left: .1em;
    color: var(--color-text);
    white-space: nowrap;
  }

  & .project-intro__lead-text--02 {
    margin-top: calc(41 * var(--rem));
    width: calc(620 * var(--rem));
    margin-inline: auto;
    font-family: var(--font-base);
    font-size: calc(24 * var(--rem));
    line-height: 2.25;
    letter-spacing: .1em;
    text-align: center;
    padding-left: .1em;
    color: var(--color-text);
    white-space: nowrap;
  }

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

  & .project-intro__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100 * var(--rem));
    background-color: var(--color-button);
  }

  & .project-intro__link--sheet {
    width: calc(350 * var(--rem));
    color: var(--color-sheet-ink);
  }

  & .project-intro__link--hand {
    width: calc(340 * var(--rem));
    color: var(--color-hand-ink);
  }

  & .project-intro__link-label {
    display: block;
    margin-top: calc(11 * var(--rem));
    font-family: var(--font-title);
    font-weight: 700;
    font-size: calc(42 * var(--rem));
    line-height: 1.369;
    letter-spacing: .075em;
    text-align: center;
    padding-left: .075em;
    white-space: nowrap;
  }

  & .project-intro__link-icon {
    display: block;
    width: calc(21 * var(--rem));
    height: calc(10 * var(--rem));
    margin-top: calc(6 * var(--rem));
  }

  & .project-intro {
    position: relative;
    display: flow-root;
    overflow: clip;
    padding-bottom: calc(140 * var(--rem));
    background: linear-gradient(var(--color-gold), var(--color-gold)) 0 100% / 100% calc(2 * var(--rem)) no-repeat, url(../img/bg-noise.png) 0 0 / calc(120 * var(--rem)) auto repeat var(--color-intro);
    background-blend-mode: normal, soft-light;
  }

  & .project-sheet__marquee {
    position: relative;
    z-index: var(--z-base);
    overflow: hidden;
    margin-top: calc(21 * var(--rem));
    height: calc(218 * var(--rem));
  }

  & .project-sheet__marquee-track {
    display: flex;
    width: max-content;
    margin-top: calc(-13 * var(--rem));
    margin-left: calc(-233 * var(--rem));
    animation: project-marquee var(--duration-sheet-marquee) linear infinite;
  }

  & .project-sheet__marquee-item {
    display: block;
    margin-right: calc(49 * var(--rem));
    font-family: var(--font-title);
    font-weight: 300;
    font-size: calc(190 * var(--rem));
    line-height: 1.147;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--color-marquee);
  }

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

  & .project-sheet__catch-line {
    display: flex;
    align-items: flex-start;
  }

  & .project-sheet__catch-lead {
    display: block;
    margin-top: calc(39 * var(--rem));
    margin-left: calc(117 * var(--rem));
    width: calc(200 * var(--rem));
    font-family: var(--font-base);
    font-size: calc(36 * var(--rem));
    line-height: 1.5;
    letter-spacing: .2em;
    color: var(--color-text);
    white-space: nowrap;
  }

  & .project-sheet__catch-char--01 {
    margin-top: calc(32 * var(--rem));
    margin-left: calc(24 * var(--rem));
    width: calc(52 * var(--rem));
    --char-order: 0;
  }

  & .project-sheet__catch-char--02 {
    margin-top: calc(1 * var(--rem));
    margin-left: calc(-1 * var(--rem));
    width: calc(47 * var(--rem));
    --char-order: 1;
  }

  & .project-sheet__catch-char--03 {
    margin-top: calc(17 * var(--rem));
    margin-left: calc(23 * var(--rem));
    width: calc(52 * var(--rem));
    --char-order: 2;
  }

  & .project-sheet__catch-char--04 {
    margin-left: calc(17 * var(--rem));
    width: calc(51 * var(--rem));
    --char-order: 3;
  }

  & .project-sheet__catch-char--05 {
    margin-top: calc(29 * var(--rem));
    margin-left: calc(-4 * var(--rem));
    width: calc(52 * var(--rem));
    --char-order: 4;
  }

  & .project-sheet__catch-char {
    display: block;
    font-family: var(--font-copy);
    font-size: calc(52 * var(--rem));
    line-height: 1.2308;
    letter-spacing: 0;
    color: var(--color-gold);
    white-space: nowrap;
  }

  & .project-sheet__catch-sub {
    display: block;
    margin-top: calc(15 * var(--rem));
    width: calc(600 * var(--rem));
    margin-inline: auto;
    font-family: var(--font-base);
    font-size: calc(36 * var(--rem));
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
    padding-left: .1em;
    color: var(--color-text);
    white-space: nowrap;
  }

  & .project-sheet__photo {
    display: block;
    margin-top: calc(71 * var(--rem));
    background: url(../img/sheet-photo-letters.png) calc(113 * var(--rem)) calc(168 * var(--rem)) / calc(415 * var(--rem)) auto no-repeat, url(../img/sheet-photo-bg.png) 0 0 / 100% auto no-repeat;
  }

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

  & .project-sheet__info-link {
    display: flow-root;
  }

  & .project-sheet__info-label {
    width: calc(203 * var(--rem));
    margin-inline: auto;
  }

  & .project-sheet__info-name {
    display: block;
    margin-top: calc(51 * var(--rem));
    width: calc(690 * var(--rem));
    margin-inline: auto;
    font-family: var(--font-base);
    font-size: calc(36 * var(--rem));
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
    padding-left: .1em;
    color: var(--color-text);
    white-space: nowrap;
  }

  & .project-sheet__info-price {
    display: block;
    margin-top: calc(24 * var(--rem));
    width: calc(390 * var(--rem));
    margin-inline: auto;
    font-family: var(--font-price);
    font-size: calc(26 * var(--rem));
    line-height: 1.5;
    letter-spacing: .075em;
    text-align: center;
    padding-left: .075em;
    color: var(--color-text);
    white-space: nowrap;
  }

  & .project-sheet__info-button {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(26 * var(--rem));
    margin-top: calc(54 * var(--rem));
    width: calc(560 * var(--rem));
    margin-inline: auto;
    height: calc(100 * var(--rem));
    background-color: var(--color-button);
  }

  & .project-sheet__info-buy {
    display: block;
    margin-top: calc(26 * var(--rem));
    width: calc(105 * var(--rem));
    font-family: var(--font-button);
    font-size: calc(42 * var(--rem));
    line-height: 1.1667;
    letter-spacing: .075em;
    text-align: center;
    padding-left: .075em;
    color: var(--color-sheet-ink);
    white-space: nowrap;
  }

  & .project-sheet__info-cart {
    display: block;
    width: calc(34 * var(--rem));
    height: calc(34 * var(--rem));
    margin-top: calc(33 * var(--rem));
    background-color: currentColor;
    -webkit-mask: url(../img/icon-cart.png) 0 0 / 100% 100% no-repeat;
    mask: url(../img/icon-cart.png) 0 0 / 100% 100% no-repeat;
    color: var(--color-sheet-ink);
  }

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

  & .project-sheet__slider::before {
    position: absolute;
    z-index: 0;
    top: calc(-90 * var(--rem));
    left: calc(-135 * var(--rem));
    width: calc(1020 * var(--rem));
    height: calc(660 * var(--rem));
    background: radial-gradient(closest-side, rgb(255 255 255 / .616) 0%, rgb(255 255 255 / .526) 10%, rgb(255 255 255 / .441) 20%, rgb(255 255 255 / .361) 30%, rgb(255 255 255 / .286) 40%, rgb(255 255 255 / .218) 50%, rgb(255 255 255 / .156) 60%, rgb(255 255 255 / .101) 70%, rgb(255 255 255 / .055) 80%, rgb(255 255 255 / .019) 90%, rgb(255 255 255 / 0) 100%);
    content: "";
  }

  & .project-sheet__slider::after {
    position: absolute;
    z-index: 0;
    top: calc(-39 * var(--rem));
    left: 0;
    width: 100%;
    height: calc(582 * var(--rem));
    background: url(../img/sheet-letter01.png) calc(533 * var(--rem)) 0 / calc(49 * var(--rem)) auto no-repeat, url(../img/sheet-letter02.png) calc(664 * var(--rem)) calc(72 * var(--rem)) / calc(65 * var(--rem)) auto no-repeat, url(../img/sheet-letter03.png) calc(38 * var(--rem)) calc(463 * var(--rem)) / calc(58 * var(--rem)) auto no-repeat, url(../img/sheet-letter04.png) calc(-9 * var(--rem)) calc(508 * var(--rem)) / calc(60 * var(--rem)) auto no-repeat, url(../img/sheet-letter05.png) calc(91 * var(--rem)) calc(552 * var(--rem)) / calc(52 * var(--rem)) auto no-repeat;
    content: "";
  }

  & .project-sheet__slider-inner {
    position: relative;
    z-index: var(--z-base);
  }

  & .project-sheet__slider-swiper {
    width: calc(720 * var(--rem));
    margin-inline: auto;
  }

  & .project-sheet__slider-image--01 {
    -webkit-mask: url(../img/sheet-slide01-mask.png) 0 0 / 100% 100% no-repeat;
    mask: url(../img/sheet-slide01-mask.png) 0 0 / 100% 100% no-repeat;
  }

  & .project-sheet__slider-image--02 {
    -webkit-mask: url(../img/sheet-slide02-mask.png) 0 0 / 100% 100% no-repeat;
    mask: url(../img/sheet-slide02-mask.png) 0 0 / 100% 100% no-repeat;
  }

  & .project-sheet__slider-pager {
    position: relative;
    bottom: auto;
    display: flex;
    gap: calc(25 * var(--rem));
    width: auto;
    margin-top: calc(10 * var(--rem));
    margin-left: calc(618 * var(--rem));
  }

  & .project-sheet__slider-pager .swiper-pagination-bullet {
    position: relative;
    display: block;
    width: calc(20 * var(--rem));
    height: calc(20 * var(--rem));
    margin: 0;
    border: calc(2 * var(--rem)) solid var(--color-gold);
    border-radius: 0;
    background: none;
    opacity: 1;
  }

  & .project-sheet__slider-pager .swiper-pagination-bullet::after {
    position: absolute;
    inset: calc(-8 * var(--rem));
    content: "";
  }

  & .project-sheet__slider-pager .swiper-pagination-bullet-active {
    background-color: var(--color-gold);
  }

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

  & .project-sheet__kit-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(20 * var(--rem));
    font-family: var(--font-base);
    font-size: calc(32 * var(--rem));
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
    padding-left: .1em;
    color: var(--color-gold);
    white-space: nowrap;
  }

  & .project-sheet__kit-title::before,
  & .project-sheet__kit-title::after {
    display: block;
    width: calc(200 * var(--rem));
    height: calc(2 * var(--rem));
    background-color: var(--color-gold);
    content: "";
  }

  & .project-sheet__kit-item--01 {
    margin-top: calc(22 * var(--rem));
  }

  & .project-sheet__kit-item--01 .project-sheet__kit-text {
    margin-top: calc(94 * var(--rem));
    width: calc(250 * var(--rem));
  }

  & .project-sheet__kit-link {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(30 * var(--rem));
  }

  & .project-sheet__kit-image {
    width: calc(240 * var(--rem));
  }

  & .project-sheet__kit-text {
    font-family: var(--font-base);
    font-size: calc(25 * var(--rem));
    line-height: 1.75;
    letter-spacing: .075em;
    color: var(--color-text);
    white-space: nowrap;
  }

  & .project-sheet__kit-item--02 {
    margin-top: calc(20 * var(--rem));
  }

  & .project-sheet__kit-item--02 .project-sheet__kit-text {
    margin-top: calc(112 * var(--rem));
    width: calc(250 * var(--rem));
  }

  & .project-sheet {
    position: relative;
    display: flow-root;
    overflow: clip;
    padding-bottom: calc(100 * var(--rem));
    background: linear-gradient(var(--color-gold), var(--color-gold)) 0 0 / 100% calc(2 * var(--rem)) no-repeat, linear-gradient(var(--color-gold), var(--color-gold)) 0 100% / 100% calc(2 * var(--rem)) no-repeat, url(../img/bg-noise.png) 0 0 / calc(120 * var(--rem)) auto repeat var(--color-sheet);
    background-blend-mode: normal, normal, soft-light;
  }

  & .project-hand__marquee {
    position: relative;
    z-index: var(--z-base);
    overflow: hidden;
    margin-top: calc(22 * var(--rem));
    height: calc(218 * var(--rem));
  }

  & .project-hand__marquee-track {
    display: flex;
    width: max-content;
    margin-top: calc(-13 * var(--rem));
    margin-left: calc(-292 * var(--rem));
    animation: project-marquee var(--duration-hand-marquee) linear infinite;
  }

  & .project-hand__marquee-item {
    display: block;
    margin-right: calc(49 * var(--rem));
    font-family: var(--font-title);
    font-weight: 300;
    font-size: calc(190 * var(--rem));
    line-height: 1.147;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--color-marquee);
  }

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

  & .project-hand__catch-line {
    display: flex;
    align-items: flex-start;
  }

  & .project-hand__catch-lead {
    display: block;
    margin-top: calc(33 * var(--rem));
    margin-left: calc(119 * var(--rem));
    width: calc(263 * var(--rem));
    font-family: var(--font-base);
    font-size: calc(36 * var(--rem));
    line-height: 1.5;
    letter-spacing: .2em;
    text-align: center;
    padding-left: .2em;
    color: var(--color-text);
    white-space: nowrap;
  }

  & .project-hand__catch-char--01 {
    margin-left: calc(17 * var(--rem));
    width: calc(51 * var(--rem));
    --char-order: 0;
  }

  & .project-hand__catch-char--02 {
    margin-top: calc(31 * var(--rem));
    margin-left: calc(1 * var(--rem));
    width: calc(48 * var(--rem));
    --char-order: 1;
  }

  & .project-hand__catch-char--03 {
    margin-top: calc(10 * var(--rem));
    margin-left: calc(-4 * var(--rem));
    width: calc(51 * var(--rem));
    --char-order: 2;
  }

  & .project-hand__catch-char--04 {
    margin-top: calc(7 * var(--rem));
    margin-left: calc(36 * var(--rem));
    width: calc(48 * var(--rem));
    --char-order: 3;
  }

  & .project-hand__catch-char {
    display: block;
    font-family: var(--font-copy);
    font-size: calc(52 * var(--rem));
    line-height: 1.2308;
    letter-spacing: 0;
    color: var(--color-gold);
    white-space: nowrap;
  }

  & .project-hand__catch-sub {
    display: block;
    margin-top: calc(10 * var(--rem));
    width: calc(600 * var(--rem));
    margin-left: calc(73 * var(--rem));
    font-family: var(--font-base);
    font-size: calc(36 * var(--rem));
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
    padding-left: .1em;
    color: var(--color-text);
    white-space: nowrap;
  }

  & .project-hand__photo {
    display: block;
    margin-top: calc(71 * var(--rem));
    background: url(../img/hand-photo-letters.png) calc(167 * var(--rem)) calc(222 * var(--rem)) / calc(431 * var(--rem)) auto no-repeat, url(../img/hand-photo-bg.png) 0 0 / 100% auto no-repeat;
  }

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

  & .project-hand__info-link {
    display: flow-root;
  }

  & .project-hand__info-label {
    width: calc(372 * var(--rem));
    margin-inline: auto;
  }

  & .project-hand__info-name {
    display: block;
    margin-top: calc(51 * var(--rem));
    width: calc(600 * var(--rem));
    margin-inline: auto;
    font-family: var(--font-price);
    font-size: calc(36 * var(--rem));
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
    padding-left: .1em;
    color: var(--color-text);
    white-space: nowrap;
  }

  & .project-hand__info-price {
    display: block;
    margin-top: calc(24 * var(--rem));
    width: calc(390 * var(--rem));
    margin-inline: auto;
    font-family: var(--font-price);
    font-size: calc(26 * var(--rem));
    line-height: 1.5;
    letter-spacing: .075em;
    text-align: center;
    padding-left: .075em;
    color: var(--color-text);
    white-space: nowrap;
  }

  & .project-hand__info-button {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(26 * var(--rem));
    margin-top: calc(54 * var(--rem));
    width: calc(560 * var(--rem));
    margin-inline: auto;
    height: calc(100 * var(--rem));
    background-color: var(--color-button);
  }

  & .project-hand__info-buy {
    display: block;
    margin-top: calc(26 * var(--rem));
    width: calc(105 * var(--rem));
    font-family: var(--font-button);
    font-size: calc(42 * var(--rem));
    line-height: 1.1667;
    letter-spacing: .075em;
    text-align: center;
    padding-left: .075em;
    color: var(--color-hand-ink);
    white-space: nowrap;
  }

  & .project-hand__info-cart {
    display: block;
    width: calc(34 * var(--rem));
    height: calc(34 * var(--rem));
    margin-top: calc(33 * var(--rem));
    background-color: currentColor;
    -webkit-mask: url(../img/icon-cart.png) 0 0 / 100% 100% no-repeat;
    mask: url(../img/icon-cart.png) 0 0 / 100% 100% no-repeat;
    color: var(--color-hand-ink);
  }

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

  & .project-hand__slider::before {
    position: absolute;
    z-index: 0;
    top: calc(-90 * var(--rem));
    left: calc(-135 * var(--rem));
    width: calc(1020 * var(--rem));
    height: calc(660 * var(--rem));
    background: radial-gradient(closest-side, rgb(255 255 255 / .618) 0%, rgb(255 255 255 / .528) 10%, rgb(255 255 255 / .442) 20%, rgb(255 255 255 / .362) 30%, rgb(255 255 255 / .287) 40%, rgb(255 255 255 / .218) 50%, rgb(255 255 255 / .156) 60%, rgb(255 255 255 / .102) 70%, rgb(255 255 255 / .055) 80%, rgb(255 255 255 / .02) 90%, rgb(255 255 255 / 0) 100%);
    content: "";
  }

  & .project-hand__slider::after {
    position: absolute;
    z-index: 0;
    top: calc(-24 * var(--rem));
    left: 0;
    width: 100%;
    height: calc(536 * var(--rem));
    background: url(../img/hand-letter01.png) calc(-14 * var(--rem)) 0 / calc(61 * var(--rem)) auto no-repeat, url(../img/hand-letter02.png) calc(11 * var(--rem)) calc(112 * var(--rem)) / calc(58 * var(--rem)) auto no-repeat, url(../img/hand-letter03.png) calc(594 * var(--rem)) calc(452 * var(--rem)) / calc(64 * var(--rem)) auto no-repeat, url(../img/hand-letter04.png) calc(665 * var(--rem)) calc(505 * var(--rem)) / calc(61 * var(--rem)) auto no-repeat;
    content: "";
  }

  & .project-hand__slider-inner {
    position: relative;
    z-index: var(--z-base);
  }

  & .project-hand__slider-swiper {
    width: calc(720 * var(--rem));
    margin-inline: auto;
  }

  & .project-hand__slider-image--01 {
    -webkit-mask: url(../img/hand-slide01-mask.png) 0 0 / 100% 100% no-repeat;
    mask: url(../img/hand-slide01-mask.png) 0 0 / 100% 100% no-repeat;
  }

  & .project-hand__slider-image--02 {
    -webkit-mask: url(../img/hand-slide02-mask.png) 0 0 / 100% 100% no-repeat;
    mask: url(../img/hand-slide02-mask.png) 0 0 / 100% 100% no-repeat;
  }

  & .project-hand__slider-pager {
    position: relative;
    bottom: auto;
    display: flex;
    gap: calc(25 * var(--rem));
    width: auto;
    margin-top: calc(10 * var(--rem));
    margin-left: calc(60 * var(--rem));
  }

  & .project-hand__slider-pager .swiper-pagination-bullet {
    position: relative;
    display: block;
    width: calc(20 * var(--rem));
    height: calc(20 * var(--rem));
    margin: 0;
    border: calc(2 * var(--rem)) solid var(--color-gold);
    border-radius: 0;
    background: none;
    opacity: 1;
  }

  & .project-hand__slider-pager .swiper-pagination-bullet::after {
    position: absolute;
    inset: calc(-8 * var(--rem));
    content: "";
  }

  & .project-hand__slider-pager .swiper-pagination-bullet-active {
    background-color: var(--color-gold);
  }

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

  & .project-hand__kit-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(20 * var(--rem));
    font-family: var(--font-base);
    font-size: calc(32 * var(--rem));
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
    padding-left: .1em;
    color: var(--color-gold);
    white-space: nowrap;
  }

  & .project-hand__kit-title::before,
  & .project-hand__kit-title::after {
    display: block;
    width: calc(200 * var(--rem));
    height: calc(2 * var(--rem));
    background-color: var(--color-gold);
    content: "";
  }

  & .project-hand__kit-item--01 {
    margin-top: calc(22 * var(--rem));
  }

  & .project-hand__kit-item--01 .project-hand__kit-text {
    margin-top: calc(94 * var(--rem));
    width: calc(320 * var(--rem));
  }

  & .project-hand__kit-link {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(30 * var(--rem));
  }

  & .project-hand__kit-image {
    width: calc(240 * var(--rem));
  }

  & .project-hand__kit-text {
    font-family: var(--font-base);
    font-size: calc(25 * var(--rem));
    line-height: 1.75;
    letter-spacing: .075em;
    color: var(--color-text);
    white-space: nowrap;
  }

  & .project-hand__kit-item--02 {
    margin-top: calc(20 * var(--rem));
  }

  & .project-hand__kit-item--02 .project-hand__kit-text {
    margin-top: calc(116 * var(--rem));
    width: calc(320 * var(--rem));
  }

  & .project-hand__viewall {
    margin-top: calc(140 * var(--rem));
    width: calc(650 * var(--rem));
    margin-inline: auto;
  }

  & .project-hand__viewall-link {
    display: flow-root;
    height: calc(80 * var(--rem));
    background-color: var(--color-viewall);
  }

  & .project-hand__viewall-text {
    display: block;
    margin-top: calc(12 * var(--rem));
    font-family: var(--font-button);
    font-size: calc(36 * var(--rem));
    line-height: 1.5;
    letter-spacing: .075em;
    text-align: center;
    padding-left: .075em;
    color: var(--color-hand-ink);
    white-space: nowrap;
  }

  & .project-hand {
    position: relative;
    display: flow-root;
    overflow: clip;
    padding-bottom: calc(140 * var(--rem));
    background: linear-gradient(var(--color-gold), var(--color-gold)) 0 0 / 100% calc(2 * var(--rem)) no-repeat, url(../img/bg-noise.png) 0 0 / calc(120 * var(--rem)) auto repeat var(--color-hand);
    background-blend-mode: normal, soft-light;
  }

  & .layout-rail__inner {
    position: relative;
    width: min(100%, calc(550 * var(--rem-pc)), calc((100dvh - var(--header-height, 0px)) * 550 / 1000));
    aspect-ratio: 550 / 1000;
    container-type: inline-size;
    --size-rail: calc(100cqw / 550);
  }

  & .project-rail__letter {
    position: absolute;
  }

  & .project-rail__letter--01 {
    top: calc(95 * var(--size-rail));
    left: calc(46 * var(--size-rail));
    width: calc(24 * var(--size-rail));
  }

  & .project-rail__letter--02 {
    top: calc(167 * var(--size-rail));
    left: calc(181 * var(--size-rail));
    width: calc(32 * var(--size-rail));
  }

  & .project-rail__letter--03 {
    top: calc(784 * var(--size-rail));
    left: calc(397 * var(--size-rail));
    width: calc(29 * var(--size-rail));
  }

  & .project-rail__letter--04 {
    top: calc(829 * var(--size-rail));
    left: calc(351 * var(--size-rail));
    width: calc(30 * var(--size-rail));
  }

  & .project-rail__letter--05 {
    top: calc(874 * var(--size-rail));
    left: calc(449 * var(--size-rail));
    width: calc(26 * var(--size-rail));
  }

  & .project-rail__letter--06 {
    top: calc(100 * var(--size-rail));
    left: calc(50 * var(--size-rail));
    width: calc(30 * var(--size-rail));
  }

  & .project-rail__letter--07 {
    top: calc(144 * var(--size-rail));
    left: calc(58 * var(--size-rail));
    width: calc(29 * var(--size-rail));
  }

  & .project-rail__letter--08 {
    top: calc(792 * var(--size-rail));
    left: calc(354 * var(--size-rail));
    width: calc(32 * var(--size-rail));
  }

  & .project-rail__letter--09 {
    top: calc(853 * var(--size-rail));
    left: calc(447 * var(--size-rail));
    width: calc(31 * var(--size-rail));
  }

  & .project-rail__title {
    display: flow-root;
  }

  & .project-rail__logo {
    width: calc(113 * var(--size-rail));
    margin: calc(385 * var(--size-rail)) auto 0;
  }

  & .project-rail__holiday {
    display: block;
    margin-top: calc(35 * var(--size-rail));
    width: calc(250 * var(--size-rail));
    margin-inline: auto;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: calc(30 * var(--size-rail));
    line-height: 1.3263;
    letter-spacing: .1em;
    text-align: center;
    padding-left: .1em;
    color: var(--color-title);
    white-space: nowrap;
  }

  & .project-rail__gift {
    display: block;
    margin-top: calc(14 * var(--size-rail));
    width: calc(270 * var(--size-rail));
    margin-inline: auto;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: calc(45 * var(--size-rail));
    line-height: .81;
    letter-spacing: .1em;
    text-align: center;
    padding-left: .1em;
    color: var(--color-title);
    white-space: nowrap;
  }

  & .project-rail__nav {
    display: flex;
    justify-content: center;
    gap: calc(15 * var(--size-rail));
    padding-top: calc(460 * var(--size-rail));
  }

  & .project-rail__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(200 * var(--size-rail));
    height: calc(80 * var(--size-rail));
    background-color: var(--color-button);
  }

  & .project-rail__link--sheet {
    color: var(--color-sheet-ink);
  }

  & .project-rail__link--hand {
    color: var(--color-hand-ink);
  }

  & .project-rail__label {
    display: block;
    margin-top: calc(17 * var(--size-rail));
    font-family: var(--font-title);
    font-weight: 700;
    font-size: calc(24 * var(--size-rail));
    line-height: 1.3692;
    letter-spacing: .075em;
    text-align: center;
    padding-left: .075em;
    white-space: nowrap;
  }

  & .project-rail__icon {
    display: block;
    width: calc(16 * var(--size-rail));
    height: calc(7 * var(--size-rail));
    margin-top: calc(10 * var(--size-rail));
    stroke-width: 1.9;
  }

  & .project-anchorbar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: var(--z-base);
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: calc(100 * var(--rem));
    background-color: var(--color-button);
    translate: 0 100%;
    transition: translate .5s var(--transition-timing);
  }

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

  & .project-anchorbar__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & .project-anchorbar__link--sheet {
    color: var(--color-sheet-ink);
  }

  & .project-anchorbar__link--hand {
    color: var(--color-hand-ink);
  }

  & .project-anchorbar__link--hand::before {
    position: absolute;
    top: calc(20 * var(--rem));
    left: 0;
    width: calc(2 * var(--rem));
    height: calc(60 * var(--rem));
    background-color: var(--color-divider);
    content: "";
  }

  & .project-anchorbar__label {
    display: block;
    margin-top: calc(7 * var(--rem));
    font-family: var(--font-title);
    font-weight: 700;
    font-size: calc(42 * var(--rem));
    line-height: 1.369;
    letter-spacing: .075em;
    text-align: center;
    padding-left: .075em;
    white-space: nowrap;
  }

  & .project-anchorbar__icon {
    display: block;
    width: calc(21 * var(--rem));
    height: calc(10 * var(--rem));
    margin-top: calc(6 * var(--rem));
  }
}

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

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

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

  & .layout-rail {
    display: none;

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

  & .layout-primary {
    min-width: 0;

    overflow: hidden;
  }

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

.lp_contents {
  & .layout-rail {
    @media (min-width: 769px) {
      z-index: var(--z-base);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents {
    & .project-sheet__marquee-track,
    & .project-hand__marquee-track {
      animation: none;
    }
  }
}