@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: #474443;
  --color-accent: #e07691;

  --font-cormorant: "Cormorant Garamond", serif;
  --font-mincho: source-han-serif-japanese, serif;

  --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');
}

@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 {
  position: relative;
  /* background: var(--lp-background-color, transparent); */
  /* font-family: var(--lp-font-ja); */
  color: var(--base-font-color, #000);
  font-size: calc(30 * var(--rem));
  font-style: normal;
  letter-spacing: .125em;
  & * {
    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) {
    margin: 0;
    padding: 0;
    /* font-family: inherit; */
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }
  & ul,
  & li {
    list-style: none;
  }
  & :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
  }
  & sup {
    font-size: calc(20 * var(--rem));
    vertical-align: unset;
  }
  & :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;
  }
}


/* ===================
  Layout
=================== */
.l-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fcecef;
  &::before {
    position: sticky;
    content: '';
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100vh;
    background: url(../img/1210/bg_star--lg.png) repeat-y top center / contain;
    mix-blend-mode: screen;
    transform: translate3d(0,0,0);
  }
}

.l-mobile-first {
  position: relative;
  @media (768px <= width) {
    display: flex;
  }
}
.l-mobile-first__left,
.l-mobile-first__right {
  position: relative;
  width: calc((100% - (var(--artboard-pw) * var(--rem-pc))) / 2);
}
.l-mobile-first__sticky {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.l-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
=================== */
.u-bg-pink {
  background: #fcecef;
}
.u-bg-pink--secondary {
  background: #fdf5f8;
}
.u-bg-white {
  background: #fff;
}
.u-bg-star {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/1210/bg_star.png) repeat-y top center / contain;
    mix-blend-mode: screen;
    transform: translate3d(0,0,0);
    pointer-events: none;
  }
  & > :where(*) {
    position: relative;
    z-index: 1;
  }
}
.u-font-cormorant {
  font-family: var(--font-cormorant);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
}
.u-mincho {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-style: normal;
}


/* ===================
  Component
=================== */
/* main title */
.c-main-title {
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, .1));
}

/* link point */
.c-link-point {
  width: calc(40 * var(--rem));
  height: calc(40 * var(--rem));
  background: #fff;
  border-radius: 50%;
  animation: blinking 2s linear 2s infinite;
}

/* button */
.c-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(520 * var(--rem));
  height: calc(100 * var(--rem));
  margin-inline: auto;
  background: var(--color-accent);
  border-radius: calc(50 * var(--rem));
  color: #fff;
  font-family: var(--font-cormorant);
  font-size: calc(40 * var(--rem));
  font-weight: 500;
  letter-spacing: .015em;
}

/* viewmore */
.c-viewmore {
  position: relative;
  display: block;
  margin-inline: auto;
  padding-bottom: calc(54 * var(--rem));
  font-size: calc(34 * var(--rem));
  letter-spacing: .1em;
  cursor: pointer;
  &::before,
  &::after {
    content: "";
    position: absolute;
    bottom: calc(12 * var(--rem));
    left: 50%;
    width: calc(38.42 * var(--rem));
    height: 1px;
    background: currentColor;
    translate: -50% 0;
  }
  &::before {
    margin-left: calc(14 * var(--rem));
    rotate: -39deg;
  }
  &::after {
    margin-left: calc(-14 * var(--rem));
    rotate: 39deg;
  }
  &.is-open {
    padding-bottom: calc(6 * var(--rem));
    &::before,
    &::after {
      bottom: 0;
      width: calc(45 * var(--rem));
      rotate: 0deg;
    }
    &::before {
      margin-left: calc(22 * var(--rem));
    }
    &::after {
      margin-left: calc(-22 * var(--rem));
    }
  }
}

/* viewdetails */
.c-viewdetails {
  position: relative;
  width: calc(70 * var(--rem));
  height: calc(70 * 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 */
.c-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(166 * var(--rem));
  height: calc(166 * var(--rem));
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--color-accent);
  font-size: calc(24 * var(--rem));
  line-height: calc(36 / 24);
  letter-spacing: .1em;
  text-align: center;
}


