@charset "UTF-8";

/* ========================================================
                      * Variable *
========================================================= */
:root {
  --pw: 1600; /* PC幅 */
  --sw: 750; /* SP幅 */
  --artboard-pw: 500; /* PCアートボード幅 */
  --artboard-sw: 750; /* 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: #6a6052;
  --color-accent: #6d96a1;

  --lp-font-ja: "Roboto","ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-en: "century-gothic","ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
}

@media (768px <= width) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}
@media (1600px <= 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;
}


/* ===================
  Animation
=================== */
.fade {
  opacity: 0;
  transition: opacity 2s var(--transition-timing);
  &.is-active {
    opacity: 1;
  }
}
.fade-up {
  opacity: 0;
  translate: 0 calc(50 * var(--rem));
  transition:
    opacity 2s var(--transition-timing),
    translate 2s var(--transition-timing);
  &.is-active {
    opacity: 1;
    translate: 0 0;
  }
}
.blinking-anim {
  animation: blinking 1s ease-out infinite alternate;
}

/* keyframes */
@keyframes blinking {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes floatX {
  0% {
    translate: calc(-5 * var(--rem));
  }
  50% {
    translate: calc(5 * var(--rem));
  }
  100% {
    translate: calc(-5 * var(--rem));
  }
}
@keyframes floatX2 {
  0% {
    translate: calc(7 * var(--rem));
  }
  50% {
    translate: calc(-7 * var(--rem));
  }
  100% {
    translate: calc(7 * var(--rem));
  }
}
@keyframes floatY {
  0% {
    transform: translateY(calc(-10 * var(--rem)));
  }
  50% {
    transform: translateY(calc(10 * var(--rem)));
  }
  100% {
    transform: translateY(calc(-10 * var(--rem)));
  }
}
@keyframes floatY2 {
  0% {
    transform: translateY(calc(10 * var(--rem)));
  }
  50% {
    transform: translateY(calc(-10 * var(--rem)));
  }
  100% {
    transform: translateY(calc(10 * var(--rem)));
  }
}


/* ===================
  Accordion
=================== */
.js-accordion--body {
  max-height: calc(320 * var(--rem));
  overflow: hidden;
  transition: max-height .6s ease-in-out;
  will-change: max-height;
  &.--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%);
    }
  }
  &.p-section-concept__body {
    max-height: calc(233 * var(--rem));
    &.is-open {
      & +.c-viewmore {
        margin-top: calc(37 * var(--rem));
      }
    }
  }
  &.p-points-list__item-body,
  &.p-routine-accordion__body {
    max-height: 0;
    transition: max-height .6s ease-in-out, margin .6s ease-in-out;
    will-change: max-height, margin-top;
  }
  &.p-comment-body {
    max-height: calc(458 * var(--rem));
  }
  & + .c-viewmore {
    transition: margin-top .6s ease-in-out;
    will-change: margin-top;
  }
}


/* ===================
  LP Contents
=================== */
.lp_contents {
  --letter-spacing: .075em;
  position: relative;
  /* 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: 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) {
    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: calc(14 * var(--rem));
    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;
  }
}


/* ===================
  Layout
=================== */
.l-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  &::before {
    position: sticky;
    content: '';
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100vh;
    background : linear-gradient(-30deg, rgba(219, 227, 234, 1) 0%, rgba(253, 250, 243, 1) 100%);
  }
}


.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
=================== */


/* ===================
  Component
=================== */
/* viewmore */
.c-viewmore {
  position: relative;
  display: block;
  margin-top: calc(30 * var(--rem));
  margin-inline: auto;
  padding-right: calc(28 * var(--rem));
  padding-bottom: calc(4 * var(--rem));
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  color: #a9aaaa;
  font-family: var(--lp-font-en);
  font-size: calc(20 * var(--rem));
  line-height: 1;
  letter-spacing: .1em;
  cursor: pointer;
  &::before,
  &::after {
    position: absolute;
    top: 50%;
    right: calc(4 * var(--rem));
    content: "";
    display: block;
    width: calc(14 * var(--rem));
    height: 1px;
    background: currentColor;
    translate: 0 -50%;
  }
  &::after {
    rotate: 90deg;
  }
  &.is-open {
    &::after {
      rotate: 0deg;
    }
  }
}

