@charset "UTF-8";

/* ========================================================
                      * Variable *
========================================================= */
:root {
  --pw: 1400; /* PC幅 */
  --sw: 780; /* SP幅 */
  --artboard-pw: 468; /* PCアートボード幅 */
  --artboard-sw: 780; /* SPアートボード幅 */
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);

  --base-font-color: #282828;
  --color-accent: #ab9c6d;
  --lp-background-color: #ebf6fc;
  --color-yellow: #faf9f2;
  --color-green: #ECF4E1;
  --color-blue: #EDF7FC;
  --color-pink: #FAEEF0;

  --lp-font-ja: lato, ryo-gothic-plusn, hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-en: meno-banner, serif;
  --font-mincho: "Noto Serif JP", serif; /*regular 400*/

  --icon-arrow: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22txt%22%20viewBox%3D%220%200%2022%2052%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A2px%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22m1%2051%2020-25M1%201l20%2025%22%20class%3D%22cls-1%22%2F%3E%3C%2Fsvg%3E');
  --icon-arrow-down: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2031.25%2014.06%22%3E%3Cpath%20d%3D%22m30.62.78-15%2012-15-12%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2px%22%2F%3E%3C%2Fsvg%3E');
}

@media (768px <= width) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}
@media (1400px <= width) {
  :root {
    --variable: 1px;
  }
}
@media (width < 768px) {
  :root {
    --ratio: 1;
    --variable: calc(100vw / var(--sw));
  }
}

/* ========================================================
                      * Layout style *
========================================================= */
/* html {
  scroll-behavior: smooth;
  font-size: 62.5%
} */
main {
  max-width: 100%;
}

@media (768px <= width) {
  #Wrap,
  .wrapBottom,
  .wrapTop,
  #Contents {
    width: 100%;
  }
}
#FooterWrap {
  position: relative;
}


/* ===================
  LP Contents
=================== */
.lp_contents {
  --letter-spacing: .125em;
  position: relative;
  background: var(--lp-background-color, transparent);
  color: var(--base-font-color, #000);
  font-family: var(--lp-font-ja);
  font-weight: 400;
  font-size: calc(28 * var(--rem));
  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) {
    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;
    max-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),
      background-image var(--duration) var(--timing),
      border-color var(--duration) var(--timing),
      text-shadow var(--duration) var(--timing),
      text-weight var(--duration) var(--timing)
    ;
  }
  & :where(a) {
    color: inherit;
    text-decoration: none;
    text-underline-offset: calc(4 * var(--rem));
    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }
  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
}


/* ===================
  Layout
=================== */
.layout-mobile-first {
  position: relative;
  @media (768px <= width) {
    display: flex;
  }
}
.layout-mobile-first__left,
.layout-mobile-first__right {
  position: relative;
  width: calc((100% - (var(--artboard-pw) * var(--rem-pc))) / 2);
}
.layout-mobile-first__sticky {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.layout-mobile-first__main {
  overflow-x: clip;
  /* padding-block: calc(80 * var(--rem)) calc(205 * var(--rem)); */
  /* background: url(../img/bg_1.jpg) no-repeat top center/cover; */
  @media (768px <= width) {
    width: calc(var(--artboard-pw) * var(--rem-pc));
  }
}


/* ===================
  Utility
=================== */


/* ===================
  Component
=================== */
/* button */
.component-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(480 * var(--rem));
  height: calc(106 * var(--rem));
  margin-inline: auto;
  background: var(--color-accent);
  border-radius: calc(53 * var(--rem));
  color: #fff;
  font-family: var(--lp-font-en);
  font-size: calc(46 * var(--rem));
  letter-spacing: .025em;
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(40 * var(--rem));
    width: calc(12 * var(--rem));
    height: calc(30 * var(--rem));
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20data-name%3D%22%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20viewBox%3D%220%200%2014.06%2031.25%22%3E%3Cpath%20d%3D%22m.78%2030.62%2012-15-12-15%22%20style%3D%22fill%3Anone%3Bstroke%3A%23fff%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2px%22%2F%3E%3C%2Fsvg%3E') no-repeat center/contain;
    translate: 0 -50%;
    pointer-events: none;
  }
}

/* viewmore */
.component-viewmore {
  position: relative;
  display: block;
  margin-inline: auto;
  padding-bottom: calc(36 * var(--rem));
  color: var(--color-accent);
  font-size: calc(26 * var(--rem));
  letter-spacing: .025em;
  cursor: pointer;
  &::before,
  &::after {
    content: "";
    position: absolute;
    bottom: calc(14 * var(--rem));
    left: 50%;
    width: calc(26.42 * var(--rem));
    height: 1px;
    background: currentColor;
    translate: -50% 0;
  }
  &::before {
    margin-left: calc(10 * var(--rem));
    rotate: -39deg;
  }
  &::after {
    margin-left: calc(-10 * var(--rem));
    rotate: 39deg;
  }
  &.is-open {
    padding-bottom: 0;
    &::before,
    &::after {
      bottom: calc(6 * var(--rem));
      width: calc(30 * var(--rem));
      rotate: 0deg;
    }
    &::before {
      margin-left: calc(15 * var(--rem));
    }
    &::after {
      margin-left: calc(-15 * var(--rem));
    }
  }
}