/* ===================
  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);
  }
}
.clip-anim {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 2.5s var(--transition-timing);
  &.is-active {
    clip-path: inset(0 0 0 0);
  }
}
.js-intersection-item {
  opacity: 0;
  translate: 0 5svh;
  transition: opacity 1.8s ease, translate 1.5s ease;
  .is-active & {
    opacity: 1;
    translate: 0 0;
  }
}

/* keyframes */
@keyframes checkButtonAnimation {
  0% {
    scale: 80%;
  }
  80% {
    scale: 100%;
  }
  100% {
    scale: 80%;
  }
}

@keyframes blinking {
  0% {
    opacity: 1;
    scale: 1;
  }
  24% {
    opacity: 1;
    scale: 1.2;
  }
  48% {
    opacity: 0;
    scale: 1.2;
  }
  52% {
    opacity: 0;
    scale: .8;
  }
  76% {
    opacity: 1;
    scale: .9;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}


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


/* ===================
  Modal
=================== */
/* body.is-modal-open {
  overflow: hidden;
  scrollbar-gutter: stable;
} */
.p-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(0, 0, 0, 0);
  cursor: pointer;
  transition: background-color 0.3s;
}
dialog.is-open::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes fade-out-backdrop {
  from { background-color: rgba(0, 0, 0, 0.3); }
  to { background-color: rgba(0, 0, 0, 0); }
}

.p-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;
  } */
}
.p-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: #828282;
  }
  &::before {
    translate: -50% -50%;
    rotate: 45deg;
  }
  &::after {
    translate: -50% -50%;
    rotate: -45deg;
  }
}


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


/* ===================
  .p-item-details
=================== */
.p-item-details__item-container {
  width: calc(580 * var(--rem));
  margin-inline: auto;
}
.p-item-details__item-image {
  position: relative;
  overflow: hidden;
  width: calc(580 * var(--rem));
  height: calc(580 * 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; /* スムーズな追従 */
  }
  .c-zoom-icon {
    position: absolute;
    bottom: calc(25 * var(--rem));
    right: calc(25 * var(--rem));
    width: calc(50 * var(--rem));
    height: calc(50 * var(--rem));
    cursor: pointer;
    & img {
      width: 100%;
    }
  }
}
.p-item-details__item-body {
  border-top: 1px dotted var(--color-accent);
  padding-top: calc(60 * var(--rem));
  .js-details-item-slider & {
    margin-top: calc(197 * var(--rem));
    &:has(.p-item-details__item-body__heading) {
      padding-top: calc(53 * var(--rem));
    }
  }
  &:has(.p-item-details__item-body__text:first-child) {
    padding-top: calc(46 * var(--rem));
  }
}
.p-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%;
  }
}
.p-item-details__item-body__heading {
  margin-bottom: calc(21 * var(--rem));
  color: var(--color-accent);
  font-family: var(--font-mincho);
  font-size: calc(32 * var(--rem));
  letter-spacing: .075em;
  text-align: center;
}
.p-item-details__item-body__text {
  font-size: calc(24 * var(--rem));
  line-height: calc(52.8 / 24);
  letter-spacing: .125em;
  text-align: center;
}
.p-item-details__item-body__button {
  margin-top: calc(80 * var(--rem));
  .p-item__detail-body__list + & {
    margin-top: calc(69 * var(--rem));
  }
  .p-item-details__item-body__text + & {
    margin-top: calc(72 * var(--rem));
  }
  .c-button {
    width: calc(360 * var(--rem));
    height: calc(100 * var(--rem));
  }
}
.p-item-details__item-head {
  display: flex;
  justify-content: space-between;
  padding-block: calc(42 * var(--rem)) calc(44 * var(--rem));
  padding-inline: calc(30 * var(--rem)) calc(9 * var(--rem));
  .p-item__image-navigation__container {
    margin-inline: 0;
  }
  .p-item__image-navigation {
    width: auto;
    margin-top: calc(8 * var(--rem));
    margin-inline: 0;
    .p-item__image-navigation__item {
      --thumbnail-width: calc(89 * var(--rem));
      margin-inline: calc(11 * var(--rem));
    }
  }
}
.p-item-details__item-name {
  font-size: calc(24 * var(--rem));
  line-height: calc(38.4 / 24);
  letter-spacing: .1em;
}
.p-item-details__slide {
  position: relative;
  transition: opacity .3s;
  > .p-item-details__item-head {
    position: absolute;
    top: calc(580 * var(--rem));
    left: 50%;
    z-index: 10;
    width: calc(580 * var(--rem));
    translate: -50% 0;
  }
}

