@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 {
  --color-beige-txt: #926c35;
  --color-brown: #8e5b0f;
  --color-gold: #a97e19;
  --color-text: #6c6c6c;
  --color-text-sub: #707070;
  --color-beige: #e2d0b6;
  --color-beige-light: #fefbf7;
  --color-orange: #ed8a5c;
  --color-badge-price: #d16262;
  --color-badge-point: #f1f2d3;
  --color-badge-point-text: #212121;
  --color-step: #d4b485;
  --color-sign-bg: #fff5e7;
  --color-cta-top: #cd9e5a;
  --color-info: #fafaf6;
  --color-info-text: #212121;

  --lp-font-ja: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-ja-only: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-serif: "Cormorant Garamond", "Times New Roman", serif;
  --font-script: "Allura", cursive;
  --font-event: "Asul", "Times New Roman", serif;

  --transition-timing: cubic-bezier(.51, .21, .41, 1);
  --letter-spacing: .1em;

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

.lp_contents {
  position: relative;
  font-family: var(--lp-font-ja);
  color: var(--color-text);
  font-style: normal;
  letter-spacing: var(--letter-spacing);
  line-break: strict;
  -webkit-font-smoothing: antialiased;

  & *,
  & *: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,
  & ol,
  & 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(a, button):focus-visible {
    outline: 2px solid var(--color-brown);
    outline-offset: 2px;
  }

  & [tabindex="-1"]:focus {
    outline: none;
  }

  & .project-ja-punct {
    font-family: var(--font-ja-only);
    line-height: 0;
    letter-spacing: inherit;
  }

  & [hidden] {
    display: none !important;
  }
}

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

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

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

@keyframes project-page-fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

html.js .lp_contents {
  animation: project-page-fadein 1s ease-out;
}

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

  & .project-sign__title::before {
    transform-origin: left center;
    transition: scale 1s var(--transition-timing);
  }

  & .project-sign__item::before {
    transition: opacity .6s ease, clip-path .6s ease;
  }

  & .project-sign__item:nth-child(2)::before {
    transition-delay: .2s;
  }

  & .project-sign__item:nth-child(3)::before {
    transition-delay: .4s;
  }

  & .project-sign__bg {
    transition: opacity 1s ease .4s, translate 1s ease .4s;
  }
}

html.js .lp_contents {
  & .ani-fadein:not(.is-active) {
    opacity: 0;
    filter: blur(5px);
  }

  & .project-why.ani-fadein:not(.is-active) {
    filter: none;
  }

  & .project-sign__title:not(.is-active)::before {
    scale: 0 1;
  }

  & .project-closing__catch:not(.is-active) span {
    background-size: 0 calc(15 * var(--rem));
  }

  & .project-sign:not(:has(.project-sign__title.is-active)) {
    & .project-sign__item::before {
      opacity: 0;
      clip-path: inset(0 100% 0 0);
    }

    & .project-sign__bg {
      opacity: 0;
      translate: 0 calc(-20 * var(--rem));
    }
  }
}