/* viewdetails */
.component-viewdetails {
  position: relative;
  width: calc(60 * var(--rem));
  height: calc(60 * var(--rem));
  background: var(--color-accent);
  border-radius: 50%;
  color: #fff;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(34 * var(--rem));
    height: 1px;
    background: currentColor;
    translate: -50% -50%;
  }
  &::after {
    rotate: 90deg;
  }
}

/* stamp */
.component-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(202 * var(--rem));
  height: calc(202 * var(--rem));
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--color-accent);
  font-size: calc(26 * var(--rem));
  line-height: calc(39 / 26);
  letter-spacing: .1em;
  text-align: center;
  .--small {
    font-size: calc(24 * var(--rem));
    letter-spacing: 0;
  }
}

/* deco */
.component-deco {
  position: absolute;
  background: var(--img-src) no-repeat top left / 100%;
  pointer-events: none;
}


/* ===================
  Animation
=================== */
.fade-blur {
  opacity: 0;
  filter: blur(5px);
  transition:
    opacity 2s var(--transition-timing),
    filter 2s var(--transition-timing);
  &.is-active {
    opacity: 1;
    filter: blur(0);
  }
  .is-active > & {
    opacity: 1;
    filter: blur(0);
  }
}
.fade-up {
  opacity: 0;
  translate: 0 calc(80 * var(--rem));
  transition:
    opacity 1.8s var(--transition-timing),
    translate 1.5s var(--transition-timing);
  &.is-active {
    opacity: 1;
    translate: 0 0;
  }
  .is-active > & {
    opacity: 1;
    translate: 0 0;
  }
}


/* ===================
  Accordion
=================== */
.js-accordion--body {
  max-height: calc(320 * var(--rem));
  overflow: hidden;
  transition: max-height .6s ease-in-out;
  will-change: max-height;
  transform: translate3d(0,0,0);
  &.--mask {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
    &.is-open {
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
    }
  }
  &.project-item__detail-body {
    max-height: calc(345 * var(--rem));
    padding-bottom: 1px;
    &.--2 {
      max-height: calc(204 * var(--rem));
    }
  }
  &.project-look-item-flow {
    max-height: calc(411 * var(--rem));
  }
}


/* ===================
  Modal
=================== */
/* body.is-modal-open {
  overflow: hidden;
  scrollbar-gutter: stable;
} */
.project-modal {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: auto;
  background: none;
  border: none;
  opacity: 0;
  scale: 0.95;
  /* overflow: visible; */
  transition: opacity .3s, scale .3s;
  &.is-open {
    opacity: 1;
    scale: 1;
  }
  &.is-closing {
    animation: fade-out 0.3s ease-out forwards;
  }
  &.is-closing::backdrop {
    animation: fade-out-backdrop 0.3s ease-out forwards;
  }
}
dialog::backdrop {
  background-color: rgba(255, 255, 255, 0);
  cursor: pointer;
  transition: background-color 0.3s;
}
dialog.is-open::backdrop {
  background-color: rgba(255, 255, 255, 0.5);
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes fade-out-backdrop {
  from { background-color: rgba(255, 255, 255, 0.5); }
  to { background-color: rgba(255, 255, 255, 0); }
}

.project-modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(740 * var(--rem));
  max-width: 100vw;
  max-height: calc(100dvh - (60 * var(--rem)));
  background-color: #fff;
  translate: -50% -50%;
  transition: transform 0.3s ease-out;
  overflow-y: scroll;
  scrollbar-width: none;
  overscroll-behavior: contain;
  /* .simplebar-wrapper {
    max-height: 90vh;
  } */
}
.project-modal__close-button {
  position: absolute;
  top: calc(30 * var(--rem));
  right: calc(30 * var(--rem));
  z-index: 10;
  width: calc(40 * var(--rem));
  height: calc(40 * var(--rem));
  border: none;
  cursor: pointer;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(56.5685 * var(--rem));
    height: 1px;
    background-color: #666;
  }
  &::before {
    translate: -50% -50%;
    rotate: 45deg;
  }
  &::after {
    translate: -50% -50%;
    rotate: -45deg;
  }
}


/* ===================
  .project-modal-content
=================== */
.project-modal-content {
  position: relative;
  padding-block: calc(118 * var(--rem)) calc(120 * var(--rem));
}