:where(.p-slick) {
  .p-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));
  }
}



/* ===================
  .p-mainvisual
=================== */
.p-mainvisual__body {
  padding-block: calc(80 * var(--rem)) calc(180 * var(--rem));
  .p-schedule-box {
    margin-top: calc(86 * var(--rem));
  }
}
.p-mainvisual__title {
  width: calc(440 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.p-mainvisual__title-sub {
  margin-top: calc(20 * var(--rem));
  font-size: calc(28 * var(--rem));
  line-height: 1;
  letter-spacing: .1em;
  text-align: center;
}
.p-mainvisual__lead-box {
  margin-top: calc(64 * var(--rem));
}
.p-mainvisual__lead {
  font-family: var(--font-mincho);
  font-size: calc(28 * var(--rem));
  font-weight: 500;
  line-height: calc(61.6 / 28);
  letter-spacing: .075em;
  text-align: center;
  & + & {
    margin-top: calc(29 * var(--rem));
  }
}
.p-mainvisual__message {
  margin-top: calc(62 * var(--rem));
  font-size: calc(46 * var(--rem));
  line-height: calc(73.6 / 46);
  letter-spacing: 0;
  text-align: center;
}

/* ===================
  .p-schedule-box
=================== */
.p-schedule-box {
  position: relative;
  width: calc(560 * var(--rem));
  height: calc(192 * var(--rem));
  margin-inline: auto;
  padding: calc(7 * var(--rem));
  border: 1px solid var(--color-accent);
}
.p-schedule-box__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--rem));
  width: 100%;
  height: 100%;
  border: 1px dotted var(--color-accent);
}
.p-schedule-box__item {
  font-size: calc(26 * var(--rem));
  line-height: 1;
  letter-spacing: .125em;
}
.p-schedule-box__item-label {
  margin-right: calc(30 * var(--rem));
  color: var(--color-accent);
}


/* ===================
  .p-ribbon-box
=================== */
.p-ribbon-box {
  position: relative;
  display: block;
  width: calc(560 * var(--rem));
  height: calc(164 * var(--rem));
  margin-inline: auto;
  margin-top: calc(173 * var(--rem));
  padding-inline: calc(20 * var(--rem));
  background: #fff;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    box-shadow: 0 0 calc(6 * var(--rem)) rgba(35, 24, 21, .2);
    mix-blend-mode: multiply;
    transform: translate3d(0,0,0);
  }
}
.p-ribbon-box__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--rem));
  height: 100%;
  &::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-left: 1px dotted var(--color-accent);
    border-right: 1px dotted var(--color-accent);
  }
}
.p-ribbon-box__item {
  position: relative;
  color: var(--color-accent);
  font-family: var(--font-cormorant);
  font-style: italic;
  font-size: calc(64 * var(--rem));
  line-height: 1;
  letter-spacing: 0;
}

