@charset "UTF-8";

/*//////////////////////////////////////////////////

Title : CICA NATURAL CSS

//////////////////////////////////////////////////*/


/*  Var
======================================================= */

:root {
  --pw: 1400; /* PC幅 */
  --sw: 750; /* SP幅 */
  --artboard-pw: 455; /* PCアートボード幅 */
  --artboard-sw: 750; /* SPアートボード幅 */
  --rem: calc(var(--variable) * var(--ratio));

  --lp-font-ja: 'Noto Sans JP',"ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --base-font-color: #000;
  --lp-background-color: #fff;
  --icon-arrow: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2021.95%2050.38%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m1.55%2050.38-1.55-1.26%2019.38-23.93-19.38-23.93%201.55-1.26%2020.4%2025.19z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
}

@media (768px <= width) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}
/* @media (768px <= width < 1400px) {
  :root {
    --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 {
  font-size: 62.5%
}
main {
  max-width: 100%;
}

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


/* ===================
  LP Contents
=================== */
.lp_contents {
  background: var(--lp-background-color, transparent);
  font-family: var(--lp-font-ja);
  color: var(--base-font-color, #000);
  font-size: calc(24 * var(--rem));
  font-style: normal;
  letter-spacing: .078em;
  & * {
    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-weight: inherit;
    line-height: inherit;
  }
  & ul,
  & li {
    list-style: none;
  }
  & :where(img) {
    display: block;
    max-width: 100%;
  }
  & 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)); */
  }
  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
  }
}


/* ===================
  Utility
=================== */
@media (768px <= width) {
  .u-inner {
    width: calc(50vw * .7);
    margin-inline: auto;
  }
}

.u-font__europa {
  font-family: "europa", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.u-font__garamond {
  font-family: "adobe-garamond-pro", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .07em;
}
.u-font__mincho {
  font-family: "source-han-serif-japanese", serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .07em;
}

.u-ml-2 {
  margin-left: calc(2 * var(--rem));
}
.u-ml-4 {
  margin-left: calc(4 * var(--rem));
}


/* ===================
  Component
=================== */
.c-section-heading {
  font-size: calc(42 * var(--rem));
  line-height: calc(84 / 42);
  text-align: center;
}

.c-section-lead {
  font-size: calc(28 * var(--rem));
  line-height: calc(49 / 28);
  letter-spacing: .07em;
  text-align: center;
  .c-section-heading + & {
    margin-top: calc(24 * var(--rem));
  }
  .--large {
    font-size: calc(42 * var(--rem));
    line-height: calc(62 / 42);
  }
}

.c-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(140 * var(--rem));
  padding-bottom: calc(2 * var(--rem));
  padding-left: calc(2 * var(--rem));
  background: #fff;
  border: calc(2 * var(--rem)) solid #000;
  font-size: calc(28 * var(--rem));
  letter-spacing: .07em;
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(18 * var(--rem));
    width: calc(16 * var(--rem));
    height: calc(36 * var(--rem));
    background: #000;
    mask: var(--icon-arrow) no-repeat center / contain;
    translate: 0 -50%;
  }
}

/* .c-viewmore {
  position: relative;
  display: block;
  margin-inline: auto;
  border-bottom: calc(2 * var(--rem)) solid currentColor;
  color: var(--color-orange);
  font-size: calc(26 * var(--rem));
  letter-spacing: .1em;
  cursor: pointer;
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(4 * 50rem / 750);
    width: calc(14 * 50rem / 750);
    height: calc(2 * 50rem / 750);
    background: currentColor;
  }
  &::after {
    rotate: 90deg;
  }
  &.is-open {
    &::after {
      rotate: 0deg;
    }
  }
} */
.c-viewdetails {
  font-family: "europa", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(24 * var(--rem));
  letter-spacing: .07em;
  &::after {
    content: "";
    display: inline-block;
    width: calc(34 * var(--rem));
    height: calc(34 * var(--rem));
    margin-top: calc(-10 * var(--rem));
    margin-left: calc(28 * var(--rem));
    background: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2034%2034%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%2217%22%20fill%3D%22currentColor%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22m6%2016h22v2h-22z%22%2F%3E%3Cpath%20d%3D%22m16%206h2v22h-2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center / contain;
    vertical-align: middle;
  }
}


/* ===================
  Layout
=================== */
.l-row__fix {
  position: relative;
}
@media (768px <= width) {
  .l-row {
    display: flex;
  }
  .l-row__fix {
    width: 50%;
  }
  .l-row__sticky {
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
  }
  .l-row__main {
    width: 50%;
  }
}