/* ===================
  .project-item-details
=================== */
.project-item-details__item-container {
  width: calc(582 * var(--rem));
  margin-inline: auto;
}
.project-item-details__item-image {
  position: relative;
  overflow: hidden;
  width: calc(582 * var(--rem));
  height: calc(582 * var(--rem));
  border: 1px solid var(--color-accent);
  &.is-grabbing {
    cursor: grabbing !important;
  }
  & img {
    width: 100%;
    pointer-events: none; /* 画像自体のドラッグ防止 */
    transform-origin: center center;
    transition: transform 0.1s ease-out; /* スムーズな追従 */
  }
  .component-zoom-icon {
    position: absolute;
    bottom: calc(20 * var(--rem));
    right: calc(20 * var(--rem));
    width: calc(60 * var(--rem));
    height: calc(60 * var(--rem));
    cursor: pointer;
    & img {
      width: 100%;
    }
  }
}
.project-item-details__item-body {
  border-top: 1px dotted var(--color-accent);
  padding-top: calc(59 * var(--rem));
  padding-inline: calc(29 * var(--rem));
  .js-details-item-slider & {
    margin-top: calc(217 * var(--rem));
    &:has(.project-item-details__item-body__heading) {
      padding-top: calc(40 * var(--rem));
    }
  }
  &:has(.project-item-details__item-body__text:first-child) {
    padding-top: calc(46 * var(--rem));
  }
}
.project-item-details__item-body__palette {
  width: calc(128 * var(--rem));
  height: calc(84 * var(--rem));
  margin-inline: auto;
  margin-bottom: calc(45 * var(--rem));
  & img {
    width: 100%;
  }
}
.project-item-details__item-body__heading {
  margin-bottom: calc(27 * var(--rem));
  color: var(--color-accent);
  font-family: var(--font-mincho);
  font-size: calc(30 * var(--rem));
  line-height: calc(66 / 30);
  text-align: center;
}
.project-item-details__item-body__text {
  font-size: calc(24 * var(--rem));
  line-height: calc(52.8 / 24);
  letter-spacing: .125em;
  text-align: justify;
}
.project-item-details__item-body__button {
  margin-top: calc(80 * var(--rem));
  .project-item__detail-body__list + & {
    margin-top: calc(69 * var(--rem));
  }
  .project-item-details__item-body__text + & {
    margin-top: calc(70 * var(--rem));
  }
  .component-button {
    width: calc(450 * var(--rem));
    height: calc(100 * var(--rem));
    font-size: calc(43.4 * var(--rem));
    &::after {
      right: calc(35 * var(--rem));
    }
  }
}
.project-item-details__item-head {
  display: flex;
  justify-content: space-between;
  padding-block: calc(60 * var(--rem)) calc(50 * var(--rem));
  padding-inline: calc(30 * var(--rem)) calc(10 * var(--rem));
  .project-item__image-navigation__container {
    margin-inline: 0;
  }
  .project-item__image-navigation {
    width: auto;
    margin-top: calc(8 * var(--rem));
    margin-inline: 0;
    .project-item__image-navigation__item {
      --thumbnail-width: calc(90 * var(--rem));
      margin-inline: calc(10 * var(--rem));
      &::after {
        width: calc(56 * var(--rem));
      }
      & img {
        aspect-ratio: 90 / 75;
      }
    }
  }
}
.project-item-details__item-name {
  color: var(--color-accent);
  font-size: calc(24 * var(--rem));
  line-height: calc(38.4 / 24);
  letter-spacing: .1em;
}
.project-item-details__slide {
  position: relative;
  transition: opacity .3s;
  > .project-item-details__item-head {
    position: absolute;
    top: calc(582 * var(--rem));
    left: 50%;
    z-index: 10;
    width: calc(580 * var(--rem));
    translate: -50% 0;
  }
}

:where(.project-slick) {
  .project-modal & {
    opacity: 0;
    transition: opacity 0.5s ease-in-out .5s;
    &.is-initialized {
      opacity: 1;
    }
  }
  .slick-prev,
  .slick-next {
    top: calc(260 * var(--rem));
    z-index: 15;
    display: block !important;
    width: calc(22 * var(--rem));
    height: calc(60 * var(--rem));
    transform: translate(0, 0);
    &::before {
      content: "";
      display: block;
      width: calc(22 * var(--rem));
      height: calc(60 * var(--rem));
      background-color: #828282;
      mask: var(--icon-arrow) no-repeat center / contain;
      opacity: 1;
    }
  }
  .slick-prev {
    left: calc(30 * var(--rem));
    &::before {
      rotate: 180deg;
    }
  }
  .slick-next {
    right: calc(30 * var(--rem));
  }
}


/* ===================
  .project-mainvisual
=================== */
.project-mainvisual {
  position: relative;
  background: var(--color-yellow);
  > img {
    width: 100%;
  }
}
.project-mainvisual__title {
  position: absolute;
  top: calc(898 * var(--rem));
  left: 50%;
  width: calc(417.741 * var(--rem));
  translate: -50% 0;
  & img {
    width: 100%;
  }
  .is-active & {
    .fade-up {
      opacity: 1;
      translate: 0 0;
      transition-delay: .5s;
    }
  }
}