/* ===================
  .p-image-anchor
=================== */
.p-image-anchor__list {
  width: calc(660 * var(--rem));
  margin-top: calc(140 * var(--rem));
  margin-inline: auto;
}
.p-image-anchor {
  position: relative;
  & + & {
    margin-top: calc(10 * var(--rem));
  }
  & img {
    width: 100%;
  }
  .c-link-point {
    position: absolute;
  }
  &.--1 {
    .c-link-point {
      &.--1 {
        top: calc(130 * var(--rem));
        left: calc(290 * var(--rem));
      }
      &.--2 {
        top: calc(435 * var(--rem));
        left: calc(390 * var(--rem));
      }
    }
  }
  &.--2 {
    .c-link-point {
      &.--1 {
        top: calc(140 * var(--rem));
        left: calc(310 * var(--rem));
      }
      &.--2 {
        top: calc(485 * var(--rem));
        left: calc(175 * var(--rem));
      }
      &.--3 {
        top: calc(356 * var(--rem));
        left: calc(525 * var(--rem));
      }
    }
  }
  &.--3 {
    .c-link-point {
      &.--1 {
        top: calc(230 * var(--rem));
        left: calc(100 * var(--rem));
      }
      &.--2 {
        top: calc(180 * var(--rem));
        left: calc(260 * var(--rem));
      }
    }
  }
  &.--4 {
    .c-link-point {
      &.--1 {
        top: calc(260 * var(--rem));
        left: calc(410 * var(--rem));
      }
      &.--2 {
        top: calc(430 * var(--rem));
        left: calc(480 * var(--rem));
      }
    }
  }
}

/* ===================
  .p-section
=================== */
.p-section {
  position: relative;
  padding-block: calc(172 * var(--rem)) calc(180 * var(--rem));
  &:has(+ .p-look-section) {
    padding-bottom: calc((177 + 80) * var(--rem));
  }
}
.p-euphoric-glow-blush-section {
  padding-bottom: calc(177 * var(--rem));
}
.p-melting-color-balm-section {
  padding-bottom: calc(177 * var(--rem));
}
.p-section__heading {
  color: var(--color-accent);
  font-family: var(--font-cormorant);
  font-size: calc(80 * var(--rem));
  font-weight: 500;
  line-height: calc(96 / 80);
  letter-spacing: .015em;
  text-align: center;
}
.p-section__lead {
  font-family: var(--font-mincho);
  font-size: calc(34 * var(--rem));
  font-weight: 500;
  line-height: calc(74.8 / 34);
  letter-spacing: .075em;
  text-align: center;
  .p-section__heading + & {
    margin-top: calc(42 * var(--rem));
  }
}


/* ===================
  .p-item
=================== */
.p-item-block {
  padding-block: calc(100 * var(--rem)) calc(136 * var(--rem));
  &:has(.c-stamp) {
    padding-top: calc(123 * var(--rem));
  }
  &.--2 {
    padding-top: calc(85 * var(--rem));
  }
  .p-melting-color-balm-section & {
    padding-top: calc(83 * var(--rem));
  }
  .p-pure-lip-shaper-n-section & {
    padding-top: calc(84 * var(--rem));
  }
  & + & {
    padding-top: calc(180 * var(--rem));
    border-top: 1px dotted var(--color-accent);
  }
  &:last-of-type {
    padding-bottom: 0;
  }
}
.p-item__overview {
  padding-bottom: calc(140 * var(--rem));
  .p-item-block.--2 & {
    padding-bottom: calc(120 * var(--rem));
  }
  &:has(.p-item__overview-detail__note) {
    padding-bottom: calc(130 * var(--rem));
  }
}
.p-item__image-container {
  position: relative;
  .c-stamp {
    position: absolute;
    top: calc(-106 * var(--rem));
    left: calc(30 * var(--rem));
  }
  .c-viewdetails {
    position: absolute;
    bottom: calc(175 * var(--rem));
    right: calc(30 * var(--rem));
    &[data-target="modal_2"] {
      bottom: calc(194 * var(--rem));
      right: calc(80 * var(--rem));
    }
  }
}
.p-item__image {
  margin-inline: auto;
  width: var(--item-width, calc(600 * var(--rem)));
  &.--2 {
    --item-width: calc(400 * var(--rem));
  }
  &.--3 {
    --item-width: calc(380 * var(--rem));
  }
}
.p-item__image-item {
  width: var(--item-width, calc(600 * var(--rem)));
  &.js-modal--trigger {
    cursor: pointer;
  }
  & img {
    width: 100%;
  }
}
.p-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(20 * var(--rem));
    height: calc(50 * 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: 0;
    &::before {
      transform: rotate(180deg);
    }
  }
  .slick-next {
    right: 0;
  }
}
.p-item__image-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--navigation-width, calc(294 * var(--rem)));
  margin-top: calc(70 * var(--rem));
  margin-inline: auto;
  &.--2 {
    --navigation-width: calc(390 * var(--rem));
    margin-top: calc(80 * var(--rem));
  }
  &.--3 {
    --navigation-width: calc(290 * var(--rem));
    margin-top: calc(80 * var(--rem));
  }
  .slick-track {
    width: fit-content !important;
    transform: translate(0) !important;
  }
}
.p-item__image-navigation__item {
  position: relative;
  width: var(--thumbnail-width, calc(70 * var(--rem)));
  margin-inline: calc(15 * var(--rem));
  padding-bottom: calc(24 * var(--rem));
  cursor: pointer;
  .--1 & {
    --thumbnail-width: calc(72 * var(--rem));
  }
  &.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%;
  }
}