/* ===================
  Main visual
=================== */
.p-mainvisual {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: clip;
  & img {
    display: block;
  }
}
.p-mainvisual__image {
  width: 100%;
  height: 100%;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.p-mainvisual__text {
  position: absolute;
  top: calc(28 * var(--rem));
  left: calc(32 * var(--rem));
  width: calc(311 * var(--rem));
  & img {
    width: 100%;
  }
}
.js-mainvisual-slider {
  .slick-list,
  .slick-track {
    height: 100%;
  }
}
.add-anime {
  animation: zoom-anime 2s ease-in-out 0s normal both;
}

@keyframes zoom-anime {
  0% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}


/* ===================
  .p-section-lead
=================== */
.p-section-lead {
  padding-block: calc(145 * var(--rem)) calc(148 * var(--rem));
  font-size: calc(34 * var(--rem));
  line-height: calc(59.5 / 34);
  text-align: center;
}


/* ===================
  .p-tab-list
=================== */
.p-tab-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: solid currentColor;
  border-width: calc(2 * var(--rem)) 0;
}
.p-tab-list__item {
  & + & {
    border-left: calc(2 * var(--rem)) solid currentColor;
  }
}
.p-tab-list__item-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(35 * var(--rem));
  width: 100%;
  height: calc(190 * var(--rem));
  padding-top: calc(4 * var(--rem));
  border-bottom: calc(6 * var(--rem)) solid transparent;
  font-family: var(--lp-font-ja);
  &.is-active {
    border-bottom-color: currentColor;
  }
  &:not(.is-active) {
    color: #757575;
  }
}
.p-tab-list__item-main {
  font-size: calc(42 * var(--rem));
}
.p-tab-list__item-sub {
  font-size: calc(28 * var(--rem));
  letter-spacing: .069em;
}


/* ===================
  Tab
=================== */
.js-tab__container {
  padding-top: calc(100 * var(--rem));
}
.js-tab__content {
  transition: opacity .3s;
  &:not(.is-active) {
    height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
  &.is-active {
    height: auto;
    opacity: 1;
    pointer-events: auto;
  }
}


/* ===================
  .p-section-check
=================== */
.p-section-check {
  display: flex;
  justify-content: space-between;
  padding-inline: calc(30 * var(--rem)) calc(25 * var(--rem));
  .p-checklist {
    flex-grow: 1;
  }
}
.p-section-check__label {
  position: relative;
  width: 1.75em;
  &::after {
    position: absolute;
    left: 50%;
    bottom: 0;
    content: "";
    display: block;
    width: 1px;
    height: calc(100% - 4ch - 2.35em);
    background: currentColor;
    translate: -50% 0;
  }
  &.--secondary {
    &::after {
      height: calc(100% - 6ch - 5em);
    }
  }
}
.p-section-check__label-text {
  width: fit-content;
  margin-top: -1.1em;
  margin-left: calc(4 * var(--rem));
  font-size: calc(34 * var(--rem));
  rotate: 90deg;
  transform-origin: bottom left;
}


/* ===================
  .p-checklist
=================== */
.p-checklist {
  padding: calc(56 * var(--rem)) 0 calc(61 * var(--rem)) calc(70 * var(--rem));
  background: var(--bg-checklist, #fafafa);
  &.--secondary {
    --bg-checklist: #fcf8f5;
    --check-color: #ba7d5c;
  }
}
.p-checklist__item {
  display: flex;
  align-items: center;
  gap: calc(38 * var(--rem));
  font-size: calc(28 * var(--rem));
  line-height: calc(56 / 28);
  & + & {
    margin-top: calc(18 * var(--rem));
  }
  .--icon {
    position: relative;
    width: calc(38 * var(--rem));
    height: calc(32 * var(--rem));
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: calc(32 * var(--rem));
      height: calc(38 * var(--rem));
      background-color: var(--check-frame-color, #757575);
      mask: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2034%2034%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m34%2034h-34v-34h29v2h-27v30h30v-13h2z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
    }
    &::after {
      content: "";
      position: absolute;
      top: calc(5 * var(--rem));
      right: 0;
      width: calc(31 * var(--rem));
      height: calc(23 * var(--rem));
      background-color: var(--check-color, #000);
      mask: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2030.99%2023.2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m9.97%2023.2-9.97-8.91%201.33-1.49%208.54%207.63%2019.68-20.43%201.44%201.39z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
    }
  }
}


/* ===================
  .p-section-featured
=================== */
.p-section-featured {
  padding-top: calc(141 * var(--rem));
  &.--secondary {
    padding-top: calc(142 * var(--rem));
    padding-bottom: calc(156 * var(--rem));
  }
}
.p-section-featured__head {
  margin-bottom: calc(91 * var(--rem));
}
.p-section-featured__body-foot {
  margin-top: calc(59 * var(--rem));
  text-align: center;
}


/* ===================
  .p-benefit
=================== */
.p-benefit {
  padding-block: calc(98 * var(--rem)) calc(92 * var(--rem));
  padding-left: calc(30 * var(--rem));
  background: url('../img/bg_benefit_1.jpg') no-repeat top center / cover;
}
.p-benefit__box {
  & + & {
    margin-top: calc(51 * var(--rem));
  }
}
.p-benefit__box-label {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rem));
  margin-bottom: calc(19 * var(--rem));
  font-size: calc(28 * var(--rem));
  letter-spacing: .06em;
  &.--secondary-color {
    color: #ba7d5c;
  }
  .--border {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--rem));
    margin-bottom: calc(4 * var(--rem));
    .--3 &,
    .--4 & {
      margin-bottom: calc(6 * var(--rem));
    }
    &::before {
      content: "";
      width: calc(237 * var(--rem));
      height: calc(2 * var(--rem));
      background: currentColor;
    }
    &::after {
      content: "";
      display: block;
      width: calc(14 * var(--rem));
      height: calc(14 * var(--rem));
      background: currentColor;
      border-radius: 50%;
    }
    .--1 &::before {
      width: calc(395 * var(--rem));
    }
    .--2 &::before {
      width: calc(307 * var(--rem));
    }
    .p-benefit--normal & {
      flex-grow: 1;
      &::before {
        width: 100%;
      }
      &::after {
        content: none;
      }
    }
  }
}
.p-benefit__box-body {
  padding-left: calc(20 * var(--rem));
  .--1 &,
  .--4 & {
    width: calc(533 * var(--rem));
  }
  .--2 &,
  .--3 & {
    width: calc(405 * var(--rem));
  }
}
.p-benefit__box-body__title {
  margin-bottom: calc(35 * var(--rem));
  font-size: calc(42 * var(--rem));
  .--2 &,
  .--4 & {
    margin-bottom: calc(33 * var(--rem));
  }
  .--3 & {
    margin-bottom: calc(34 * var(--rem));
  }
  .--3_2 & {
    margin-bottom: calc(32 * var(--rem));
  }
  .--3_3 &,
  .--3_4 & {
    margin-bottom: calc(34 * var(--rem));
  }
}
.p-benefit__box-body__text {
  margin-left: calc(4 * var(--rem));
  font-size: calc(22 * var(--rem));
  line-height: calc(38.5 / 22);
  letter-spacing: .07em;
  text-align: justify;
  .p-benefit--normal & {
    margin-left: 0;
  }
}
.p-benefit__box-body__note {
  margin-top: calc(26 * var(--rem));
  color: #757575;
  font-size: calc(20 * var(--rem));
  line-height: calc(35 / 20);
  letter-spacing: .07em;
}