.lp_contents {
  & .project-bubble {
    position: relative;
    display: grid;
    place-items: center;
    margin-inline: auto;
    font-size: calc(14 * var(--rem));
    color: var(--color-beige-txt);
    text-align: center;
    white-space: nowrap;

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: var(--bubble-line) 0 0 / 100% 100% no-repeat;
      content: "";
    }
  }

  & .project-bubble--scenes {
    --bubble-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 290 63' preserveAspectRatio='none'%3E%3Cpath d='M153 49.5H265A24.5 24.5 0 0 0 265 .5H25A24.5 24.5 0 0 0 25 49.5H138M153.2 49.3L145.4 62.1' fill='none' stroke='%23926C35' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    width: calc(290 * var(--rem));
    height: calc(50 * var(--rem));
    line-height: calc(18 / 14);

    &::after {
      height: calc(63 * var(--rem));
    }
  }

  & .project-bubble--steps {
    --bubble-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 204 41' preserveAspectRatio='none'%3E%3Cpath d='M110 27.5H190A13.5 13.5 0 0 0 190 .5H14A13.5 13.5 0 0 0 14 27.5H95M110.2 27.3L102.4 40.1' fill='none' stroke='%23926C35' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    width: calc(204 * var(--rem));
    height: calc(28 * var(--rem));
    line-height: 1;

    &::after {
      height: calc(41 * var(--rem));
    }
  }

  & .project-badges {
    display: flex;
    gap: calc(4 * var(--rem));
  }

  & .project-badge {
    display: flex;
    align-items: center;
    height: calc(20 * var(--rem));
    padding-inline: calc(10 * var(--rem));
    border-radius: calc(3 * var(--rem));
    font-weight: 700;
    font-size: calc(11 * var(--rem));
    line-height: 1;
    white-space: nowrap;
  }

  & .project-badge--price {
    background-color: var(--color-badge-price);
    color: #fff;
    letter-spacing: .05em;
  }

  & .project-badge--point {
    background-color: var(--color-badge-point);
    color: var(--color-badge-point-text);
    letter-spacing: .05em;
  }

  & .project-campaign {
    width: calc(360 * var(--rem));
    margin: calc(60 * var(--rem)) auto 0;
    padding: calc(20 * var(--rem));
    background-color: var(--color-beige-light);
    border: 1px solid var(--color-beige);
    border-radius: calc(3 * var(--rem));
    font-size: calc(15 * var(--rem));
    text-align: center;
    letter-spacing: .02em;

    & .project-badges {
      justify-content: center;
      gap: calc(7 * var(--rem));
      margin-top: calc(16 * var(--rem));
    }
  }

  & .project-campaign__title {
    color: var(--color-orange);
    line-height: 1.2;
    letter-spacing: .02em;
    white-space: nowrap;

    & span {
      letter-spacing: .02em;
    }
  }

  & .project-campaign__info {
    display: flex;
    flex-direction: column;
    gap: calc(5 * var(--rem));
    margin-top: calc(12 * var(--rem));
    letter-spacing: .02em;
    white-space: nowrap;

    & :is(p, span) {
      letter-spacing: .02em;
    }
  }

  & .project-campaign__period {
    color: var(--color-beige-txt);
  }

  & .project-campaign__deadline {
    display: block;
    font-weight: 700;
    font-size: calc(14 * var(--rem));
    line-height: calc(24 * var(--rem));
  }

  & .project-campaign__day {
    font-size: calc(12 * var(--rem));
    line-height: 0;
  }

  & .project-campaign__event {
    display: block;
    font-size: calc(18 * var(--rem));
    line-height: calc(27 * var(--rem));
  }

  & .project-campaign__offer {
    font-size: calc(18 * var(--rem));
    line-height: 0;
    color: var(--color-orange);

    & span {
      font-weight: 600;
    }
  }

  & .project-campaign__num {
    margin-left: calc(3 * var(--rem));
    font-size: calc(30 * var(--rem));
    line-height: calc(36 * var(--rem));
    vertical-align: -.05em;
  }

  & .project-campaign__unit {
    font-size: calc(22 * var(--rem));
    line-height: 0;
  }

  & .project-campaign__note {
    margin-top: calc(5 * var(--rem));
    font-size: calc(12 * var(--rem));
    line-height: calc(18 / 12);
    color: var(--color-text);
  }

  & .project-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(25 * var(--rem));
    padding-block: calc(40 * var(--rem));
    background-color: rgb(255 255 255 / .8);
    border: 1px solid var(--color-brown);
    border-radius: calc(5 * var(--rem));
  }

  & .project-item--sinnpurete {
    background-color: rgb(255 255 255 / .7);

    & .project-item__title {
      line-height: calc(30 / 20);
    }
  }

  & .project-item--step {
    padding-block: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;

    & .project-item__photo img {
      filter: drop-shadow(calc(3 * var(--rem)) calc(3 * var(--rem)) calc(10 * var(--rem)) rgb(0 0 0 / .1));
    }
  }

  & .project-item__title {
    font-size: calc(20 * var(--rem));
    line-height: 1.4;
    color: var(--color-brown);
    text-align: center;
    white-space: nowrap;
  }

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

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

  & .project-item__photo {
    display: flex;
    justify-content: center;
    width: calc(130 * var(--rem));

    & img {
      width: auto;
      height: calc(180 * var(--rem));
    }
  }

  & .project-item--sinnpurete .project-item__photo img {
    width: auto;
    height: calc(138 * var(--rem));
  }

  & .project-item__detail {
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--rem));
    width: calc(181 * var(--rem));
  }

  & .project-item__names {
    display: flex;
    flex-direction: column;
    gap: calc(6 * var(--rem));
  }

  & .project-item__brand {
    -webkit-text-stroke: calc(.6 * var(--rem)) var(--color-gold);
    font-family: var(--font-serif);
    font-size: calc(16 * var(--rem));
    line-height: 1;
    color: var(--color-gold);
    white-space: nowrap;
  }

  & .project-item__name {
    font-size: calc(15 * var(--rem));
    line-height: calc(23 / 15);
    white-space: nowrap;
  }

  & .project-item__price {
    font-size: calc(16 * var(--rem));
    line-height: 1;
    color: var(--color-text-sub);
    white-space: nowrap;
  }

  & .project-item__tax {
    font-size: calc(11 * var(--rem));
    letter-spacing: .1em;
  }

  & .project-item__features {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--rem));

    & li {
      position: relative;
      padding-left: calc(22 * var(--rem));
      font-size: calc(13 * var(--rem));
      line-height: calc(17 / 13);
      white-space: nowrap;

      &::before {
        position: absolute;
        top: calc(1 * var(--rem));
        left: 0;
        width: calc(16 * var(--rem));
        height: calc(16 * var(--rem));
        background: url(../img/item-check.svg) 0 0 / 100% no-repeat;
        content: "";
      }
    }
  }

  & .project-item__btn {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(190 * var(--rem));
    height: calc(40 * var(--rem));
    background-color: var(--color-brown);
    border-radius: calc(5 * var(--rem));
    font-size: calc(15 * var(--rem));
    line-height: 1;
    color: #fff;
    white-space: nowrap;

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

.lp_contents {
  & .project-top {
    position: relative;

    &::before {
      position: absolute;
      top: calc(354 * var(--rem));
      left: 0;
      width: 100%;
      height: calc(390 * var(--rem));
      background: linear-gradient(to bottom, rgb(245 243 240 / 0) 0%, #f5f3f0 16.593%, #fff 100%);
      content: "";
    }
  }

  & .project-intro {
    position: relative;
    width: calc(343 * var(--rem));
    margin: calc(40 * var(--rem)) auto 0;
    color: var(--color-beige-txt);
    text-align: center;
  }

  & .project-intro__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    white-space: nowrap;

    & > span {
      display: block;
    }
  }

  & .project-intro__label {
    width: calc(230 * var(--rem));
    padding-bottom: calc(8 * var(--rem));
    background: linear-gradient(90deg, rgb(146 108 53 / 0) 0%, var(--color-beige-txt) 40%, var(--color-beige-txt) 60%, rgb(146 108 53 / 0) 100%) 0 100% / 100% 1px no-repeat;
    font-size: calc(14 * var(--rem));
    letter-spacing: .1em;
  }

  & .project-intro__sub {
    margin-top: calc(10 * var(--rem));
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    letter-spacing: .1em;
  }

  & .project-intro__main {
    margin-top: calc(10 * var(--rem));
    font-weight: 500;
    font-size: calc(30 * var(--rem));
    letter-spacing: .05em;
  }

  & .project-intro__en {
    margin-top: calc(-15 * var(--rem));
    font-family: var(--font-serif);
    font-size: calc(45 * var(--rem));
    line-height: 1;
    color: var(--color-gold);
    letter-spacing: 0;
    white-space: nowrap;
    opacity: .1;
  }

  & .project-intro__text {
    margin-top: calc(21 * var(--rem));
    font-size: calc(15 * var(--rem));
    line-height: 2;
    color: var(--color-text);
    white-space: nowrap;
  }
}

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

  & .project-why__title {
    font-size: calc(22 * var(--rem));
    line-height: calc(31 / 22);
    color: var(--color-beige-txt);
    text-align: center;
    white-space: nowrap;
  }

  & .project-why__box {
    position: relative;
    margin-top: calc(15 * var(--rem));
    padding: calc(20 * var(--rem)) calc(25 * var(--rem));
    border: 1px dashed var(--color-beige-txt);
    border-radius: calc(4 * var(--rem));

    &::before,
    &::after {
      position: absolute;
      width: calc(29 * var(--rem));
      height: calc(14 * var(--rem));
      background: 0 0 / 100% no-repeat;
      content: "";
    }

    &::before {
      top: calc(-7 * var(--rem));
      left: 0;
      background-image: url(../img/why-quote-open.svg);
    }

    &::after {
      right: calc(-1 * var(--rem));
      bottom: calc(-7 * var(--rem));
      background-image: url(../img/why-quote-close.svg);
    }
  }

  & .project-why__text {
    font-size: calc(14 * var(--rem));
    line-height: calc(25 / 14);
    white-space: nowrap;
  }
}