/* ===================
  .p-item__overview-detail
=================== */
.p-item__overview-detail__container {
  position: relative;
  .p-item__overview-detail {
    margin-top: 0;
  }
}
.p-item__overview-detail {
  margin-top: calc(60 * var(--rem));
  &:has(.p-item__overview-detail__description) {
    margin-top: calc(65 * 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;
    }
  }
}
.p-item__overview-detail__description {
  font-family: var(--font-mincho);
  font-size: calc(32 * var(--rem));
  font-weight: 500;
  line-height: calc(64 / 32);
  letter-spacing: .075em;
  text-align: center;
}
.p-item__overview-detail__name {
  margin-top: calc(40 * var(--rem));
  color: var(--color-accent);
  font-size: calc(34 * var(--rem));
  letter-spacing: .1em;
  text-align: center;
  .p-item-block.--2 & {
    margin-top: calc(52 * var(--rem));
  }
}
.p-item__overview-detail__price {
  margin-top: calc(38 * var(--rem));
  font-size: calc(26 * var(--rem));
  line-height: 1;
  letter-spacing: .1em;
  text-align: center;
}
.p-item__overview-detail__button {
  margin-top: calc(60 * var(--rem));
}
.p-item__overview-detail__note {
  color: #828282;
  font-size: calc(20 * var(--rem));
  letter-spacing: .125em;
  text-align: center;
  .p-item__overview-detail__button + & {
    margin-top: calc(37 * var(--rem));
  }
}