/* ===================
  .project-section-introduction
=================== */
.project-section-introduction {
  position: relative;
  padding-block: calc(81 * var(--rem)) calc(248 * var(--rem));
  background: var(--color-yellow);
  .component-deco {
    /* top: calc(571 * var(--rem)); */
    bottom: calc(608 * var(--rem));
    left: 0;
    width: calc(450 * var(--rem));
    height: calc(470 * var(--rem));
  }
  .project-schedule-box {
    margin-top: calc(143 * var(--rem));
  }
  .js-accordion--body {
    max-height: calc(420 * var(--rem));
  }
  .component-viewmore {
    margin-top: calc(29 * var(--rem));
    transition: margin-top .6s ease-in-out;
    will-change: margin-top;
    &.is-open {
      margin-top: calc(36 * var(--rem));
    }
  }
}
.project-section-introduction__title {
  font-family: var(--lp-font-en);
  font-size: calc(64 * var(--rem));
  line-height: 1;
  letter-spacing: .025em;
  text-align: center;
}
.project-section-introduction__text-box {
  margin-top: calc(42 * var(--rem));
}
.project-section-introduction__text {
  font-family: var(--font-mincho);
  line-height: calc(61.6 / 28);
  letter-spacing: .06em;
  text-align: center;
  & + & {
    margin-top: calc(27 * var(--rem));
  }
}

/* ===================
  .project-schedule-box
=================== */
.project-schedule-box {
  position: relative;
  width: calc(620 * var(--rem));
  height: calc(238.057 * var(--rem));
  margin-inline: auto;
  padding: calc(8 * var(--rem));
  background: #fff;
  border: 1px solid var(--color-accent);
}
.project-schedule-box__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(42 * var(--rem));
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-accent);
}
.project-schedule-box__item {
  font-size: calc(28 * var(--rem));
  line-height: 1;
}
.project-schedule-box__item-label {
  margin-right: calc(34 * var(--rem));
  color: var(--color-accent);
}


/* ===================
  .project-section-anchor
=================== */
.project-section-anchor {
  margin-top: calc(150 * var(--rem));
}

/* ===================
  .project-anchor-box
=================== */
.project-anchor-box__list {
  display: flex;
  justify-content: center;
  margin-left: calc(6 * var(--rem));
}
.project-anchor-box__list-item {
  &.--child-2 {
    margin-left: calc(50 * var(--rem));
  }
  &.--child-3 {
    margin-left: calc(46 * var(--rem));
  }
  &.--child-4 {
    margin-left: calc(40 * var(--rem));
  }
}
.project-anchor-box {
  display: block;
  width: auto;
}
.project-anchor-box__image {
  width: calc(140 * var(--rem));
  margin-inline: auto;
  &.--large {
    width: calc(160 * var(--rem));
  }
  & img {
    width: 100%;
  }
}
.project-anchor-box__body {
  margin-top: calc(16 * var(--rem));
  text-align: center;
}
.project-anchor-box__body-label {
  font-family: var(--lp-font-en);
  color: var(--color-accent);
  font-size: calc(24 * var(--rem));
  line-height: calc(33.6 / 24);
  letter-spacing: .025em;
}
.project-anchor-box__arrow {
  display: block;
  width: calc(32 * var(--rem));
  height: calc(14 * var(--rem));
  margin-inline: auto;
  margin-top: calc(25 * var(--rem));
  background-color: var(--color-accent);
  mask: var(--icon-arrow-down) no-repeat center / contain;
}


/* ===================
  .project-section
=================== */
.project-section {
  position: relative;
  padding-bottom: calc(250 * var(--rem));
}
.project-section-eye-designer-n {
  background: var(--color-green);
  .component-deco {
    &.--1 {
      z-index: 10;
      top: calc(-192 * var(--rem));
      right: 0;
      width: calc(400 * var(--rem));
      height: calc(300 * var(--rem));
    }
    &.--2 {
      top: calc(2728 * var(--rem));
      right: 0;
      width: calc(220 * var(--rem));
      height: calc(1180 * var(--rem));
    }
    &.--3 {
      top: calc(4328 * var(--rem));
      left: 0;
      width: calc(180 * var(--rem));
      height: calc(1160 * var(--rem));
    }
  }
}
.project-section-euphoric-glow-blush {
  background: var(--color-blue);
  .component-deco {
    z-index: 10;
    top: calc(-202 * var(--rem));
    right: 0;
    width: calc(360 * var(--rem));
    height: calc(376 * var(--rem));
  }
}
.project-section-rouge-couture-charm-set {
  background: var(--color-pink);
  .component-deco {
    z-index: 10;
    top: calc(980 * var(--rem));
    left: 0;
    width: calc(300 * var(--rem));
    height: calc(300 * var(--rem));
  }
}
.project-section-eternal-radiance-powder {
  background: var(--color-green);
  .component-deco {
    z-index: 10;
    top: calc(876 * var(--rem));
    left: 0;
    width: calc(360 * var(--rem));
    height: calc(376 * var(--rem));
  }
}
.project-section__lead {
  font-family: var(--font-mincho);
  font-size: calc(30 * var(--rem));
  line-height: calc(66 / 30);
  letter-spacing: .05em;
  text-align: center;
  .project-look-section__image + & {
    margin-top: calc(100 * var(--rem));
  }
}