.lp_contents {
  & .project-sign {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(60 * var(--rem));
  }

  & .project-sign > :not(.project-sign__bg) {
    position: relative;
    z-index: var(--z-base);
  }

  & .project-sign__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to bottom, rgb(255 245 231 / 0), var(--color-sign-bg));

    &::after {
      position: absolute;
      top: calc(100% - 1px);
      left: 0;
      width: 100%;
      height: calc(43 * var(--rem));
      background-color: var(--color-sign-bg);
      clip-path: polygon(.037% 0, 99.963% 0, 50% 100%);
      content: "";
    }
  }

  & .project-sign__label {
    display: grid;
    place-items: center;
    width: calc(280 * var(--rem));
    height: calc(21 * var(--rem));
    background-color: var(--color-beige-txt);
    border-radius: calc(2 * var(--rem));
    font-size: calc(13 * var(--rem));
    line-height: 1;
    color: #fff;
    white-space: nowrap;
  }

  & .project-sign__title {
    position: relative;
    width: calc(280 * var(--rem));
    margin-top: calc(10 * var(--rem));
    font-size: calc(28 * var(--rem));
    line-height: calc(39 / 28);
    color: var(--color-beige-txt);
    text-align: center;
    white-space: nowrap;

    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: calc(13 * var(--rem));
      background-color: rgb(146 108 53 / .1);
      content: "";
    }
  }

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

  & .project-sign__en {
    position: absolute;
    top: calc(23 * var(--rem));
    left: calc(261 * var(--rem));
    font-family: var(--font-script);
    font-size: calc(28 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
    rotate: -8deg;
  }

  & .project-sign__list {
    width: calc(310 * var(--rem));
    margin-top: calc(10 * var(--rem));
  }

  & .project-sign__item {
    position: relative;
    padding: calc(15 * var(--rem)) calc(5 * var(--rem)) calc(15 * var(--rem)) calc(40 * var(--rem));
    font-size: calc(16 * var(--rem));
    line-height: 1.5;
    white-space: nowrap;

    &:not(:last-child) {
      border-bottom: 1px dashed var(--color-beige);
    }

    &::before {
      position: absolute;
      top: calc(17 * var(--rem));
      left: calc(5 * var(--rem));
      width: calc(20 * var(--rem));
      height: calc(20 * var(--rem));
      background: url(../img/sign-check.svg) 0 0 / 100% no-repeat;
      content: "";
    }
  }
}