/* button */
.c-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(510 * var(--rem));
  height: calc(119 * var(--rem));
  margin-inline: auto;
  background : linear-gradient(-20deg, rgba(109, 150, 161, 1) 0%, rgba(217, 225, 222, 1) 100%);
  border-bottom: calc(9 * var(--rem)) solid #618d98;
  color: #fff;
  font-size: calc(36 * var(--rem));
  line-height: 1;
}

/* number */
.c-number {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(102 * var(--rem));
  height: calc(102 * var(--rem));
  margin-inline: auto;
  border-radius: 50%;
  color: #799fa9;
  font-family: var(--lp-font-en);
  font-size: calc(50 * var(--rem));
  line-height: 1;
  &::before,
  &::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  &::before {
    top: calc(10 * var(--rem));
    left: calc(10 * var(--rem));
    background : linear-gradient(120deg, rgba(253, 250, 243, 1) 0%, rgba(229, 238, 244, 1) 100%);
  }
  &::after {
    top: 0;
    left: 0;
    border: 1px solid var(--color-accent);
  }
}
.c-number__item {
  position: relative;
  z-index: 1;
}

/* coupon */
.c-coupon {
  position: fixed;
  bottom: calc(15 * var(--rem));
  right: calc(15 * var(--rem));
  width: calc(250 * var(--rem));
  height: calc(250 * var(--rem));
  transition: opacity .6s ease-in-out, visibility .6s ease-in-out;
  will-change: opacity;
  @media (768px <= width) {
    bottom: calc(40 * var(--rem-pc));
    right: calc(40 * var(--rem-pc));
    width: calc(130 * var(--rem-pc));
    height: calc(130 * var(--rem-pc));
  }
  &.is-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
}
.c-coupon__link {
  display: block;
  width: 100%;
  height: 100%;
  & img {
    width: 100%;
  }
}
.c-coupon__close {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(30 * var(--rem));
  height: calc(30 * var(--rem));
  @media (768px <= width) {
    top: calc(-15 * var(--rem-pc));
    right: calc(-15 * var(--rem-pc));
    width: calc(30 * var(--rem-pc));
    height: calc(30 * var(--rem-pc));
  }
  & img {
    width: 100%;
  }
}


/* ===================
  .p-mainvisual
=================== */
.p-mainvisual {
  position: relative;
  height: calc(970 * var(--rem));
  /* padding-bottom: calc(30 * var(--rem)); */
  background: #e0e3e5;
}
.p-mainvisual__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 2s var(--transition-timing) .5s;
  .is-active & {
    opacity: 1;
  }
  & img {
    width: 100%;
  }
}
.p-mainvisual__body {
  position: absolute;
  top: calc(734 * var(--rem));
  left: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: opacity 2s var(--transition-timing) 1.5s;
  .is-active & {
    opacity: 1;
  }
}
.p-mainvisual__stamp {
  position: absolute;
  top: calc(110 * var(--rem));
  right: calc(30 * var(--rem));
  width: calc(200 * var(--rem));
  height: calc(200 * var(--rem));
  opacity: 0;
  transition: opacity 2s var(--transition-timing) 1.2s;
  .is-active & {
    opacity: 1;
  }
  & img {
    width: 100%;
  }
}
.p-mainvisual__heading {
  font-family: var(--lp-font-en);
  font-size: calc(40 * var(--rem));
  line-height: calc(70 / 40);
}
.p-mainvisual__note {
  margin-top: calc(46 * var(--rem));
  font-size: calc(20 * var(--rem));
  line-height: 1;
}

/* ===================
  .p-section-concept
=================== */
.p-section-concept {
  position: relative;
  padding-block: calc(98 * var(--rem)) calc(119 * var(--rem));
  background: url(../img/bg_1.jpg) no-repeat top center/cover;
  text-align: center;
}
.p-section-concept__deco {
  position: absolute;
  top: calc(9ch + (83 * var(--rem)));
  right: calc(9 * var(--rem));
  color: #a9aaaa;
  font-family: var(--lp-font-en);
  font-size: calc(80 * var(--rem));
  line-height: 1;
  opacity: .5;
  transform-origin: top right;
  rotate: 90deg;
  pointer-events: none;
}
.p-section-concept__heading {
  margin-bottom: calc(46 * var(--rem));
  font-size: calc(38 * var(--rem));
  line-height: calc(85.5 / 38);
  letter-spacing: .1em;
}
.p-section-concept__body {
  position: relative;
}
.p-section-concept__body-text {
  font-size: calc(26 * var(--rem));
  line-height: calc(58.5 / 26);
  letter-spacing: .1em;
  & + & {
    margin-top: calc(34 * var(--rem));
  }
}
.p-section-concept__body-note {
  margin-top: calc(39 * var(--rem));
  color: #a9aaaa;
  font-size: calc(20 * var(--rem));
  line-height: calc(40 / 20);
}