/* ===================
  .p-item__detail
=================== */
.p-item__detail {
  .c-viewmore {
    margin-top: calc(78 * var(--rem));
    transition: margin-top .6s ease-in-out;
    &.is-open {
      margin-top: calc(83 * var(--rem));
    }
    .p-item-block.--2 & {
      margin-top: calc(81 * var(--rem));
    }
    .p-item-block.--2 &.is-open {
      margin-top: calc(83 * var(--rem));
    }
  }
}
.p-item__detail-body__visual {
  width: calc(520 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.p-item__detail-body__list {
  width: calc(520 * var(--rem));
  margin-inline: auto;
  text-align: justify;
  .p-item__detail-body__visual + & {
    margin-top: calc(66 * var(--rem));
  }
}
.p-item__detail-body__list-item {
  background-color: #fff;
  outline: 1px solid #fff;
  font-size: calc(24 * var(--rem));
  line-height: calc(52.8 / 24);
  letter-spacing: .125em;
  & a {
    color: var(--color-accent);
    text-decoration: underline;
    @media (any-hover: hover) {
      &:hover {
        text-decoration: none;
      }
    }
  }
}

/* ===================
  .p-pair-with-box
=================== */
.p-pair-with-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(540 * var(--rem));
  height: calc(220 * var(--rem));
  margin-inline: auto;
  border: 1px dotted var(--color-accent);
  border-top: none;
  .p-item__detail-body__list + & {
    margin-top: calc(91 * var(--rem));
  }
  .p-item-variation + & {
    margin-top: calc(73 * var(--rem));
  }
  .p-item-variation.--2 + & {
    margin-top: calc(68 * var(--rem));
  }
  .p-item-variation.--3 + & {
    margin-top: calc(70 * var(--rem));
  }
}
.p-pair-with-box__label {
  position: absolute;
  top: calc(-22 * var(--rem));
  left: 50%;
  translate: -50% 0;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(170 * var(--rem));
    height: 1px;
    border-top: 1px dotted var(--color-accent);
    translate: 0 -50%;
  }
  &::before {
    left: calc(-170 * var(--rem));
  }
  &::after {
    right: calc(-170 * var(--rem));
  }
}
.p-pair-with-box__label-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(200 * var(--rem));
  height: calc(44 * var(--rem));
  margin-inline: auto;
  border: 1px dotted currentColor;
  border-radius: calc(22 * var(--rem));
  color: var(--color-accent);
  font-size: calc(22 * var(--rem));
  line-height: 1;
  letter-spacing: .1em;
  text-align: center;
}
.p-pair-with-box__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(30 * var(--rem));
}
.p-pair-with-box__body-name {
  font-size: calc(22 * var(--rem));
  line-height: calc(39.6 / 22);
  letter-spacing: .125em;
  text-align: center;
}
.p-pair-with-box__body-image {
  width: calc(140 * var(--rem));
  .p-item-variation.--1 + .p-pair-with-box & {
    translate: calc(4 * var(--rem)) 0;
  }
  .p-item-variation.--2 + .p-pair-with-box & {
    translate: calc(11 * var(--rem)) 0;
  }
  .p-item-variation.--3 + .p-pair-with-box & {
    translate: calc(4 * var(--rem)) 0;
  }
  & img {
    width: 100%;
  }
}

/* ===================
  .p-item-variation
=================== */
.p-item-variation {
  display: flex;
  column-gap: calc(40 * var(--rem));
  width: fit-content;
  &.--1 {
    margin-left: calc(118 * var(--rem));
  }
  &.--2 {
    margin-left: calc(100 * var(--rem));
  }
  &.--3 {
    margin-left: calc(80 * var(--rem));
  }
}
.p-item-variation__image {
  width: var(--variation-thumb-width);
  .p-item-variation.--1 & {
    --variation-thumb-width: calc(200 * var(--rem));
  }
  .p-item-variation.--2 & {
    --variation-thumb-width: calc(220 * var(--rem));
  }
  .p-item-variation.--3 & {
    --variation-thumb-width: calc(240 * var(--rem));
  }
  & img {
    width: 100%;
  }
}
.p-item-variation__detail {
  padding-top: var(--item-variation-detail-pt, calc(11 * var(--rem)));
  .--1 & {
    --item-variation-detail-pt: calc(31 * var(--rem));
  }
}
.p-item-variation__detail-name {
  font-size: calc(28 * var(--rem));
  letter-spacing: .1em;
}
.p-item-variation__detail-text {
  margin-top: calc(16 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: calc(44 / 24);
  letter-spacing: .125em;
  text-align: justify;
  .--2 & {
    width: calc(320 * var(--rem));
  }
  .--3 & {
    width: calc(360 * var(--rem));
  }
}


/* ===================
  .p-variations__item
=================== */
.p-variations__item {
  & + & {
    margin-top: calc(90 * var(--rem));
  }
}


/* ===================
  .p-look-section
=================== */
.p-look-section {
  position: relative;
  padding-bottom: calc(140 * var(--rem));
  background-color: #fff;
  &::after {
    position: absolute;
    z-index: 0;
    content: '';
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(280 * var(--rem));
    background: #fff;
    transform: translate3d(0,0,0);
  }
}
.p-look-section--3 {
  padding-bottom: calc(181 * var(--rem));
}
.p-look-section__image {
  position: relative;
}
.p-look-section__number {
  position: absolute;
  z-index: 10;
  width: calc(160 * var(--rem));
  height: calc(140 * var(--rem));
  &.--1 {
    top: calc(-80 * var(--rem));
    right: calc(10 * var(--rem));
  }
  &.--2 {
    top: calc(30 * var(--rem));
    left: calc(30 * var(--rem));
  }
  &.--3 {
    top: calc(880 * var(--rem));
    left: calc(20 * var(--rem));
  }
  & img {
    width: 100%;
  }
}


/* ===================
  .p-look-slider
=================== */
.p-look-slider {
  width: 100%;
  &.slick-dotted {
    margin-bottom: calc(58 * var(--rem));
  }
}
.p-look-slider__item {
  width: 100%;
  & img {
    width: 100%;
  }
}
.p-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));
  }
}
.p-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(50 * var(--rem));
      height: calc(4 * var(--rem));
      padding: 0;
      background: #efbac8;
      &::before {
        content: none;
      }
      .slick-active & {
        background: var(--color-accent);
      }
    }
  }
}