.lp_contents {
  & .project-scenes {
    padding-bottom: calc(60 * var(--rem));
    background: url(../img/scene-bg.jpg) 0 0 / 100% 100% no-repeat, #fff;
  }

  & .project-scenes__lead {
    padding: calc(80 * var(--rem)) calc(15 * var(--rem)) 0;
    background: linear-gradient(to bottom, #fff, rgb(255 255 255 / 0));
  }

  & .project-scenes__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(15 * var(--rem));
    margin-top: calc(23 * var(--rem));
    color: var(--color-beige-txt);
    line-height: 1;
    white-space: nowrap;

    & > span {
      font-size: calc(18 * var(--rem));
      letter-spacing: .1em;
    }
  }

  & .project-scenes__title > .project-scenes__title-main {
    font-weight: 500;
    font-size: calc(30 * var(--rem));
  }

  & .project-scene-nav__list {
    display: flex;
    justify-content: space-between;
    margin-top: calc(30 * var(--rem));
  }

  & .project-scene-nav__item:nth-child(2) {
    --ani-delay: .15s;
  }

  & .project-scene-nav__item:nth-child(3) {
    --ani-delay: .3s;
  }

  & .project-scene-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(115 * var(--rem));
    height: calc(70 * var(--rem));
    padding-top: calc(10 * var(--rem));
    background-color: #fff;
    border-radius: 50%;
    box-shadow: calc(3 * var(--rem)) calc(3 * var(--rem)) calc(10 * var(--rem)) rgb(226 208 182 / .2);
    font-size: calc(15 * var(--rem));
    line-height: 1;
    color: var(--color-beige-txt);
    white-space: nowrap;

    &::after {
      width: calc(6 * var(--rem));
      height: calc(6 * var(--rem));
      margin-top: calc(6 * var(--rem));
      background: url(../img/scene-nav-chevron.svg) 0 0 / 100% no-repeat;
      rotate: 45deg;
      content: "";
    }
  }

  & .project-scene-nav__icon {
    width: calc(20 * var(--rem));
  }

  & .project-scene-nav__label {
    margin-top: calc(6 * var(--rem));
    letter-spacing: .05em;
    text-box: trim-both cap alphabetic;
  }

  & .project-scene-nav__icon--daily {
    scale: 1 -1;
  }

  & .project-scenes__list {
    display: flex;
    flex-direction: column;
    gap: calc(60 * var(--rem));
    margin-top: calc(50 * var(--rem));
  }

  & .project-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(30 * var(--rem));
    padding-inline: calc(15 * var(--rem));
  }

  & .project-scene--night {
    padding-block: calc(1 * var(--rem));
  }

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

  & .project-scene__icon {
    flex-shrink: 0;
    width: calc(69 * var(--rem));
  }

  & .project-scene__title {
    font-size: calc(18 * var(--rem));
    line-height: 1.5;
    letter-spacing: .1em;
    color: var(--color-beige-txt);
    white-space: nowrap;
  }

  & .project-scene__list {
    display: flex;
    flex-direction: column;
    gap: calc(30 * var(--rem));
    width: 100%;
  }

  & .project-summary {
    width: calc(330 * var(--rem));
  }

  & .project-summary__lead {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(290 * var(--rem));
    height: calc(50 * var(--rem));
    margin-inline: auto;
    background-color: var(--color-beige-light);
    border: 1px solid var(--color-beige);
    border-radius: calc(100 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: calc(18 / 14);
    color: var(--color-beige-txt);
    text-align: center;
    white-space: nowrap;
  }

  & .project-summary__text {
    margin-top: calc(-25 * var(--rem));
    padding: calc(35 * var(--rem) - 1px) calc(25 * var(--rem) - 1px) calc(16 * var(--rem) - 1px);
    background-color: rgb(255 255 255 / .7);
    border: 1px dashed var(--color-beige-txt);
    border-radius: calc(5 * var(--rem));
    font-size: calc(13 * var(--rem));
    line-height: calc(23 / 13);
    color: var(--color-text-sub);
    white-space: nowrap;
  }
}