/* ===================
  .project-item
=================== */
.project-item-block {
  position: relative;
  width: calc(720 * var(--rem));
  margin-top: calc(150 * var(--rem));
  margin-inline: auto;
  padding-block: calc(100 * var(--rem)) calc(130 * var(--rem));
  background: #fff;
  &::before {
    position: absolute;
    inset: calc(9 * var(--rem));
    border: 1px solid var(--color-accent);
    content: "";
    pointer-events: none;
  }
  .project-section__lead + & {
    margin-top: calc(134 * var(--rem));
  }
  &:has(.component-stamp) {
    padding-top: calc(210 * var(--rem));
  }
  .project-section-euphoric-glow-blush &,
  .project-section-eternal-radiance-powder & {
    padding-top: calc(130 * var(--rem));
  }
  .project-section-rouge-couture-charm-set & {
    padding-top: calc(148 * var(--rem));
  }
  & + & {
    padding-top: calc(150 * var(--rem));
  }
  &.--no-button {
    padding-bottom: calc(113 * var(--rem));
  }
}
.project-item__overview {
  & + & {
    margin-top: calc(182 * var(--rem));
  }
}
.project-item__image-container {
  position: relative;
  &.--not-slider {
    .component-stamp {
      top: calc(-81 * var(--rem));
    }
    .component-viewdetails {
      bottom: 0;
    }
  }
  .project-section-rouge-couture-charm-set & {
    .component-stamp {
      top: calc(-88 * var(--rem));
    }
  }
  .component-stamp {
    position: absolute;
    top: calc(-141 * var(--rem));
    left: calc(39 * var(--rem));
  }
  .component-viewdetails {
    position: absolute;
    bottom: calc(144 * var(--rem));
    right: calc(40 * var(--rem));
    &[data-target="modal_2"] {
      bottom: calc(163 * var(--rem));
      right: calc(60 * var(--rem));
    }
  }
}
.project-item__image {
  position: relative;
  margin-inline: auto;
  width: var(--item-width, calc(500 * var(--rem)));
  aspect-ratio: 500 / 420;
  &.--2 {
    --item-width: calc(400 * var(--rem));
    aspect-ratio: 400 / 400;
  }
  &.--3 {
    --item-width: calc(550 * var(--rem));
    aspect-ratio: 550 / 420;
  }
  &.--4 {
    --item-width: calc(530 * var(--rem));
    aspect-ratio: 530 / 350;
  }
  &.--5 {
    --item-width: calc(600 * var(--rem));
    aspect-ratio: 600 / 394;
  }
}
.project-item__image-item {
  width: var(--item-width, calc(500 * var(--rem)));
  &.js-modal--trigger {
    cursor: pointer;
  }
  & img {
    width: 100%;
  }
}
.project-item__image-navigation__container {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  .slick-prev,
  .slick-next {
    top: calc(50% - ((24 * var(--rem)) / 2));
    width: calc(22 * var(--rem));
    height: calc(52 * var(--rem));
    z-index: 5;
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: #666;
      mask: var(--icon-arrow) no-repeat center / contain;
      opacity: 1;
    }
  }
  .slick-prev {
    left: 0;
    &::before {
      transform: rotate(180deg);
    }
  }
  .slick-next {
    right: 0;
  }
}
.project-item__image-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--navigation-width, calc(296 * var(--rem)));
  margin-top: calc(59 * var(--rem));
  margin-inline: auto;
  &.--2 {
    --navigation-width: calc(284 * var(--rem));
    margin-top: calc(60 * var(--rem));
  }
  &.--3 {
    --navigation-width: calc(398 * var(--rem));
    margin-top: calc(70 * var(--rem));
  }
  .slick-track {
    width: fit-content !important;
    transform: translate(0) !important;
  }
}
.project-item__image-navigation__item {
  position: relative;
  width: var(--thumbnail-width, calc(72 * var(--rem)));
  margin-inline: calc(15 * var(--rem));
  padding-bottom: calc(25 * var(--rem));
  cursor: pointer;
  .project-item__image-navigation.--2 & {
    --thumbnail-width: calc(70 * var(--rem));
    padding-bottom: calc(23 * var(--rem));
    & img {
      aspect-ratio: 70 / 70;
    }
  }
  &.is-current {
    &::after {
      rotate: y 0deg;
    }
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: calc(50 * var(--rem));
    height: calc(4 * var(--rem));
    background: var(--color-accent);
    translate: -50% 0;
    rotate: y 90deg;
    transition: rotate .3s ease-in-out;
  }
  & img {
    width: 100%;
    aspect-ratio: 72 / 60;
  }
}