/* ===================
  .p-main-section
=================== */
.p-main-section {
  padding-block: calc(100 * var(--rem)) calc(69 * var(--rem));
  background: #e3e8eb url(../img/bg_3.jpg) no-repeat top center/100%;
}


/* ===================
  .p-check-block
=================== */
.p-check-block {
  position: relative;
  width: calc(600 * var(--rem));
  margin-inline: auto;
  padding-block: calc(62 * var(--rem)) calc(72 * var(--rem));
  background: rgba(255, 255, 255, .6);
  border-radius: calc(40 * var(--rem));
}
.p-check-block__deco {
  position: absolute;
  top: calc(-291 * var(--rem));
  right: calc(-263 * var(--rem));
  width: calc(562.379 * var(--rem));
  pointer-events: none;
  & img {
    width: 100%;
  }
}
.p-check-block__heading {
  position: relative;
  margin-bottom: calc(60 * var(--rem));
  color: var(--color-accent);
  font-size: calc(36 * var(--rem));
  line-height: 1;
  text-align: center;
}
.p-check-block__list {
  padding-left: calc(91 * var(--rem));
}
.p-check-block__list-item {
  display: flex;
  align-items: center;
  gap: calc(25 * var(--rem));
  height: calc(46 * var(--rem));
  & + & {
    margin-top: calc(60 * var(--rem));
  }
}
.p-check-block__list-item__icon {
  width: calc(54 * var(--rem));
  & img {
    width: 100%;
  }
}
.p-check-block__list-item__text {
  padding-top: .3em;
  font-size: calc(25 * var(--rem));
  line-height: calc(43.75 / 25);
}