.lp_contents {
  & .project-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: calc(60 * var(--rem));
    background: url(../img/step-bg.jpg) 0 0 / 100% 100% no-repeat, #fff;
  }

  & .project-steps__title {
    margin-top: calc(19 * var(--rem));
    font-size: calc(22 * var(--rem));
    line-height: calc(29 / 22);
    color: var(--color-beige-txt);
    text-align: center;
    white-space: nowrap;
  }

  & .project-steps__list {
    width: 100%;
    margin-top: calc(30 * var(--rem));
  }

  & .project-step + .project-step {
    margin-top: calc(30 * var(--rem));

    &::before {
      display: block;
      width: calc(69 * var(--rem));
      height: calc(23 * var(--rem));
      margin: calc(7 * var(--rem)) auto calc(5 * var(--rem));
      background: linear-gradient(to bottom, rgb(226 208 182 / .25), var(--color-beige));
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      opacity: .5;
      content: "";
    }
  }

  & .project-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(25 * var(--rem));
  }

  & .project-step__head {
    display: grid;
    width: calc(327 * var(--rem));
    height: calc(65 * var(--rem));

    & > * {
      grid-area: 1 / 1;
    }
  }

  & .project-step__lead {
    width: calc(295 * var(--rem));
    height: calc(54 * var(--rem));
    margin: calc(6 * var(--rem)) 0 0 calc(32 * var(--rem));
    padding: calc(8 * var(--rem) - 1px) 0 0 calc(45 * var(--rem) - 1px);
    background-color: #fff;
    border: 1px dashed var(--color-beige);
    border-radius: calc(2 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: calc(18 / 14);
    color: var(--color-beige-txt);
    white-space: nowrap;
  }

  & .project-step__num {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(65 * var(--rem));
    height: calc(65 * var(--rem));
    background-color: var(--color-step);
    border-radius: 50%;
    font-size: calc(16 * var(--rem));
    line-height: 1;
    color: #fff;
    letter-spacing: .057em;

    & span {
      font-size: calc(22 * var(--rem));
      letter-spacing: .041em;
    }
  }
}