/* ===================
  .p-look-item-list
=================== */
.p-look-item-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: calc(640 * var(--rem));
  margin-inline: auto;
  border: 1px solid #d97181;
  .p-look-section__image + & {
    margin-top: calc(97 * var(--rem));
  }
}
.p-look-item-list__item {
  padding-block: calc(29 * var(--rem)) calc(22 * var(--rem));
  &:nth-child(even) {
    border-left: 1px dotted var(--color-accent);
  }
  &:not(:first-child, :nth-child(2)) {
    border-top: 1px dotted var(--color-accent);
  }
}
.p-look-item-list__item-image {
  width: calc(180 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.p-look-item-list__item-name {
  margin-top: calc(9 * var(--rem));
  font-size: calc(22 * var(--rem));
  line-height: calc(44 / 22);
  letter-spacing: .125em;
  text-align: center;
}

.p-look-item-detail {
  margin-top: calc(64 * var(--rem));
  background: #fff;
  /* .c-viewmore {
    margin-top: calc(82 * var(--rem));
    &.is-open {
      margin-top: calc(71 * var(--rem));
    }
  } */
}
.p-look-item-detail__viewmore {
  position: relative;
  z-index: 2;
  padding-top: calc(82 * var(--rem));
  background: #fff;
  transition: padding-top 0.6s ease-in-out;
  &:has(.is-open) {
    padding-top: calc(71 * var(--rem));
  }
}


/* ===================
  .p-look-item-flow
=================== */
.p-look-item-flow {
  position: relative;
  z-index: 2;
  background: #fff;
  /* + .c-viewmore {
    margin-top: calc(82 * var(--rem));
    &.is-open {
      margin-top: calc(71 * var(--rem));
    }
  } */
}
.p-look-item-flow__list {
  width: calc(564 * var(--rem));
}


/* ===================
  .p-campaign-section
=================== */
.p-campaign-section {
  position: relative;
  transform: translate3d(0,0,0);
}
.p-campaign-section__container {
  position: relative;
  z-index: 2;
  padding-block: calc(180 * var(--rem));
  background: url(../img/1210/bg_2.jpg) repeat-y top center / contain;
}
.p-campaign-section__head {
  margin-bottom: calc(55 * var(--rem));
  color: var(--color-accent);
  text-align: center;
}
.p-campaign-section__label {
  font-size: calc(34 * var(--rem));
  line-height: 1;
  letter-spacing: .1em;
  &::before,
  &::after {
    content: "";
    display: inline-block;
    width: calc(7 * var(--rem));
    height: calc(7 * var(--rem));
    background-color: currentColor;
    vertical-align: middle;
    rotate: 45deg;
    translate: 0 -50%;
  }
  &::before {
    margin-right: calc(15 * var(--rem));
  }
  &::after {
    margin-left: calc(15 * var(--rem));
  }
}
.p-campaign-section__heading {
  font-family: var(--font-cormorant);
  font-size: calc(70 * var(--rem));
  font-weight: 300;
  line-height: 1;
  letter-spacing: .015em;
  text-align: center;
  .p-campaign-section__label + & {
    margin-top: calc(40 * var(--rem));
  }
}
.p-campaign-section__body {
  font-size: calc(28 * var(--rem));
  line-height: calc(61.6 / 28);
  letter-spacing: .125em;
  text-align: center;
}
.p-campaign-section__image {
  width: calc(440 * var(--rem));
  margin-top: calc(47 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.p-campaign-section__body-note {
  color: #828282;
  font-size: calc(20 * var(--rem));
  line-height: calc(44 / 20);
  text-align: center;
  & + & {
    margin-top: calc(47 * var(--rem));
  }
}


/* ===================
  p-footer-nav
=================== */
.p-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;
  }
  /* .l-row__main & {
    position: sticky;
  } */
}
.p-footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
}
.p-footer-nav__item {
  &:not(.--fill) {
    width: 50%;
  }
  &.--fill {
    width: 100%;
  }
  &:nth-child(even) {
    border-left: 1px dotted var(--color-accent);
  }
  &:not(:first-child, :nth-child(2)) {
    border-top: 1px dotted var(--color-accent);
  }
}
.p-footer-nav__item-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(15 * var(--rem));
  height: calc(100 * var(--rem));
  padding-left: calc(40 * var(--rem));
  background: #fff;
  font-size: calc(22 * var(--rem));
  line-height: calc(26.4 / 22);
  letter-spacing: 0.1em;
  text-align: center;
  .--fill & {
    justify-content: center;
    height: calc(86 * var(--rem));
    padding-left: 0;
    font-size: calc(26 * var(--rem));
  }
}
.p-footer-nav__item-image {
  width: calc(60 * var(--rem));
  height: calc(60 * var(--rem));
  & img {
    width: 100%;
  }
}
.p-footer-nav__item-label {
  width: calc(236 * var(--rem));
  text-align: center;
}