.p-benefit--secondary {
  padding-top: calc(175 * var(--rem));
  padding-right: calc(30 * var(--rem));
  background: url('../img/bg_benefit_2.jpg') no-repeat center / 100%;
  aspect-ratio: 1;
  text-align: right;
  .p-benefit__box {
    & + :where(&) {
      margin-top: calc(37 * var(--rem));
    }
    &.--2_3 {
      margin-top: calc(38 * var(--rem));
    }
    &.--2_4 {
      margin-top: calc(39 * var(--rem));
    }
  }
  .p-benefit__box-label {
    display: inline-block;
    margin-bottom: calc(16 * var(--rem));
    border-bottom: calc(2 * var(--rem)) solid currentColor;
    color: #ba7d5c;
    line-height: calc(38 / 28);
  }
  .p-benefit__box-body {
    padding-inline: 0 calc(27 * var(--rem));
  }
  .p-benefit__box-body__title {
    margin-bottom: 0;
    font-size: calc(34 * var(--rem));
  }
}


/* ===================
  .p-section-modal
=================== */
.p-section-modal {
  display: flex;
  width: calc(690 * var(--rem));
  margin-top: calc(100 * var(--rem));
  margin-inline: auto;
  background: #fff;
  border: calc(2 * var(--rem)) solid #757575;
}
.p-section-modal__image {
  flex-shrink: 0;
  width: calc(330 * var(--rem));
  height: calc(476 * var(--rem));
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.p-section-modal__body {
  padding: calc(48 * var(--rem)) 0 0 calc(30 * var(--rem));
}
.p-section-modal__body-sub {
  margin-bottom: calc(18 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: calc(42 / 24);
  letter-spacing: .07em;
}
.p-section-modal__body-main {
  font-size: calc(34 * var(--rem));
  line-height: calc(59.5 / 34);
}
.p-section-modal__body-button {
  margin-top: calc(50 * var(--rem));
}

.p-section-modal--secondary {
  padding-block: calc(90 * var(--rem)) calc(94 * var(--rem));
  background: #fafafa;
  text-align: center;
  .p-section-modal__body {
    padding: 0;
  }
  .p-section-modal__body-sub {
    margin-bottom: calc(14 * var(--rem));
    letter-spacing: .07em;
  }
  .p-section-modal__body-main {
    font-size: calc(42 * var(--rem));
    letter-spacing: .07em;
  }
  .p-section-modal__body-button {
    margin-top: calc(47 * var(--rem));
  }
}


/* ===================
  p-video
=================== */
.p-video {
  position: relative;
  width: calc(480 * var(--rem));
  aspect-ratio: 480 / 853;
  margin-top: calc(136 * var(--rem));
  margin-inline: auto;
}
.c-sound-button {
  position: absolute;
  bottom: calc(20 * var(--rem));
  right: calc(20 * var(--rem));
  width: calc(30 * var(--rem));
  height: calc(27.5 * var(--rem));
  &:not(.is-mute) {
    .--off {
      display: none;
    }
  }
  &.is-mute {
    .--on {
      display: none;
    }
  }
}
.c-sound-button__icon {
  position: absolute;
  inset: 0;
}


/* ===================
  Modal
=================== */
body.is-modal-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}
.p-modal {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  pointer-events: none;
  &.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
.p-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.p-modal__content {
  position: relative;
  width: calc(690 / 750 * 100%);
  max-width: calc(690 * var(--rem));
  max-height: 90vh;
  background-color: #fff;
  z-index: 1001;
  transform: scale(0.95);
  transition: transform 0.3s ease-out;
  .p-modal.is-open & {
    transform: scale(1);
  }
  .simplebar-wrapper {
    max-height: 90vh;
  }
}
.p-modal__close-button {
  position: sticky;
  top: calc(30 * var(--rem));
  left: calc(100% - (80 * var(--rem)));
  width: calc(50 * var(--rem));
  height: calc(50 * var(--rem));
  background: #000;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(32 * var(--rem));
    height: calc(2 * var(--rem));
    background-color: #fff;
  }
  &::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}
.p-modal-content {
  margin-top: calc(-60 * var(--rem));
  padding: calc(100 * var(--rem)) calc(40 * var(--rem));
}
.p-modal-content__sub {
  font-size: calc(24 * var(--rem));
  line-height: calc(42 / 24);
}
.p-modal-content__main {
  margin-top: calc(14 * var(--rem));
  font-size: calc(42 * var(--rem));
  line-height: calc(73.5 / 42);
}
.p-modal-content__note {
  color: #757575;
  font-size: calc(20 * var(--rem));
  line-height: calc(35 / 20);
}


/* ===================
  .p-modal-skin-care
=================== */
.p-modal-skin-care {
  padding: calc(91 * var(--rem)) calc(40 * var(--rem)) calc(95 * var(--rem));
  background: url('../img/bg_modal_1.jpg') no-repeat top center / cover;
  .p-modal-content__body {
    text-align: center;
  }
  .p-modal-content__text {
    margin-top: calc(36 * var(--rem));
    font-size: calc(22 * var(--rem));
    line-height: calc(38.5 / 22);
    letter-spacing: .07em;
  }
  .p-modal-content__note {
    margin-top: calc(463 * var(--rem));
    letter-spacing: .07em;
    text-align: justify;
  }
}


/* ===================
  .p-modal-base-make
=================== */
.p-modal-base-make {
  padding: calc(93 * var(--rem)) calc(40 * var(--rem)) calc(95 * var(--rem));
  background: url('../img/bg_modal_2.jpg') no-repeat top center / cover;
  text-align: center;
  .p-modal-content__main {
    margin-top: calc(15 * var(--rem));
  }
  .p-modal-content__note {
    margin-top: calc(52 * var(--rem));
  }
}
.p-modal-content__list {
  --gap: calc(14 * var(--rem));
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-top: calc(44 * var(--rem));
}
.p-modal-content__list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(124 * var(--rem));
  background: rgba(255, 255, 255, .2);
  font-size: calc(22 * var(--rem));
  line-height: calc(38.5 / 22);
  letter-spacing: .07em;
  &:where(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) {
    width: calc((100% - var(--gap)) / 2);
  }
  &:not(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) {
    width: calc((100% - (var(--gap) * 2)) / 3);
    padding-top: calc(4 * var(--rem));
  }
}