/* ===================
  .project-item__overview-detail
=================== */
.project-item__overview-detail__container {
  position: relative;
  margin-top: calc(55 * var(--rem));
  .project-item__overview-detail {
    margin-top: 0;
  }
}
.project-item__overview-detail {
  margin-top: calc(56 * var(--rem));
  .js-work-with-slide & {
    height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 1s var(--transition-timing);
    &.is-active {
      height: auto;
      opacity: 1;
      pointer-events: auto;
    }
  }
}
.project-item__overview-detail__description {
  margin-top: calc(44 * var(--rem));
  margin-left: calc(4 * var(--rem));
  font-size: calc(28 * var(--rem));
  line-height: calc(61.6 / 28);
  text-align: center;
}
.project-item__overview-detail__name {
  margin-left: calc(4 * var(--rem));
  color: var(--color-accent);
  font-size: calc(36 * var(--rem));
  letter-spacing: .1em;
  text-align: center;
  .--ja {
    font-size: calc(30 * var(--rem));
  }
  & a {
    letter-spacing: inherit;
  }
}
.project-item__overview-detail__price {
  margin-top: calc(38 * var(--rem));
  margin-left: calc(-2 * var(--rem));
  font-size: calc(28 * var(--rem));
  line-height: 1;
  letter-spacing: .1em;
  text-align: center;
}
.project-item__overview-detail__button {
  margin-top: calc(43 * var(--rem));
}


/* ===================
  .project-item__detail
=================== */
.project-item__detail {
  .component-viewmore {
    margin-top: calc(78 * var(--rem));
    transition: margin-top .6s ease-in-out;
    &.is-open {
      margin-top: calc(83 * var(--rem));
    }
  }
}
.project-item__detail-body__list {
  width: calc(520 * var(--rem));
  margin-inline: auto;
  text-align: justify;
}
.project-item__detail-body__list-item {
  font-size: calc(26 * var(--rem));
  line-height: calc(57.2 / 26);
  .project-modal & {
    font-size: calc(24 * var(--rem));
    line-height: calc(52.8 / 24);
  }
  & a {
    color: var(--color-accent);
    letter-spacing: .12em;
    text-decoration: underline;
    @media (any-hover: hover) {
      &:hover {
        text-decoration: none;
      }
    }
  }
}


/* ===================
  .project-look-section
=================== */
.project-look-section {
  position: relative;
  padding-top: calc(94 * var(--rem));
  padding-bottom: calc(297 * var(--rem));
  background: linear-gradient(to bottom, var(--color-from) 0%, var(--color-from) calc(300 * var(--rem)), var(--color-to) calc(300 * var(--rem)), var(--color-to) 100%);
}
.project-look-section--1 {
  --color-from: var(--color-green);
  --color-to: var(--color-blue);
  .component-deco {
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(370 * var(--rem));
  }
}
.project-look-section--2 {
  --color-from: var(--color-blue);
  --color-to: var(--color-pink);
  padding-top: calc(62 * var(--rem));
  padding-bottom: calc(178 * var(--rem));
  .component-deco {
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(300 * var(--rem));
  }
}
.project-look-section__heading {
  margin-bottom: calc(96 * var(--rem));
  color: var(--color-accent);
  font-family: var(--lp-font-en);
  font-size: calc(110 * var(--rem));
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
}
.project-look-section__image {
  position: relative;
}
.project-look-section__label {
  position: absolute;
  z-index: 5;
  width: 100%;
  color: #fff;
  text-align: center;
  &.--1 {
    top: calc(901 * var(--rem));
  }
  &.--2 {
    top: calc(901 * var(--rem));
  }
  &.--3 {
    top: calc(62 * var(--rem));
  }
  &.--4 {
    top: calc(55 * var(--rem));
  }
  &.fade-up {
    transition-delay: .5s;
  }
}
.project-look-section__label-main {
  font-family: var(--lp-font-en);
  font-size: calc(70 * var(--rem));
  line-height: 1;
  letter-spacing: .0075em;
  .project-look-section__label.--2 & {
    letter-spacing: 0;
  }
  .project-look-section__label.--3 & {
    font-size: calc(64 * var(--rem));
    letter-spacing: .015em;
  }
  .project-look-section__label.--4 & {
    font-size: calc(80 * var(--rem));
    line-height: calc(95 / 80);
    letter-spacing: .0115em;
  }
}
.project-look-section__label-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: calc(58 * var(--rem));
  margin-inline: auto;
  margin-top: calc(34 * var(--rem));
  padding-inline: calc(35 * var(--rem)) calc(25 * var(--rem));
  border: 1px solid currentColor;
  font-size: calc(28 * var(--rem));
  .project-look-section__label.--3 & {
    margin-top: calc(30 * var(--rem));
    padding-inline: calc(30 * var(--rem)) calc(22 * var(--rem));
  }
  .project-look-section__label.--4 & {
    margin-top: calc(22 * var(--rem));
    padding-inline: calc(30 * var(--rem)) calc(22 * var(--rem));
  }
}