/* ===================
  .p-logo-box
=================== */
.p-logo-box__main {
  width: calc(235 * var(--rem-pc));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.p-logo-box__text {
  margin-top: calc(10 * var(--rem-pc));
  font-size: calc(15 * var(--rem-pc));
  line-height: 1;
  letter-spacing: .1em;
  text-align: center;
}


/* ===================
  .p-current-nav
=================== */
.p-current-nav__list {
  width: calc(280 * var(--rem-pc));
}
.p-current-nav__item {
  & + & {
    margin-top: calc(20 * var(--rem-pc));
  }
  &.--fill {
    margin-top: calc(40 * var(--rem-pc));
    border-top: 1px dotted var(--color-accent);
    border-bottom: 1px dotted var(--color-accent);
  }
}
.p-current-nav__item-body {
  display: flex;
  align-items: center;
  column-gap: calc(12 * var(--rem-pc));
  :not(.--fill) & {
    width: calc(230 * var(--rem-pc));
    margin-inline: auto;
  }
  .--fill & {
    justify-content: center;
    height: calc(44 * var(--rem-pc));
  }
}
.p-current-nav__item-image {
  width: calc(40 * var(--rem-pc));
  & img {
    width: 100%;
  }
}
.p-current-nav__item-label {
  font-size: calc(13 * var(--rem-pc));
  line-height: 1;
  letter-spacing: .1em;
  .--fill & {
    font-size: calc(14 * var(--rem-pc));
  }
  .is-current & {
    color: var(--color-accent);
  }
}


/*=======================================
               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(200 * var(--rem)) !important;
  }
}