/* ===================
  .p-modal-base-make-benefit
=================== */
.p-modal-base-make-benefit__image {
  margin-bottom: calc(72 * var(--rem));
  & img {
    width: 100%;
  }
}


/* ===================
  .p-section-step
=================== */
.p-section-step {
  padding-top: calc(158 * var(--rem));
}
.p-section-step__head {
  margin-bottom: calc(111 * var(--rem));
  text-align: center;
}
.p-section-step__heading-sub {
  display: block;
  margin-bottom: calc(4 * var(--rem));
  font-size: calc(34 * var(--rem));
  letter-spacing: .07em;
}
.p-section-step__heading-main {
  display: block;
  font-size: calc(80 * var(--rem));
  line-height: normal;
  letter-spacing: .06em;
  .--wrapper {
    padding-inline: .25em;
    background-image: linear-gradient(to bottom, #fff, #cfd9e5);
    background-repeat: no-repeat;
    background-size: 100% calc(46 * var(--rem));
    background-position: 0 100%;
  }
  .--small {
    position: relative;
    top: calc(-8 * var(--rem));
    font-size: calc(58 * var(--rem));
  }
}
.p-section-step__lead {
  margin-top: calc(54 * var(--rem));
  font-size: calc(28 * var(--rem));
  letter-spacing: .07em;
}
.p-section-step__head-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(15 * var(--rem));
  margin-top: calc(41 * var(--rem));
  margin-inline: calc(30 * var(--rem));
}
.p-section-step__head-list__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(80 * var(--rem));
  background: #fcf8f5;
  font-size: calc(22 * var(--rem));
  text-align: center;
}
.p-section-step--secondary {
  padding-top: calc(144 * var(--rem));
  .p-section-step__head {
    margin-bottom: calc(101 * var(--rem));
  }
  .c-section-heading {
    line-height: calc(73.5 / 42);
  }
}