.lp_contents {
  & .project-closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(60 * var(--rem));
    padding-block: calc(60 * var(--rem));
  }

  & .project-closing__message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(15 * var(--rem));
    width: calc(322 * var(--rem));
    text-align: center;
    white-space: nowrap;
  }

  & .project-closing__title {
    font-size: calc(18 * var(--rem));
    line-height: calc(25 / 18);
    color: var(--color-beige-txt);
  }

  & .project-closing__text {
    font-size: calc(14 * var(--rem));
    line-height: 2;
    color: var(--color-text-sub);
  }

  & .project-closing__catch {
    width: calc(318 * var(--rem));
    font-size: calc(22 * var(--rem));
    line-height: calc(39 / 22);
    color: var(--color-brown);
    white-space: nowrap;

    & span {
      display: block;
      padding-left: calc(5 * var(--rem));
      background: linear-gradient(to bottom, rgb(226 208 182 / 0), rgb(226 208 182 / .4)) 0 calc(22 * var(--rem)) / 100% calc(15 * var(--rem)) no-repeat;
      transition: background-size .8s var(--transition-timing);
    }

    & span:last-child {
      padding-bottom: calc(2 * var(--rem));
      background-position-y: calc(26 * var(--rem));
      transition-delay: .5s;
    }
  }

  & .project-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(8 * var(--rem));
    width: calc(300 * var(--rem));
    height: calc(68 * var(--rem));
    background: linear-gradient(to bottom, var(--color-cta-top), var(--color-brown));
    border-radius: calc(100 * var(--rem));
    line-height: 1;
    color: #fff;
    white-space: nowrap;

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

  & .project-cta__label {
    font-size: calc(18 * var(--rem));
    letter-spacing: .1em;
    text-box: trim-both cap alphabetic;
  }

  & .project-cta__en {
    font-family: var(--font-script);
    font-size: calc(18 * var(--rem));
    letter-spacing: .05em;
    text-box: trim-both cap alphabetic;
  }

}