/* ===================
  .project-look-slider
=================== */
.project-look-slider {
  width: 100%;
  aspect-ratio: 780 / 1120;
  &.slick-dotted {
    margin-bottom: calc(40 * var(--rem));
  }
}
.project-look-slider__item {
  width: 100%;
  & img {
    width: 100%;
  }
}
.project-look-slider__navigation-container {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  /* .slick-prev,
  .slick-next {
    top: 50%;
    width: calc(20 * var(--rem));
    height: calc(44 * var(--rem));
    z-index: 5;
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: #828282;
      mask: var(--icon-arrow) no-repeat center / contain;
      opacity: 1;
    }
  }
  .slick-prev {
    left: calc(-56 * var(--rem));
    &::before {
      transform: rotate(180deg);
    }
  }
  .slick-next {
    right: calc(-56 * var(--rem));
  } */
}
.project-look-slider__dots {
  .slick-dots {
    position: static;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: calc(20 * var(--rem));
    & li {
      width: auto;
      height: auto;
      margin: 0;
    }
    & button {
      width: calc(100 * var(--rem));
      height: calc(8 * var(--rem));
      padding: 0;
      background: #fff;
      &::before {
        content: none;
      }
      .slick-active & {
        background: var(--color-accent);
      }
    }
  }
}


/* ===================
  .project-look-item-list
=================== */
.project-look-item-list__container {
  width: calc(720 * var(--rem));
  margin-top: calc(120 * var(--rem));
  margin-inline: auto;
  padding: calc(9 * var(--rem));
  background: #fff;
}
.project-look-item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-block: calc(40 * var(--rem));
  padding-inline: calc(20 * var(--rem));
  border: 1px solid var(--color-accent);
}
.project-look-item-list__item {
  width: calc(218 * var(--rem));
  padding-block: calc(20 * var(--rem)) calc(11 * var(--rem));
  .project-look-item-list.--1 & {
    &:where(:nth-child(1), :nth-child(2)) {
      padding-top: 0;
      border-bottom: 1px solid var(--color-accent);
    }
    &:first-child {
      width: calc(331 * var(--rem));
    }
    &:nth-child(2) {
      width: calc(325 * var(--rem));
      border-left: 1px solid var(--color-accent);
    }
    &:where(:nth-child(3), :nth-child(4), :nth-child(5)) {
      padding-bottom: 0;
      .project-look-item-list__item-name {
        margin-bottom: calc(-8 * var(--rem));
      }
    }
    &:where(:nth-child(4), :nth-child(5)) {
      border-left: 1px solid var(--color-accent);
    }
  }
  .project-look-item-list.--2 & {
    &:where(:nth-child(1), :nth-child(2), :nth-child(3)) {
      padding-top: 0;
      border-bottom: 1px solid var(--color-accent);
    }
    &:where(:nth-child(4), :nth-child(5), :nth-child(6)) {
      padding-bottom: 0;
      .project-look-item-list__item-name {
        margin-bottom: calc(-8 * var(--rem));
      }
    }
    &:not(:nth-child(1), :nth-child(4)) {
      border-left: 1px solid var(--color-accent);
    }
  }
}
.project-look-item-list__item-image {
  width: calc(130 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.project-look-item-list__item-name {
  margin-top: calc(0 * var(--rem));
  font-size: calc(22 * var(--rem));
  line-height: calc(39.6 / 22);
  letter-spacing: .1em;
  text-align: center;
  &.--line-2 {
    margin-top: calc(20 * var(--rem));
  }
}

.project-look-item-detail {
  margin-top: calc(84 * var(--rem));
}
.project-look-item-detail__viewmore {
  position: relative;
  z-index: 2;
  .component-viewmore {
    padding-bottom: calc(56 * var(--rem));
    font-size: calc(34 * var(--rem));
    letter-spacing: .1em;
    transition: margin-top 0.6s ease-in-out, padding-bottom 0.6s ease-in-out;
    will-change: margin-top, padding-bottom;
    &::before,
    &::after {
      width: calc(39.42 * var(--rem));
    }
    &::before {
      margin-left: calc(15 * var(--rem));
    }
    &::after {
      margin-left: calc(-15 * var(--rem));
    }
    &.is-open {
      margin-top: calc(60 * var(--rem));
      padding-bottom: calc(4 * var(--rem));
      &::before,
      &::after {
        width: calc(45 * var(--rem));
      }
      &::before {
        margin-left: calc(22.5 * var(--rem));
      }
      &::after {
        margin-left: calc(-22.5 * var(--rem));
      }
    }
  }
}


/* ===================
  .project-look-item-flow
=================== */
.project-look-item-flow {
  position: relative;
  z-index: 2;
}
.project-look-item-flow__list {
  width: calc(642 * var(--rem));
}


/* ===================
  .project-section-bottom
=================== */
.project-section-bottom {
  padding-top: calc(335 * var(--rem));
  padding-bottom: calc(77 * var(--rem));
  background: url(../img/deco_10.jpg) no-repeat top center / 100%, var(--color-yellow);
}
.project-section-bottom__body {
  color: var(--color-accent);
  text-align: center;
}
.project-section-bottom__link {
  position: relative;
  display: block;
  padding-bottom: calc(33 * var(--rem));
  font-family: var(--lp-font-en);
  font-size: calc(70 * var(--rem));
  letter-spacing: .02em;
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: calc(600 * var(--rem));
    height: 1px;
    background: var(--color-accent);
    translate: -50% 0;
    scale: 0 1;
    transition: scale 1.5s var(--transition-timing);
    transform-origin: left;
    will-change: scale;
  }
  &.is-active {
    &::after {
      scale: 1 1;
    }
  }
}
.project-section-bottom__text {
  margin-top: calc(51 * var(--rem));
  font-size: calc(20 * var(--rem));
  line-height: calc(60 / 27);
  letter-spacing: .1em;
  .--large {
    font-size: calc(30 * var(--rem));
    letter-spacing: .1em;
  }
}


/* ===================
  project-footer-nav
=================== */
.project-footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  opacity: 0;
  translate: 0 100%;
  transition: opacity 0.6s .2s ease, translate 0.6s .2s ease;
  &.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}