/* ===================
  .p-step
=================== */
.p-step {
  padding-right: calc(30 * var(--rem));
  overflow-x: clip;
}
.p-step__item {
  position: relative;
  display: flex;
  & + & {
    margin-top: calc(14 * var(--rem));
  }
  &::before {
    content: "";
    position: absolute;
    background: no-repeat center / contain;
    pointer-events: none;
  }
  &.--1_1 {
    z-index: 5;
    &::before {
      top: calc(-15 * var(--rem));
      right: calc(-10 * var(--rem));
      width: calc(290 * var(--rem));
      height: calc(232 * var(--rem));
      background-image: url('../img/deco_1_1.png');
    }
  }
  &.--1_2 {
    &::before {
      top: calc(-84 * var(--rem));
      left: calc(-90 * var(--rem));
      width: calc(480 * var(--rem));
      height: calc(480 * var(--rem));
      background-image: url('../img/deco_1_2.png');
    }
  }
  &.--1_3 {
    margin-top: calc(16 * var(--rem));
    &::before {
      top: calc(-201 * var(--rem));
      right: calc(-160 * var(--rem));
      width: calc(420 * var(--rem));
      height: calc(420 * var(--rem));
      background-image: url('../img/deco_1_3.png');
    }
  }
  &.--2_1 {
    z-index: 5;
    &::before {
      top: calc(-67 * var(--rem));
      left: calc(30 * var(--rem));
      width: calc(450 * var(--rem));
      height: calc(350 * var(--rem));
      background-image: url('../img/deco_2_1.png');
    }
  }
  &.--2_2 {
    margin-top: calc(21 * var(--rem));
    &::before {
      top: calc(-65 * var(--rem));
      left: calc(30 * var(--rem));
      width: calc(450 * var(--rem));
      height: calc(352 * var(--rem));
      background-image: url('../img/deco_2_2.png');
    }
  }
}
.p-step__item-image {
  position: relative;
  flex-shrink: 0;
  width: calc(290 * var(--rem));
  margin-top: calc(-14 * var(--rem));
  .--secondary & {
    margin-top: calc(127 * var(--rem));
  }
  & img {
    width: 100%;
  }
}
.p-step__item-body {
  --dot-pos: 2em;
  --dot-size: calc(14 * var(--rem));
  position: relative;
  padding-left: calc(50 * var(--rem));
  &::before {
    content: "";
    position: absolute;
    top: var(--dot-pos);
    left: calc(-9 * var(--rem));
    width: var(--dot-size);
    height: var(--dot-size);
    background: #000;
    border-radius: 50%;
  }
  &::after {
    content: "";
    position: absolute;
    top: calc(var(--dot-pos) + (14 * var(--rem)) + (8 * var(--rem)));
    left: calc(var(--dot-size) / 2 - (9 * var(--rem)));
    width: calc(2 * var(--rem));
    height: calc(100% - var(--dot-size));
    background: #000;
    translate: -50% 0;
  }
  .p-step__item:last-child &::after {
    height: calc(100% - (var(--dot-pos) + (14 * var(--rem)) + (8 * var(--rem))));
  }
  .--secondary & {
    &::before,
    &::after {
      background: #ba7d5c;
    }
    .p-step__item:last-child &::after {
      height: calc(100% - (var(--dot-pos) + (14 * var(--rem)) + (30 * var(--rem))));
    }
  }
}
.p-step__item-body__head {
  margin-bottom: calc(31 * var(--rem));
  font-size: calc(40 * var(--rem));
  .--secondary & {
    margin-bottom: calc(39 * var(--rem));
    color: #ba7d5c;
  }
  .--num {
    font-size: calc(120 * var(--rem));
  }
}
.p-step__item-body__head-name {
  margin-top: calc(8 * var(--rem));
  color: #000;
  font-size: calc(22 * var(--rem));
  line-height: calc(48 / 22);
  letter-spacing: .07em;
}
.p-step__item-body__content {
  padding-bottom: calc(92 * var(--rem));
}
.p-step__item-body__content-sub {
  margin-bottom: calc(13 * var(--rem));
  font-size: calc(28 * var(--rem));
  line-height: calc(49 / 28);
  .--secondary & {
    margin-bottom: calc(12 * var(--rem));
  }
}
.p-step__item-body__content-main {
  font-size: calc(42 * var(--rem));
  line-height: calc(73.5 / 42);
  letter-spacing: .065em;
  white-space: nowrap;
}
.p-step__item-body__content-text {
  margin-top: calc(35 * var(--rem));
  font-size: calc(22 * var(--rem));
  line-height: calc(38.5 / 22);
  letter-spacing: .065em;
  text-align: justify;
  .--secondary & {
    margin-top: calc(33 * var(--rem));
  }
}
.p-step__item-body__content-badge {
  display: flex;
  gap: calc(30 * var(--rem));
  margin-top: calc(13 * var(--rem));
}
.p-step__item-body__content-badge__item {
  width: calc(110 * var(--rem));
  & img {
    width: 100%;
  }
}

.p-step--secondary {
  padding-bottom: calc(160 * var(--rem));
  padding-left: calc(21 * var(--rem));
  .p-step__item {
    gap: calc(40 * var(--rem));
    & + & {
      margin-top: calc(23 * var(--rem));
    }
  }
  .p-step__item-body {
    padding-left: calc(60 * var(--rem));
    &::before,
    &::after {
      background: #ba7d5c;
    }
    &::before {
      left: calc(2 * var(--rem));
    }
    &::after {
      left: calc(var(--dot-size) / 2 - (-2 * var(--rem)));
    }
  }
  .p-step__item-body__head {
    position: relative;
    margin-bottom: calc(63 * var(--rem));
    color: #ba7d5c;
    .--name {
      position: absolute;
      bottom: calc(2 * var(--rem));
      left: auto;
      margin-left: calc(31 * var(--rem));
      font-family: var(--lp-font-ja);
      color: #000;
      font-size: calc(24 * var(--rem));
      letter-spacing: .07em;
      white-space: nowrap;
    }
  }
  .p-step__item-body__content-sub {
    margin-bottom: calc(13 * var(--rem));
  }
  .p-step__item-image {
    width: calc(250 * var(--rem));
  }
}