/* ===================
  .p-item-block
=================== */
.p-item-block {
  margin-top: calc(89 * var(--rem));
}
.p-item-block__heading {
  color: var(--color-accent);
  font-family: var(--lp-font-en);
  font-size: calc(40 * var(--rem));
  line-height: calc(60 / 40);
  text-align: center;
}
.p-item-block__hero {
  position: relative;
}
.p-item-block__hero-list__item {
  position: absolute;
  width: calc(294 * var(--rem));
  height: calc(294 * var(--rem));
  border-radius: 50%;
  &::before,
  &::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  &::before {
    opacity: .7;
  }
  &::after {
    top: 0;
    left: 0;
    border: 1px solid var(--color-accent);
  }
  &.--1 {
    top: calc(70 * var(--rem));
    left: calc(27 * var(--rem));
    translate: calc(7 * var(--rem)) calc(-10 * var(--rem));
    animation: floatY 13s infinite, floatX2 15s infinite reverse;
    animation-delay: 2.2s;
    &::before {
      top: calc(19 * var(--rem));
      right: calc(12 * var(--rem));
      background : linear-gradient(160deg, rgba(253, 250, 243, 1) 0%, rgba(229, 238, 244, 1) 100%);
    }
  }
  &.--2 {
    top: calc(179 * var(--rem));
    right: calc(10 * var(--rem));
    translate: calc(-5 * var(--rem)) calc(10 * var(--rem));
    animation: floatY2 11s infinite, floatX 16s infinite reverse;
    animation-delay: 2.4s;
    &::before {
      top: calc(13 * var(--rem));
      left: calc(8 * var(--rem));
      background : linear-gradient(110deg, rgba(253, 250, 243, 1) 0%, rgba(229, 238, 244, 1) 100%);
    }
  }
  &.--3 {
    top: calc(460 * var(--rem));
    left: calc(24 * var(--rem));
    translate: calc(-5 * var(--rem)) calc(10 * var(--rem));
    animation: floatY2 12s infinite, floatX 16s infinite reverse;
    animation-delay: 2.3s;
    &::before {
      top: calc(14 * var(--rem));
      right: calc(6 * var(--rem));
      background : linear-gradient(160deg, rgba(253, 250, 243, 1) 0%, rgba(229, 238, 244, 1) 100%);
    }
  }
  &.--4 {
    top: calc(569 * var(--rem));
    right: calc(22 * var(--rem));
    translate: calc(7 * var(--rem)) calc(-10 * var(--rem));
    animation: floatY 13s infinite, floatX2 14s infinite reverse;
    animation-delay: 2.1s;
    &::before {
      top: calc(14 * var(--rem));
      left: calc(10 * var(--rem));
      background : linear-gradient(160deg, rgba(253, 250, 243, 1) 0%, rgba(229, 238, 244, 1) 100%);
    }
  }
}
.p-item-block__hero-list__item-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.p-item-block__hero-list__item-label {
  margin-bottom: calc(11 * var(--rem));
  color: var(--color-accent);
  font-size: calc(26 * var(--rem));
  line-height: calc(45.5 / 26);
  text-align: center;
  .p-item-block__hero-list__item.--2 & {
    padding-top: calc(18 * var(--rem));
  }
}
.p-item-block__hero-list__item-text {
  font-size: calc(22 * var(--rem));
  line-height: calc(33 / 22);
  text-align: center;
}
.p-item-block__hero-image {
  position: relative;
  z-index: 2;
  width: calc(300 * var(--rem));
  padding-top: calc(298 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}


/* ===================
  .p-item-block__body
=================== */
.p-item-block__body {
  margin-top: calc(46 * var(--rem));
}
.p-item-block__body-name {
  font-family: var(--lp-font-en);
  font-size: calc(36 * var(--rem));
  line-height: calc(63 / 36);
  text-align: center;
}
.p-item-block__body-price {
  margin-top: calc(28 * var(--rem));
  font-size: calc(26 * var(--rem));
  line-height: 1;
  text-align: center;
}
.p-item-block__body-button {
  margin-top: calc(36 * var(--rem));
}
.p-item-block__body-note {
  position: relative;
  z-index: 15;
  width: calc(560 * var(--rem));
  margin-top: calc(51 * var(--rem));
  margin-inline: auto;
  color: #a9aaaa;
  font-size: calc(20 * var(--rem));
  line-height: calc(40 / 20);
  text-align: justify;
  .p-coupon + & {
    margin-top: 0;
  }
}


/* ===================
  .p-coupon
=================== */
.p-coupon {
  position: relative;
  width: calc(696 * var(--rem));
  margin-top: calc(36 * var(--rem));
  margin-inline: auto;
  padding-block: calc((22 + 42) * var(--rem));
  padding-inline: calc(22 * var(--rem));
  background: url(../img/bg_coupon.png) no-repeat top left/100% 100%;
}
.p-coupon__head {
  color: var(--color-accent);
  font-size: calc(26 * var(--rem));
  line-height: 1;
  text-align: center;
}
.p-coupon__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(48 * var(--rem));
  margin-top: calc(25 * var(--rem));
  background: var(--color-accent);
  color: #fff;
  font-family: var(--lp-font-en);
  font-size: calc(36 * var(--rem));
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
}
.p-coupon__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--rem));
  margin-top: calc(30 * var(--rem));
}
.p-coupon__code-label {
  font-size: calc(26 * var(--rem));
  line-height: 1;
}
.p-coupon__code-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--rem));
  width: calc(350 * var(--rem));
  height: calc(64 * var(--rem));
  background: #ebeff1;
}
.p-coupon__code-text__main {
  font-family: var(--lp-font-en);
  font-size: calc(42 * var(--rem));
  line-height: 1;
}
.p-coupon__code-text__icon {
  width: calc(35 * var(--rem));
  cursor: pointer;
  & img {
    width: 100%;
  }
}
.p-coupon__code-message {
  position: absolute;
  top: auto;
  right: 0;
  padding: 0.5em 1em;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
  margin-top: 0.5em;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
  &.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
}
.p-coupon__note {
  margin-top: calc(25 * var(--rem));
  color: #a9aaaa;
  font-size: calc(20 * var(--rem));
  line-height: 1;
  text-align: center;
}