.lp_contents {
  & .project-info {
    padding-block: calc(60 * var(--rem));
    background: var(--color-info);
  }

  & .project-info__block {
    display: grid;
    justify-items: center;
    color: var(--color-info-text);
    text-align: center;
  }

  & .project-info__block--days {
    margin-top: calc(50 * var(--rem));
  }

  & .project-info__title {
    font-size: calc(24 * var(--rem));
    font-weight: 700;
    line-height: calc(29 / 24);
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-info__title--days {
    font-family: var(--font-event);
  }

  & .project-info__text {
    margin-top: calc(12 * var(--rem));
    font-size: calc(15 * var(--rem));
    line-height: calc(23 / 15);
    letter-spacing: 0;
    white-space: nowrap;
  }

  & .project-info__banner {
    width: calc(330 * var(--rem));
    margin-top: calc(20 * var(--rem));
  }

  & .project-info__link {
    display: block;
  }

  & .project-info__link:not([hidden]) ~ .project-info__link {
    display: none;
  }
}

.lp_contents {
  & .project-rail-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(15 * var(--rem-pc));
    width: calc(319 * var(--rem-pc));
    font-weight: 500;
    line-height: 1;
    color: var(--color-beige-txt);
    white-space: nowrap;
  }

  & .project-rail-copy__lead {
    font-size: calc(17 * var(--rem-pc));
  }

  & .project-rail-copy__title {
    font-size: calc(31 * var(--rem-pc));
  }

  & .project-rail-copy__comma {
    letter-spacing: -.4em;
  }

  & .project-rail-copy__sub {
    width: 100%;
    padding: calc(5 * var(--rem-pc)) calc(7 * var(--rem-pc));
    background-color: rgb(255 255 255 / .8);
    font-size: calc(21 * var(--rem-pc));
    text-align: center;
  }

  & .project-rail-nav {
    scale: var(--rail-scale, 1);
    display: flex;
    flex-direction: column;
    gap: calc(30 * var(--rem-pc));
    color: var(--color-beige-txt);
    white-space: nowrap;
    pointer-events: auto;
  }

  & .project-rail-nav__group {
    display: flex;
    flex-direction: column;
    gap: calc(15 * var(--rem-pc));
  }

  & .project-rail-nav__group--scene {
    gap: calc(20 * var(--rem-pc));
    padding-bottom: calc(20 * var(--rem-pc));
    border-bottom: 1px dashed var(--color-beige-txt);
  }

  & .project-rail-nav__title {
    font-size: calc(22 * var(--rem-pc));
    line-height: calc(29 / 22);
  }

  & .project-rail-nav__list {
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--rem-pc));
  }

  & .project-rail-nav__scene {
    display: flex;
    align-items: center;
    gap: calc(15 * var(--rem-pc));
    padding-block: calc(6 * var(--rem-pc));
    font-size: calc(18 * var(--rem-pc));
    line-height: 1;
  }

  & .project-rail-nav__label {
    letter-spacing: .05em;
    text-box: trim-both cap alphabetic;
  }

  & .project-rail-nav__icon {
    position: relative;
    flex-shrink: 0;
    width: calc(28 * var(--rem-pc));
    height: calc(30 * var(--rem-pc));

    & img {
      position: absolute;
      top: calc(var(--icon-y) * -1 * var(--rem-pc));
      left: calc(var(--icon-x) * -1 * var(--rem-pc));
      width: calc(var(--icon-w) * var(--rem-pc));
      max-width: none;
    }
  }

  & .project-rail-nav__icon--night {
    --icon-x: 12;
    --icon-y: 10;
    --icon-w: 52;
  }

  & .project-rail-nav__icon--daily {
    --icon-x: 12;
    --icon-y: 10;
    --icon-w: 52;
  }

  & .project-rail-nav__icon--special {
    --icon-x: 12;
    --icon-y: 10;
    --icon-w: 50;
  }

  & .project-rail-nav__step {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--rem-pc));
    padding-block: calc(6 * var(--rem-pc));
  }

  & .project-rail-nav__num {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: calc(30 * var(--rem-pc));
    height: calc(30 * var(--rem-pc));
    border: 1px solid var(--color-beige-txt);
    border-radius: 50%;
    font-size: calc(18 * var(--rem-pc));
    line-height: 1;
    white-space: nowrap;

    & span {
      display: block;
      letter-spacing: 0;
      text-box: trim-both cap alphabetic;
    }
  }

  & .project-rail-nav__text {
    font-size: calc(14 * var(--rem-pc));
    line-height: calc(18 / 14);
    letter-spacing: .1em;
  }
}

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

    &.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: var(--header-height, 0px);
      z-index: var(--z-sticky);
      display: grid;
      place-items: center;
      height: calc(100dvh - var(--header-height, 0px));
      --pc-bg-h: calc(100dvh - var(--header-height, 0px));
      --pc-bg-w: max(100vw, calc(var(--pc-bg-h) * 16 / 9));
      background: url(../img/pc-bg.jpg) calc((100vw - var(--pc-bg-w)) / 2) calc((var(--pc-bg-h) - var(--pc-bg-w) * 9 / 16) / 2) / var(--pc-bg-w) auto no-repeat;
      pointer-events: none;
    }
  }

  & .layout-rail--right {
    @media (min-width: 769px) {
      background-position-x: calc((100vw - var(--pc-bg-w)) / 2 - (100vw + var(--artboard-pw) * var(--rem-pc)) / 2);
    }
  }

  & .layout-primary {
    min-width: 0;
    overflow: hidden;
    background-color: #fff;
  }

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

@supports not (text-box: trim-both cap alphabetic) {
  .lp_contents .project-scene-nav__label {
    margin-top: calc(4 * var(--rem));
  }

  .lp_contents .project-scene-nav__link::after {
    margin-top: calc(4 * var(--rem));
  }

  .lp_contents .project-cta {
    gap: calc(2 * var(--rem));
  }

  .lp_contents .project-rail-nav__num span {
    translate: 0 calc(-1 * var(--rem-pc));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .lp_contents {
    animation: none;
  }

  html.js .lp_contents .ani-fadein:not(.is-active),
  html.js .lp_contents .project-sign:not(:has(.project-sign__title.is-active)) .project-sign__bg,
  html.js .lp_contents .project-sign:not(:has(.project-sign__title.is-active)) .project-sign__item::before {
    opacity: 1;
    filter: none;
    translate: 0 0;
    clip-path: none;
  }

  html.js .lp_contents .project-sign__title:not(.is-active)::before {
    scale: 1 1;
  }

  html.js .lp_contents .project-closing__catch:not(.is-active) span {
    background-size: 100% calc(15 * var(--rem));
  }

  .lp_contents .ani-fadein,
  .lp_contents .project-sign__bg,
  .lp_contents .project-sign__title::before,
  .lp_contents .project-sign__item::before,
  .lp_contents .project-closing__catch span {
    transition: none;
  }
}