/* ===================
  .p-section-shared-features
=================== */
.p-section-shared-features {
  padding-block: calc(141 * var(--rem)) calc(160 * var(--rem));
}
.p-section-shared-features__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 * var(--rem));
  margin-top: calc(36 * var(--rem));
}
.p-section-shared-features__list-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(220 * var(--rem));
  aspect-ratio: 1;
  padding-bottom: calc(12 * var(--rem));
  background: #fcf8f5;
  border-radius: 50%;
  font-size: calc(22 * var(--rem));
  letter-spacing: .07em;
  text-align: center;
}


/* ===================
  .p-section-artist-comment
=================== */
.p-section-artist-comment {
  padding-block: calc(80 * var(--rem)) calc(100 * var(--rem));
  background: #fafafa;
}


/* ===================
  .p-comment-block
=================== */
.p-comment-block {
  margin-top: calc(34 * var(--rem));
}
.p-comment {
  width: calc(690 * var(--rem));
  margin-inline: auto;
  padding: calc(52 * var(--rem)) calc(60 * var(--rem)) calc(88 * var(--rem)) calc(60 * var(--rem));
  background: url("../img/bg_comment_frame.png") no-repeat top left / 100% 100%;
  line-height: calc(42 / 24);
  letter-spacing: .07em;
  text-align: justify;
}
.p-comment__body {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(31 * var(--rem));
  margin-top: calc(26 * var(--rem));
  margin-right: calc(90 * var(--rem));
}
.p-comment__body-name__sub {
  margin-block: calc(-7 * var(--rem)) calc(7 * var(--rem));
  font-size: calc(20 * var(--rem));
  letter-spacing: .071em;
}
.p-comment__body-name__main {
  font-size: calc(28 * var(--rem));
}
.p-comment__body-image {
  flex-shrink: 0;
  width: calc(100 * var(--rem));
  & img {
    width: 100%;
  }
}