/* ===================
  .p-points-section
=================== */
.p-points-section {
  position: relative;
  padding-block: calc(121 * var(--rem)) calc(140 * var(--rem));
  background : linear-gradient(-30deg, rgba(253, 250, 243, 1) 0%, rgba(229, 238, 244, 1) 40%, rgba(253, 250, 243, 1) 70%, rgba(229, 238, 244, 1) 100%);
}
.p-points-section__deco {
  position: absolute;
  top: calc(-248 * var(--rem));
  left: calc(-183 * var(--rem));
  z-index: 1;
  width: calc(639.136 * var(--rem));
  pointer-events: none;
  & img {
    width: 100%;
  }
}
.p-points-section__head {
  position: relative;
  z-index: 15;
  text-align: center;
}
.p-points-section__heading {
  font-size: calc(24 * var(--rem));
  line-height: 1;
}
.p-points-section__heading-en {
  margin-top: calc(14 * var(--rem));
  font-family: var(--lp-font-en);
  font-size: calc(60 * var(--rem));
  line-height: 1;
}


/* ===================
  .p-points-list
=================== */
.p-points-list {
  margin-top: calc(80 * var(--rem));
}
.p-points-list__item {
  & + & {
    margin-top: calc(98 * var(--rem));
  }
  .c-viewmore {
    margin-top: calc(38 * var(--rem));
    &.is-open {
      margin-top: calc(25 * var(--rem));
    }
  }
  &.--3,
  &.--4 {
    .c-viewmore {
      margin-top: calc(19 * var(--rem));
      &.is-open {
        margin-top: calc(27 * var(--rem));
      }
    }
  }
}
.p-points-list__item-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: calc(39 * var(--rem));
  color: var(--color-accent);
  font-size: calc(30 * var(--rem));
  line-height: calc(52.5 / 30);
  text-align: center;
  .--em {
    font-size: calc(40 * var(--rem));
    font-weight: bold;
  }
}
.p-points-list__item-figure {
  margin-top: calc(34 * var(--rem));
  margin-inline: auto;
  &.--1 {
    width: calc(640 * var(--rem));
  }
  &.--2 {
    width: calc(440 * var(--rem));
  }
  & img {
    width: 100%;
  }
}
.p-points-list__item-body {
  width: calc(560 * var(--rem));
  margin-inline: auto;
  &.is-open {
    margin-top: calc(39 * var(--rem));
    .p-points-list__item.--3 &,
    .p-points-list__item.--4 & {
      margin-top: calc(22 * var(--rem));
    }
  }
  .p-item-block__body-note {
    margin-top: calc(24 * var(--rem));
  }
}
.p-points-list__item-text {
  font-size: calc(24 * var(--rem));
  line-height: calc(48 / 24);
  text-align: justify;
}

.p-points-list__item-bottom {
  margin-top: calc(61 * var(--rem));
}
.p-points-list__item-bottom__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(620 * var(--rem));
  height: calc(120 * var(--rem));
  margin-inline: auto;
  background: url(../img/bg_heading.png) no-repeat center / 100% 100%;
  color: #fff;
  font-size: calc(28 * var(--rem));
  line-height: calc(49 / 28);
  text-align: center;
}
.p-points-list__item-bottom__image {
  width: calc(459 * var(--rem));
  margin-top: calc(50 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}


/* ===================
  .p-comment-section
=================== */
.p-comment-section {
  padding-block: calc(120 * var(--rem)) calc(140 * var(--rem));
  background : #e4edef;
}
.p-comment-section__heading {
  color: var(--color-accent);
  font-size: calc(24 * var(--rem));
  line-height: 1;
  text-align: center;
}
.p-comment-section__heading-en {
  margin-top: calc(25 * var(--rem));
  color: var(--color-accent);
  font-family: var(--lp-font-en);
  font-size: calc(50 * var(--rem));
  line-height: 1;
  text-align: center;
}
.p-comment-section__lead {
  margin-top: calc(45 * var(--rem));
  font-size: calc(32 * var(--rem));
  font-weight: bold;
  line-height: calc(64 / 32);
  text-align: center;
}


/* ===================
  .p-comment-block
=================== */
.p-comment-block {
  position: relative;
  margin-top: calc(47 * var(--rem));
}
.p-comment-block__head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: calc(450 * var(--rem));
  height: calc(169 * var(--rem));
  padding-block: calc(35 * var(--rem));
  padding-left: calc(50 * var(--rem));
  background: var(--color-accent);
  color: #fff;
}
.p-comment-block__meta {
  font-size: calc(24 * var(--rem));
  line-height: 1;
}
.p-comment-block__name {
  margin-top: calc(25 * var(--rem));
  font-size: calc(50 * var(--rem));
  line-height: 1;
}
.p-comment-block__body {
  width: calc(312 * var(--rem));
  margin-top: calc(26 * var(--rem));
  margin-left: calc(50 * var(--rem));
}
.p-comment-block__body-text {
  font-size: calc(22 * var(--rem));
  line-height: calc(44 / 22);
  text-align: justify;
}
.p-comment-block__image {
  position: absolute;
  top: calc(74 * var(--rem));
  right: calc(-31 * var(--rem));
  width: calc(411 * var(--rem));
  & img {
    width: 100%;
  }
}