.project-footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
}
.project-footer-nav__item {
  &.--1,
  &.--2 {
    width: calc(390 * var(--rem));
  }
  &.--3 {
    width: calc(290 * var(--rem));
  }
  &.--4 {
    width: calc(300 * var(--rem));
  }
  &.--5 {
    width: calc(190 * var(--rem));
  }
  &:where(:nth-child(2), :nth-child(4), :nth-child(5)) {
    border-left: 1px solid var(--color-accent);
  }
  &:not(:first-child, :nth-child(2)) {
    border-top: 1px solid var(--color-accent);
  }
}
.project-footer-nav__item-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 * var(--rem));
  height: calc(98 * var(--rem));
  background: #fff;
  color: var(--color-accent);
  font-family: var(--lp-font-en);
  font-size: calc(26 * var(--rem));
  line-height: calc(36.4 / 26);
  letter-spacing: 0.025em;
  text-align: center;
}
.project-footer-nav__item-image {
  width: auto;
  height: calc(60 * var(--rem));
  & img {
    width: auto;
    height: 100%;
  }
}
.project-footer-nav__item-label {
  letter-spacing: inherit;
}


/* ===================
  .project-logo-box
=================== */
.project-logo-box {
  position: relative;
  .component-deco {
    position: absolute;
    top: calc(-52 * var(--rem-pc));
    left: calc(-73 * var(--rem-pc));
    width: calc(328 * var(--rem-pc));
    height: calc(185 * var(--rem-pc));
  }
}
.project-logo-box__main {
  width: calc(226 * var(--rem-pc));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}


/* ===================
  .project-current-nav
=================== */
.project-current-nav__list-container {
  margin-top: calc(9 * var(--rem-pc));
  margin-left: calc(-2 * var(--rem-pc));
  .component-deco {
    position: absolute;
    top: calc(-38 * var(--rem-pc));
    right: calc(13 * var(--rem-pc));
    width: calc(38 * var(--rem-pc));
    height: calc(38 * var(--rem-pc));
  }
}
.project-current-nav__list {
  width: calc(242 * var(--rem-pc));
}
.project-current-nav__item {
  & + & {
    margin-top: calc(10 * var(--rem-pc));
  }
  &.--fill {
    margin-top: calc(40 * var(--rem-pc));
    margin-left: calc(2 * var(--rem-pc));
    border-top: 1px solid var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
  }
}
.project-current-nav__item-body {
  display: flex;
  align-items: center;
  column-gap: calc(10 * var(--rem-pc));
  .--fill & {
    justify-content: center;
    height: calc(44 * var(--rem-pc));
  }
}
.project-current-nav__item-image {
  width: calc(80 * var(--rem-pc));
  & img {
    width: 100%;
  }
}
.project-current-nav__item-label {
  color: var(--color-accent);
  font-family: var(--lp-font-en);
  font-size: calc(16 * var(--rem-pc));
  line-height: calc(22.4 / 16);
  letter-spacing: .025em;
}


/*=======================================
               Responsive
========================================*/

/*=======================================
                    PC
========================================*/
@media (768px <= width) {
  .u-d-md {
    display: none !important;
  }
}


/*=======================================
                    SP
========================================*/
@media (width < 768px) {
  .u-d-lg {
    display: none !important;
  }

  .archive_area {
    padding-top: calc(180 * var(--rem)) !important;
  }
}