/* ===================
  .p-section-campaign
=================== */
.p-section-campaign {
  padding-block: calc(144 * var(--rem)) calc(153 * var(--rem));
}
.p-section-campaign__image {
  width: calc(610 * var(--rem));
  margin-top: calc(51 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.p-section-campaign__body {
  display: flex;
  justify-content: space-between;
  margin-top: calc(50 * var(--rem));
  padding-inline: calc(30 * var(--rem));
}
.p-section-campaign__body-label {
  position: relative;
  width: 1.75em;
  &::after {
    position: absolute;
    left: 50%;
    bottom: calc(8 * var(--rem));
    content: "";
    display: block;
    width: 1px;
    height: calc(100% - 8ch - (76 * var(--rem)));
    background: currentColor;
    translate: -.125em 0;
  }
}
.p-section-campaign__body-label__text {
  width: fit-content;
  margin-top: -.75em;
  margin-left: calc(3 * var(--rem));
  font-size: calc(34 * var(--rem));
  rotate: 90deg;
  transform-origin: bottom left;
}
.p-section-campaign__body-main {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: calc(51 * var(--rem));
  width: calc(610 * var(--rem));
}
.p-section-campaign__body-main__paragraph {
  font-size: calc(24 * var(--rem));
  line-height: calc(42 / 24);
  letter-spacing: .069em;
  text-align: justify;
}
.p-section-campaign__body-main__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(65 * var(--rem));
}
.p-section-campaign__body-main__list__item {
  width: calc(160 * var(--rem));
  & img {
    width: 100%;
  }
}
.p-section-campaign__bottom {
  margin-top: calc(92 * var(--rem));
  padding-inline: calc(30 * var(--rem));
}
.p-section-campaign__bottom-image {
  width: calc(690 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.p-section-campaign__bottom-note {
  margin-top: calc(52 * var(--rem));
  color: #757575;
  font-size: calc(20 * var(--rem));
  line-height: calc(35 / 20);
  letter-spacing: .07em;
  text-align: justify;
}
.p-section-campaign--secondary {
  padding-block: calc(141 * var(--rem)) calc(153 * var(--rem));
}


/* ===================
  .p-section-review
=================== */
.p-section-review {
  padding-block: calc(79 * var(--rem)) calc(100 * var(--rem));
  background: #fafafa;
  &.--secondary {
    padding-top: calc(81 * var(--rem));
  }
}


/* ===================
  .p-review
=================== */
.p-review__container {
  margin-top: calc(32 * var(--rem));
  .--secondary & {
    margin-top: calc(30 * var(--rem));
  }
}
.p-review {
  display: block;
  width: calc(630 * var(--rem));
  margin-inline: calc(15 * var(--rem));
  padding: calc(60 * var(--rem)) calc(60 * var(--rem)) calc(92 * var(--rem));
  background: #fff;
  .--secondary & {
    padding-bottom: calc(51 * var(--rem));
  }
}
.p-review__image {
  width: 100%;
  & img {
    width: 100%;
  }
}
.p-review__body {
  padding-top: calc(60 * var(--rem));
}
.p-review__body-head {
  padding-bottom: calc(36 * var(--rem));
  border-bottom: calc(2 * var(--rem)) solid #bbb;
}
.p-review__body-head__reviewer {
  display: flex;
  align-items: center;
  gap: calc(30 * var(--rem));
}
.p-review__body-head__reviewer-image {
  width: calc(100 * var(--rem));
  & img {
    width: 100%;
  }
}
.p-review__body-head__reviewer-name {
  margin-top: calc(-6 * var(--rem));
  font-size: calc(24 * var(--rem));
  letter-spacing: .07em;
}
.p-review__body-head__item {
  position: relative;
}
.p-review__body-head__item-name {
  margin-top: calc(52 * var(--rem));
  font-size: calc(20 * var(--rem));
  line-height: calc(35 / 20);
  letter-spacing: .07em;
}
.p-review__body-head__item-image {
  position: absolute;
  bottom: calc(-8 * var(--rem));
  right: 0;
  height: calc(150 * var(--rem));
  & img {
    width: auto;
    height: 100%;
  }
}
.p-review__body-comment {
  padding-top: calc(50 * var(--rem));
}
.p-review__body-comment__paragraph {
  font-size: calc(24 * var(--rem));
  line-height: calc(42 / 24);
  letter-spacing: .07em;
  text-align: justify;
  & + & {
    margin-top: 1.75em;
  }
}


/* ===================
  .slick
=================== */
.p-slick {
  .slick-track {
    display: flex;
  }
  .slick-slide {
    height: auto;
  }
  .slick-prev,
  .slick-next {
    width: calc(22 * var(--rem));
    height: calc(52 * var(--rem));
    z-index: 5;
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: #000;
      mask: var(--icon-arrow) no-repeat center / contain;
    }
  }
  .slick-prev {
    left: calc(50% - (315 * var(--rem)));
    translate: -100% 0;
    .--secondary & {
      translate: -100% 100%;
    }
    &::before {
      transform: rotate(180deg);
    }
  }
  .slick-next {
    right: calc(50% - (315 * var(--rem)));
    translate: 100% 0;
    .--secondary & {
      translate: 100% 100%;
    }
  }
}


/* ===================
  .p-section-series
=================== */
.p-section-series {
  padding-block: calc(142 * var(--rem)) calc(155 * var(--rem));
}
.p-section-series__body {
  margin-top: calc(74 * var(--rem));
}
.p-section-series--secondary {
  padding-block: calc(141 * var(--rem)) calc(153 * var(--rem));
}


/* ===================
  .p-series-list
=================== */
.p-series-list {
  display: flex;
  justify-content: center;
  gap: var(--list-gap, 0);
  &.--2 {
    gap: calc(70 * var(--rem));
  }
}
.p-series-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: calc(250 * var(--rem));
  .--2 & {
    width: calc(271 * var(--rem));
  }
}
.p-series-list__item-image {
  position: relative;
  width: 100%;
  .--2 & {
    width: calc(250 * var(--rem));
  }
  & img {
    width: 100%;
  }
}
.p-series-list__item-button {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(60 * var(--rem));
  height: calc(60 * var(--rem));
  .--1_1 & {
    top: calc(-29 * var(--rem));
    right: calc(10 * var(--rem));
  }
  .--1_2 & {
    top: calc(-40 * var(--rem));
  }
  .--1_3 & {
    top: calc(-60 * var(--rem));
    right: calc(30 * var(--rem));
  }
  .--2 & {
    top: calc(-40 * var(--rem));
  }
  & img {
    width: 100%;
  }
}
.p-series-list__item-body {
  margin-top: calc(30 * var(--rem));
  padding-left: calc(2 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: calc(42 / 24);
  letter-spacing: .07em;
  text-align: center;
}
.p-series-list__item-body__price {
  margin-top: calc(21 * var(--rem));
}


/* ===================
  .p-section-recommend
=================== */
.p-section-recommend {
  padding-block: calc(79 * var(--rem)) calc(100 * var(--rem));
  background: #fafafa;
}
.p-section-recommend__body {
  margin-top: calc(62 * var(--rem));
}


/* ===================
  .p-recommend-list
=================== */
.p-recommend-list {
  padding-inline: calc(60 * var(--rem));
}
.p-recommend-list__item {
  display: flex;
  justify-content: space-between;
  &:nth-child(even) {
    flex-direction: row-reverse;
  }
  & + & {
    margin-top: calc(90 * var(--rem));
  }
}
.p-recommend-list__item-image {
  position: relative;
  flex-shrink: 0;
  .--1_1 & {
    width: calc(200 * var(--rem));
  }
  .--1_2 & {
    width: calc(250 * var(--rem));
  }
  & img {
    width: 100%;
  }
}
.p-recommend-list__item-button {
  position: absolute;
  top: 0;
  width: calc(60 * var(--rem));
  height: calc(60 * var(--rem));
  .--1_1 & {
    top: calc(-30 * var(--rem));
    left: calc(-20 * var(--rem));
  }
  .--1_2 & {
    top: calc(-10 * var(--rem));
    right: calc(-20 * var(--rem));
  }
  & img {
    width: 100%;
  }
}
.p-recommend-list__item-body {
  margin-top: calc(-2 * var(--rem));
  font-size: calc(24 * var(--rem));
  .p-recommend-list__item:nth-child(odd) & {
    text-align: right;
  }
}
.p-recommend-list__item-body__heading {
  --dot-width: 14;
  --border-width: 381;
  position: relative;
  padding-bottom: calc(22 * var(--rem));
  font-size: calc(42 * var(--rem));
  line-height: calc(43.5 / 42);
  letter-spacing: .07em;
  .p-recommend-list__item:nth-child(odd) & {
    margin-right: calc(-2 * var(--rem));
  }
  .--1_2 & {
    margin-top: calc(-26 * var(--rem));
    padding-bottom: calc(8 * var(--rem));
    line-height: calc(74 / 42);
  }
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: calc((var(--border-width) * var(--rem)) + (var(--dot-width) * var(--rem) / 2));
    width: calc(var(--dot-width) * var(--rem));
    height: calc(var(--dot-width) * var(--rem));
    background: #000;
    border-radius: 50%;
    translate: 0 50%;
  }
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: calc(var(--border-width) * var(--rem));
    height: calc(2 * var(--rem));
    background: #000;
  }
  .p-recommend-list__item:nth-child(odd) &::before {
    right: calc((var(--border-width) * var(--rem)) + (var(--dot-width) * var(--rem) / 2));
  }
  .p-recommend-list__item:nth-child(even) &::before {
    left: calc((var(--border-width) * var(--rem)) + (var(--dot-width) * var(--rem) / 2));
  }
  .p-recommend-list__item:nth-child(odd) &::after {
    right: 0;
  }
  .p-recommend-list__item:nth-child(even) &::after {
    left: 0;
  }
}
.p-recommend-list__item-body__name {
  margin-top: calc(30 * var(--rem));
  line-height: calc(42 / 24);
  letter-spacing: .07em;
  .p-recommend-list__item:nth-child(odd) & {
    margin-right: calc(6 * var(--rem));
  }
  > a {
    .p-recommend-list__item:nth-child(odd) & {
      margin-right: calc(-8 * var(--rem));
    }
  }
}
.p-recommend-list__item-body__price {
  margin-top: calc(18 * var(--rem));
  line-height: calc(48 / 24);
  letter-spacing: .07em;
  .p-recommend-list__item:nth-child(odd) & {
    margin-right: calc(-2 * var(--rem));
  }
}