.p-comment-body__container {
  position: relative;
  width: calc(690 * var(--rem));
  margin-top: calc(75 * var(--rem));
  margin-inline: auto;
  padding: calc(40 * var(--rem));
  background : linear-gradient(-30deg, rgba(243, 247, 250, 1) 0%, rgba(245, 248, 250, 1) 14.19%, rgba(254, 253, 249, 1) 100%);
  border-radius: calc(40 * var(--rem));
  &::before {
    position: absolute;
    top: calc(-29 * var(--rem));
    right: calc(63 * var(--rem));
    content: "";
    display: block;
    width: calc(38 * var(--rem));
    height: calc(29 * var(--rem));
    background: url(../img/deco_comment_2.svg) no-repeat center / 100% 100%;
  }
}
.p-comment-body__deco {
  width: calc(40 * var(--rem));
  &.--1 {
    margin-bottom: calc(19 * var(--rem));
  }
  &.--2 {
    margin-top: calc(10 * var(--rem));
    margin-left: auto;
    rotate: 180deg;
  }
  & img {
    width: 100%;
  }
}
.p-comment-body {
  width: calc(540 * var(--rem));
  margin-inline: auto;
}
.p-comment-body__text {
  font-size: calc(24 * var(--rem));
  line-height: calc(48 / 24);
  letter-spacing: .1em;
  text-align: justify;
  & + & {
    margin-top: calc(33 * var(--rem));
  }
  .--em {
    color: #8db6c0;
    font-size: calc(28 * var(--rem));
    font-weight: bold;
    line-height: calc(46 / 28);
  }
}


/* ===================
  .p-review-section
=================== */
.p-review-section {
  padding-block: calc(140 * var(--rem)) calc(180 * var(--rem));
  background: #f2f2ee;
}
.p-review-section__head {
  text-align: center;
}
.p-review-section__heading {
  font-size: calc(24 * var(--rem));
  line-height: 1;
}
.p-review-section__heading-en {
  margin-top: calc(25 * var(--rem));
  font-family: var(--lp-font-en);
  font-size: calc(50 * var(--rem));
  line-height: 1;
  letter-spacing: .09em;
}
.p-review-card__container {
  margin-top: calc(50 * var(--rem));
}
.p-review-card {
  display: flex;
  gap: calc(30 * var(--rem));
}
.p-review-card__item {
  flex-shrink: 0;
  width: calc(580 * var(--rem));
  padding: calc(40 * var(--rem)) calc(50 * var(--rem)) calc(41 * var(--rem));
  background: rgba(255, 255, 255, .6);
  border-radius: calc(20 * var(--rem));
}
.p-review-card__head {
  display: flex;
  align-items: center;
  gap: calc(30 * var(--rem));
  margin-bottom: calc(19 * var(--rem));
}
.p-review-card__head-image {
  width: calc(140 * var(--rem));
  & img {
    width: 100%;
  }
}
.p-review-card__head-name {
  font-size: calc(26 * var(--rem));
  line-height: calc(52 / 26);
}
.p-review-card__body {
  font-size: calc(24 * var(--rem));
  line-height: calc(48 / 24);
  letter-spacing: .075em;
  text-align: justify;
}


/* ===================
  　simplebar
=================== */
.p-simplebar {
  --bar-height: calc(6 * var(--rem));
  --inline-pos: calc(70 * var(--rem));
  padding-bottom: calc(56 * var(--rem));
  padding-left: var(--inline-pos);
  user-select: none;
  &.is-dragging {
    cursor: grabbing;
  }
  .simplebar-content {
    display: flex;
  }
  .p-simplebar__body {
    padding-right: var(--inline-pos);
  }
  .simplebar-track {
    &.simplebar-horizontal {
      left: var(--inline-pos);
      right: var(--inline-pos);
      height: var(--bar-height);
      background-color: #e1e1d8;
      /* .--orange & {
        background-color: #ded6cf;
      }
      .--blue & {
        background-color: #fff;
      } */
      .simplebar-scrollbar {
        top: 0;
        height: var(--bar-height);
      }
    }
  }
  .simplebar-scrollbar {
    &::before {
      background: #abbabf;
    }
    /* .--orange & {
      &::before {
        background: var(--color-orange1);
      }
    }
    .--blue & {
      &::before {
        background: var(--color-blue1);
      }
    } */
    &.simplebar-visible {
      &::before {
        opacity: 1;
      }
    }
  }
}


/* ===================
  　　.p-routine-section
=================== */
.p-routine-section {
  padding-block: calc(120 * var(--rem)) calc(119 * var(--rem));
  background: #f4f4f5 url(../img/bg_2.png) no-repeat top center/100%;
}
.p-routine-section__heading {
  font-size: calc(40 * var(--rem));
  line-height: 1;
  text-align: center;
}
.p-routine-section__head {
  margin-block: calc(50 * var(--rem)) calc(21 * var(--rem));
}
.p-routine-section__blinking {
  width: calc(200 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.p-routine-section__head-text {
  margin-top: calc(22 * var(--rem));
  color: var(--color-accent);
  font-size: calc(26 * var(--rem));
  line-height: calc(45.5 / 26);
  text-align: center;
}
.p-routine-section__image {
  width: calc(700 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.p-routine-section__note {
  margin-top: calc(31 * var(--rem));
  color: #a9aaaa;
  font-size: calc(20 * var(--rem));
  line-height: calc(40 / 20);
  text-align: center;
}

.p-routine-section__body {
  width: calc(540 * var(--rem));
  margin-top: calc(92 * var(--rem));
  margin-inline: auto;
}
.p-routine-accordion {
  & + & {
    margin-top: calc(81 * var(--rem));
  }
}
.p-routine-accordion__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-bottom: calc(27 * var(--rem));
  border-bottom: 1px solid currentColor;
  font-size: calc(36 * var(--rem));
  line-height: 1;
  text-align: center;
  &::before,
  &::after {
    position: absolute;
    bottom: calc(46 * var(--rem));
    right: calc(30 * var(--rem));
    content: "";
    display: block;
    width: calc(30 * var(--rem));
    height: 1px;
    background: currentColor;
  }
  &::after {
    rotate: 90deg;
    transition: rotate .6s;
  }
  &.is-open {
    &::after {
      rotate: 0deg;
    }
  }
}
.p-routine-accordion__body {
  &.is-open {
    margin-top: calc(19 * var(--rem));
    margin-bottom: calc(-13 * var(--rem));
  }
}
.p-routine-accordion__body-text {
  font-size: calc(24 * var(--rem));
  line-height: calc(48 / 24);
  text-align: justify;
  & + & {
    margin-top: calc(16 * var(--rem));
  }
}


/* ===================
  　　.p-staple
=================== */
.p-staple {
  padding-block: calc(82 * var(--rem)) calc(160 * var(--rem));
  background: #fff;
}
.p-staple-heading {
  color: #000;
  text-align: center;
}
.p-staple-heading__main {
  font-size: calc(40 * var(--rem));
  line-height: 1;
}
/* .p-staple-heading__sub {
  font-size: calc(44 * var(--rem));
  line-height: calc(36 / 44);
} */


/* ===================
  　　.p-staple-card
=================== */
.p-staple-card-slider {
  margin-top: calc(78 * var(--rem));
}
.p-staple-card-list__item {
  /* width: calc(440 * var(--rem)); */
  margin-inline: calc(20 * var(--rem));
  padding-block: calc(60 * var(--rem)) calc(46 * var(--rem));
  padding-inline: calc(20 * var(--rem));
  background: #fff;
  border-radius: calc(20 * var(--rem));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  color: #000;
  text-align: center;
}
.p-staple-card__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: calc(36 * var(--rem));
  margin-inline: auto;
  padding-top: .1em;
  padding-inline: 1em;
  border: 1px solid #a7a7a7;
  color: #a9aaaa;
}
.p-staple-card__tag-sub {
  margin-top: calc(20 * var(--rem));
  font-size: calc(22 * var(--rem));
  line-height: 1;
}
.p-staple-card__image {
  margin-top: calc(30 * var(--rem));
  & img {
    display: block;
    /* width: 100%; */
    width: calc(400 * var(--rem));
  }
}
.p-staple-card__body {
  margin-top: calc(22 * var(--rem));
}
.p-staple-card__name {
  font-size: calc(26 * var(--rem));
  line-height: calc(45.5 / 26);
  font-weight: bold;
}
.p-staple-card__price {
  margin-top: calc(11 * var(--rem));
  font-family: var(--lp-font-en);
  font-size: calc(22 * var(--rem));
  line-height: calc(38.5 / 22);
  &.--accent {
    color: #ba4f3b;
  }
  & + & {
    margin-top: calc(-1 * var(--rem));
  }
}
.p-staple-card__note {
  margin-top: calc(7 * var(--rem));
  color: #a9aaaa;
  font-size: calc(20 * var(--rem));
  line-height: calc(30 / 20);
}
.p-staple-card__link {
  margin-top: calc(18 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: calc(42 / 24);
  text-decoration: underline;
  text-underline-offset: calc(8 * var(--rem));
}

.p-staple-card-slider {
  .slick-list {
    overflow: clip visible !important;
  }
  .slick-dotted {
    &.slick-slider {
      margin-bottom: calc(61 * var(--rem));
    }
  }
  .slick-prev,
  .slick-next {
    top: 46.5%;
    z-index: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: calc(60 * var(--rem));
    height: calc(60 * var(--rem));
    background: rgba(169, 170, 170, .7);
    border-radius: 50%;
    &::before {
      content: "";
      display: block;
      width: calc(17 * var(--rem));
      height: calc(17 * var(--rem));
      margin-inline: auto;
      border-top: calc(2 * var(--rem)) solid #fff;
      border-right: calc(2 * var(--rem)) solid #fff;
      opacity: 1;
    }
  }
  .slick-prev {
    left: calc(105 * var(--rem));
    &::before {
      rotate: -135deg;
      translate: 15% 0;
    }
  }
  .slick-next {
    right: calc(105 * var(--rem));
    &::before {
      rotate: 45deg;
      translate: -15% 0;
    }
  }
  .slick-dots {
    --dots-size: calc(16 * var(--rem));
    bottom: calc(-67 * var(--rem));
    & li {
      width: var(--dots-size);
      height: var(--dots-size);
      margin-inline: calc(10 * var(--rem));
      & button {
        width: var(--dots-size);
        height: var(--dots-size);
        padding: 0;
        background: #fff;
        border: calc(2 * var(--rem)) solid #a7a7a7;
        border-radius: 50%;
        opacity: 1;
        &::before {
          display: none;
        }
      }
      &.slick-active {
        & button {
          background: #a7a7a7;
        }
      }
    }
  }
}

.p-staple__button-container {
  margin-top: calc(205 * var(--rem));
}
.p-staple__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(650 * var(--rem));
  height: calc(80 * var(--rem));
  margin-inline: auto;
  background: #787878;
  color: #fff;
  font-family: var(--lp-font-en);
  font-size: calc(36 * var(--rem));
}


/* ===================
  .p-logo-box
=================== */
.p-logo-box {
  margin-top: calc(165 * var(--rem-pc));
}
.p-logo-box__main {
  width: calc(63.2034 * var(--rem-pc));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.p-logo-box__text {
  margin-top: calc(32 * var(--rem-pc));
  font-family: var(--lp-font-en);
  font-size: calc(20 * var(--rem-pc));
  line-height: calc(35 / 20);
  text-align: center;
}


/* ===================
  .p-anchor-nav
=================== */
.p-anchor-nav {
  margin-top: calc(161 * var(--rem-pc));
  text-align: center;
}
.p-anchor-nav__item {
  font-family: var(--lp-font-en);
  font-size: calc(18 * var(--rem-pc));
  line-height: 1;
  & + & {
    margin-top: calc(40 * var(--rem-pc));
  }
  .--ja {
    letter-spacing: 0;
  }
}



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

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


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