/* ===================
  .p-section-bottom
=================== */
.p-section-bottom {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: calc(20 * var(--rem));
  padding-block: calc(160 * var(--rem));
  padding-inline: calc(30 * var(--rem));
}


/* ===================
  simplebar
=================== */
.p-simplebar {
  .simplebar-scrollbar {
    &::before {
      background: #474747;
    }
  }
}


/* ===================
  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.5s ease-in-out, translate 0.5s ease-in-out;
  &.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}
.p-footer-nav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: #fff;
}
.p-footer-nav__item {
  position: relative;
  border-top: calc(2 * var(--rem)) solid #000;
  & + & {
    border-left: calc(2 * var(--rem)) solid #000;
  }
}
.p-footer-nav__item-body {
  position: relative;
  display: flex;
  justify-content: center;
  height: calc(118 * var(--rem));
  padding-top: calc(27 * var(--rem));
  background: #fff;
  border: none;
  border-bottom: calc(8 * var(--rem)) solid transparent;
  font-size: calc(28 * var(--rem));
  transition: border 0.3s ease-in-out;
  &.is-active {
    border-bottom-color: #000;
  }
  &::after {
    content: "";
    position: absolute;
    top: calc(81 * var(--rem));
    left: 50%;
    width: calc(16 * var(--rem));
    height: calc(16 * var(--rem));
    border-bottom: calc(2 * var(--rem)) solid #000;
    border-right: calc(2 * var(--rem)) solid #000;
    rotate: 45deg;
    translate: -50% 0;
  }
}


/* ===================
  Share
=================== */
#share {
  transition: bottom 0.5s ease-in-out;
  .footer-nav-visible & {
    bottom: calc(5% + (120 * var(--rem)));
  }
}


/* ===================
  Animation
=================== */
.js-fade-blur {
  opacity: 0.4;
  filter: blur(10px);
  will-change: opacity, filter;
  &.is-active {
    animation: fade-blur .8s ease-out forwards;
  }
}

/* -- keyframes -- */
@keyframes fade-blur {
  0% {
    opacity: 0.4;
    filter: blur(10px);
  }
  /* 25% {
    opacity: 1;
    filter: blur(10px);
  } */
  100% {
    opacity: 1;
    filter: blur(0);
  }
}


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

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

  .p-mainvisual__text {
    width: calc(438 * var(--rem));
  }
}


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

  .p-mainvisual {
    height: calc(820 * var(--rem));
  }
  .p-modal__content {
    max-width: calc(690 * var(--rem));
  }
}