@charset "UTF-8";

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

  --lp-background-color: #FFFFF4;
  --base-font-color: #333;
  --color-green: #D1E08E;
  --color-green-accent: #F5F8DC;
  --color-green-light: #FBFFEA;
  --color-yellow: #EDD56C;
  --color-yellow-accent: #FAF5CF;
  --color-yellow-light: #FFFBE2;
  --color-orange: #F7CF7A;
  --color-orange-accent: #FCEFD3;
  --color-orange-light: #FFF6E3;

  --lp-font-ja: "Inter", "Noto Sans JP", hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-noto: "Noto Sans JP", hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-en: "Inter", sans-serif;
  --lp-font-trade-gothic: "trade-gothic-next-compressed", sans-serif;
  --lp-font-caveat: "Caveat", cursive;

  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-heavy: 800;

  --icon-arrow-right: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.028%22%20height%3D%2211.5%22%20viewBox%3D%220%200%207.028%2011.5%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_9176%22%20data-name%3D%22%E3%83%91%E3%82%B9%209176%22%20d%3D%22M93.317%2C45.317l-4.545%2C4.545a.455.455%2C0%2C0%2C1-.643-.643L92.353%2C45l-4.224-4.224a.455.455%2C0%2C1%2C1%2C.643-.643l4.545%2C4.545a.455.455%2C0%2C0%2C1%2C0%2C.643Z%22%20transform%3D%22translate(-87.172%20-39.246)%22%20fill%3D%22currentColor%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fsvg%3E');
}

@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;
}



/* ===================
  LP Contents
=================== */
.lp_contents {
  --letter-spacing: .05em;
  position: relative;
  /* background: var(--lp-background-color, transparent); */
  background: url(../img/bg_1.jpg) repeat-y center top/100% auto;
  color: var(--base-font-color, #000);
  font-family: var(--lp-font-ja);
  font-optical-sizing: auto;
  font-weight: var(--font-medium);
  font-size: calc(14 * var(--rem));
  font-style: normal;
  letter-spacing: var(--letter-spacing);
  /* & * {
    font-feature-settings: "palt";
  } */
  & *,
  & *:before,
  & *:after {
    box-sizing: border-box;
  }
  & :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, a, button, figure, figcaption, span, sup) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: var(--letter-spacing);
  }
  & ul,
  & li {
    list-style: none;
  }
  & :where(img) {
    display: block;
    width: 100%;
    height: auto;
  }
  & sup {
    top: 0;
    font-size: .6em;
    vertical-align: super;
  }
  & :where(a, a:before, a:after, a img, button) {
    --duration: .3s;
    --timing: ease-in-out;
    transition:
      opacity var(--duration) var(--timing),
      color var(--duration) var(--timing),
      background-color var(--duration) var(--timing),
      background-image var(--duration) var(--timing),
      border-color var(--duration) var(--timing),
      text-shadow var(--duration) var(--timing),
      text-weight var(--duration) var(--timing)
    ;
  }
  & :where(a) {
    color: inherit;
    text-decoration: none;
    text-underline-offset: calc(4 * var(--rem));
    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
    @media (width < 768px) {
      &:hover {
        opacity: 1;
      }
    }
  }
  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  & em {
    font-style: normal;
  }
}



/* ===================
  Animation
=================== */



/* ===================
  Layout
=================== */
.layout-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  background: #F8FAD2;
}
.layout-mobile-first {
  position: relative;
  @media (768px <= width) {
    display: flex;
  }
}
.layout-mobile-first__left,
.layout-mobile-first__right {
  position: relative;
  width: calc((100% - (var(--artboard-pw) * var(--rem-pc))) / 2);
}
.layout-mobile-first__sticky {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.layout-mobile-first__main {
  overflow-x: clip;
  @media (768px <= width) {
    width: calc(var(--artboard-pw) * var(--rem-pc));
  }
}


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


/* ===================
  Component
=================== */
/* button */
.component-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--width, calc(350 * var(--rem)));
  height: var(--height, calc(54 * var(--rem)));
  margin-inline: auto;
  background: var(--button-color);
  border-radius: calc(999 * var(--rem));
  color: var(--text-color, #fff);
  font-size: calc(14 * var(--rem));
  font-weight: var(--font-semibold);
  .--large {
    font-size: calc(16 * var(--rem));
  }
}

.component-button--arrow {
  &::after {
    position: absolute;
    top: 50%;
    right: calc(25 * var(--rem));
    content: "";
    display: block;
    width: calc(6 * var(--rem));
    height: calc(12 * var(--rem));
    background: currentColor;
    mask: var(--icon-arrow-right) no-repeat center/100% 100%;
    translate: 0 -50%;
  }
}

/* ticker */
.component-ticker__container {
  width: 100%;
  overflow: hidden;
}
.component-ticker {
  display: flex;
  white-space: nowrap;
  width: fit-content;
  animation: var(--duration, 30s) linear .2s infinite ticker-loop;
  will-change: transform;
}
.component-ticker__text {
  display: block;
  color: var(--ticker-color);
  font-family: var(--lp-font-trade-gothic);
  font-size: calc(58 * var(--rem));
  font-weight: var(--font-bold);
  line-height: 1;
  letter-spacing: 0.02em;
}

@keyframes ticker-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* link point */
.component-link-point {
  width: calc(16 * var(--rem));
  height: calc(16 * var(--rem));
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 calc(6 * var(--rem)) rgba(0, 0, 0, .16);
  opacity: .9;
  animation: 2s linear 2s infinite blinking;
}

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


/* ===================
  Accordion
=================== */
.js-accordion--body {
  max-height: var(--max-height, calc(300 * var(--rem)));
  overflow: hidden;
  transition: max-height .6s ease-in-out;
  will-change: max-height;
  transform: translate3d(0,0,0);
  &.--mask {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, 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%);
    }
  }
}


/* ===================
  　simplebar
=================== */
.project-simplebar {
  --bar-height: calc(3 * var(--rem));
  --inline-pos: calc(20 * var(--rem));
  --bar-base-color: rgba(209, 224, 142, .2);
  --bar-pos-color: #D1E08E;
  --simpleba-padding-bottom: calc(40 * var(--rem));/*barの高さを足す*/
  padding-bottom: var(--simpleba-padding-bottom);
  padding-left: var(--inline-pos);
  user-select: none;
  &.is-dragging {
    cursor: grabbing;
    & a,
    & img {
      pointer-events: none;
      user-select: none;
    }
  }
  .simplebar-content {
    display: flex;
  }
  .project-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: var(--bar-base-color);
      .simplebar-scrollbar {
        top: 0;
        height: var(--bar-height);
      }
    }
  }
  .simplebar-scrollbar {
    &::before {
      background: var(--bar-pos-color);
    }
    &.simplebar-visible {
      &::before {
        opacity: 1;
      }
    }
  }
}


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

.project-modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(390 * var(--rem));
  max-width: 100vw;
  max-height: 100dvh;
  background-color: var(--lp-background-color);
  translate: -50% -50%;
  transition: transform 0.3s ease-out;
  overflow-y: scroll;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.project-modal__close-button__wrapper {
  position: sticky;
  top: calc(10 * var(--rem));
  z-index: 10;
}
.project-modal__close-button {
  position: absolute;
  top: 0;
  right: calc(10 * var(--rem));
  z-index: 10;
  width: calc(40 * var(--rem));
  height: calc(40 * var(--rem));
  background: #fff;
  border: 1px solid #E6E6D2;
  border-radius: 50%;
  cursor: pointer;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(19 * var(--rem));
    height: 1px;
    background-color: #666;
  }
  &::before {
    translate: -50% -50%;
    rotate: 45deg;
  }
  &::after {
    translate: -50% -50%;
    rotate: -45deg;
  }
}

/* ===================
  .project-modal-content
=================== */
.project-modal-content {
  position: relative;
  padding-top: calc(26 * var(--rem));
  padding-bottom: calc(60 * var(--rem));
  background: var(--lp-background-color);
}


/**
 * modal-head
 */
.modal-head__tag {
  margin-inline: auto;
}
.modal-head__label {
  margin-top: calc(6 * var(--rem));
  font-size: calc(35 * var(--rem));
  font-weight: var(--font-semibold);
  line-height: 1;
  text-align: center;
}
.modal-head__lead {
  margin-top: calc(25 * var(--rem));
  font-size: calc(16 * var(--rem));
  font-weight: var(--font-regular);
  line-height: calc(24 / 16);
  text-align: center;
  .--em {
    font-weight: var(--font-bold);
  }
}


/**
 * cause-block
 */
.cause-block {
  position: relative;
  width: calc(350 * var(--rem));
  margin-top: calc(32 * var(--rem));
  margin-inline: auto;
  padding-inline: calc(15 * var(--rem));
  padding-bottom: calc(12 * var(--rem));
  background: #FFFFF8;
  border: 1px solid #EDEAD2;
  border-radius: calc(5 * var(--rem));
  &::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: calc(39 * var(--rem));
    height: 1px;
    background: #FFFFF8;
    translate: -50% 0;
  }
}
.cause-block__label {
  position: relative;
  margin-top: -.5lh;
  margin-bottom: calc(11 * var(--rem));
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-bold);
  line-height: 1;
  text-align: center;
}
.cause-block__text {
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-regular);
  line-height: calc(21 / 13);
}


/**
 * modal-section
 */
.modal-section {
  --blink-text-color: #D7E59A;
  --blink-text-size: calc(26 * var(--rem));
  margin-top: calc(47 * var(--rem));
  .blink-text__container {
    &.--large {
      --blink-text-size: calc(28 * var(--rem));
    }
  }
}

.modal-inner-care {
  .modal-head + .modal-section {
    margin-top: calc(44 * var(--rem));
  }
  .modal-section + .modal-section {
    margin-top: calc(43 * var(--rem));
  }
}
.modal-skin-care {
  .modal-head + .modal-section {
    margin-top: calc(44 * var(--rem));
  }
  .modal-section + .modal-section {
    margin-top: calc(43 * var(--rem));
  }
  .items-slider {
    padding-bottom: calc(26 * var(--rem));
  }
  .ingredients-slider {
    margin-top: calc(26 * var(--rem));
  }
}


/**
 * modal-plate-list
 */
.modal-plate-list {
  width: calc(350 * var(--rem));
  margin-top: calc(8 * var(--rem));
  margin-inline: auto;
}
.modal-plate-list__item {
  display: flex;
  gap: calc(10 * var(--rem));
  padding-top: calc(12 * var(--rem));
  padding-bottom: calc(18 * var(--rem));
  & + & {
    border-top: 1px dotted #D7E59A;
  }
  &:last-child {
    margin-bottom: calc(-3 * var(--rem));
    padding-bottom: 0;
  }
}
.modal-plate-list__image {
  flex-shrink: 0;
  width: calc(100 * var(--rem));
  margin-top: calc(8 * var(--rem));
}
.modal-plate-list__label {
  margin-bottom: calc(4 * var(--rem));
  font-size: calc(12 * var(--rem));
  letter-spacing: 0;
  .en {
    margin-right: calc(10 * var(--rem));
    font-family: var(--lp-font-caveat);
    font-size: calc(26 * var(--rem));
    font-weight: var(--font-regular);
    line-height: 1;
    letter-spacing: 0;
  }
}
.modal-plate-list__text {
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-regular);
  line-height: calc(20 / 12);
}


/**
 * advice-block
 */
.advice-block {
  position: relative;
  width: calc(350 * var(--rem));
  margin-top: calc(40 * var(--rem));
  margin-inline: auto;
  padding: calc(25 * var(--rem));
  background: #FCFBE7;
  border-radius: calc(5 * var(--rem));
  &::before {
    content: '';
    position: absolute;
    top: calc(13 * var(--rem));
    right: calc(9 * var(--rem));
    width: calc(75 * var(--rem));
    height: calc(45 * var(--rem));
    background: url(../img/text_1.svg) no-repeat center / contain;
  }
}
.advice-block__profile {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--rem));
}
.advice-block__profile-image {
  flex-shrink: 0;
  width: calc(60 * var(--rem));
}
.advice-block__profile-body {
  padding-top: calc(4 * var(--rem));
}
.advice-block__profile-label {
  margin-bottom: calc(3 * var(--rem));
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-regular);
  line-height: calc(16 / 12);
}
.advice-block__profile-name {
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-regular);
  line-height: calc(18 / 12);
  .--bold {
    font-weight: var(--font-bold);
  }
}
.advice-block__body__container {
  position: relative;
  margin-top: calc(12 * var(--rem));
  &::before {
    content: '';
    position: absolute;
    top: calc(-17 * var(--rem));
    left: calc(48 * var(--rem));
    width: calc(28 * var(--rem));
    height: calc(28 * var(--rem));
    background: url(../img/icon_balloon.png) no-repeat center / 100% auto;
  }
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(63 * var(--rem));
    width: calc(10 * var(--rem));
    height: 1px;
    background: #fff;
  }
}
.advice-block__body {
  position: relative;
  width: 100%;
  padding-top: calc(13 * var(--rem));
  padding-inline: calc(15 * var(--rem));
  padding-bottom: calc(8 * var(--rem));
  background: #fff;
  border: 1px solid #EBEBB8;
  border-radius: calc(5 * var(--rem));
}
.advice-block__body-text {
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-regular);
  line-height: calc(20 / 12);
}


.project-swiper {
  .swiper-slide,
  .swiper-slide img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }
  .swiper-slide {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  /* pagination */
  --swiper-pagination-bullet-horizontal-gap: calc(10 * var(--rem));
  --swiper-pagination-bullet-width: calc(6 * var(--rem));
  --swiper-pagination-bullet-height: calc(6 * var(--rem));
  --swiper-pagination-bullet-inactive-color: var(--color-green);
  --swiper-pagination-bullet-inactive-opacity: 0.3;
  --swiper-pagination-color: var(--color-green);
  .swiper-pagination {
    display: flex;
    justify-content: center;
  }
  .swiper-pagination-bullet {
    display: block;
  }
  /* navigation */
  --swiper-navigation-size: calc(36 * var(--rem));
  .swiper-button-next,
  .swiper-button-prev {
    width: var(--swiper-navigation-size);
    z-index: 10 !important;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
  }
  .swiper-button-prev {
    left: calc(15 * var(--rem));
  }
  .swiper-button-next {
    right: calc(15 * var(--rem));
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/icon_navigation.png) no-repeat center / contain;
  }
  .swiper-button-prev:after {
    rotate: 180deg;
  }
  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: calc(0 * var(--rem));
  }
}


/**
 * ingredients-slider
 */
.ingredients-slider {
  margin-top: calc(24 * var(--rem));
  padding-bottom: calc(21 * var(--rem));
  .swiper-button-prev {
    left: calc(12 * var(--rem));
  }
  .swiper-button-next {
    right: calc(12 * var(--rem));
  }
}
.ingredients-slider-item {
  width: calc(320 * var(--rem));
  height: auto;
  margin-inline: calc(5 * var(--rem));
  padding-top: calc(10 * var(--rem));
  padding-inline: calc(15 * var(--rem));
  padding-bottom: calc(15 * var(--rem));
  background: #FCFCED;
  border-radius: calc(5 * var(--rem));
}
.ingredients-slider-item__head {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--rem));
}
.ingredients-slider-item__head-image {
  flex-shrink: 0;
  width: calc(70 * var(--rem));
}
.ingredients-slider-item__head-label {
  font-size: calc(12 * var(--rem));
  letter-spacing: 0;
  .en {
    margin-right: calc(8 * var(--rem));
    font-family: var(--lp-font-caveat);
    font-size: calc(26 * var(--rem));
    font-weight: var(--font-regular);
    letter-spacing: 0;
  }
}
.ingredients-slider-item__body {
  width: calc(290 * var(--rem));
  margin-top: calc(8 * var(--rem));
  margin-inline: auto;
}
.ingredients-slider-item__body-text {
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-regular);
  line-height: calc(21 / 12);
}
.ingredients-slider-item__body-note {
  font-size: calc(11 * var(--rem));
  font-weight: var(--font-regular);
  line-height: calc(21 / 12);
}


/**
 * items-slider
 */
.items-slider {
  margin-top: calc(23 * var(--rem));
  padding-bottom: calc(23 * var(--rem));
  background: url(../img/img_plate_1.png?v=2) no-repeat top calc(50 * var(--rem)) center / calc(324 * var(--rem)) auto;
  .swiper-button-next,
  .swiper-button-prev {
    top: calc(162 * var(--rem));
    margin-top: 0;
  }
}
.items-slider-item {
  width: calc(250 * var(--rem));
  height: auto;
  margin-inline: calc(15 * var(--rem));
}
.items-slider-item__head {
  margin-bottom: calc(4 * var(--rem));
  text-align: center;
}
.items-slider-item__head-en {
  font-family: var(--lp-font-caveat);
  font-size: calc(26 * var(--rem));
  font-weight: var(--font-regular);
  line-height: 1;
  letter-spacing: 0;
}
.items-slider-item__head-ja {
  font-size: calc(11 * var(--rem));
  line-height: calc(24 / 11);
  letter-spacing: 0;
}
.items-slider-item__image {
  width: 100%;
}
.items-slider-item__body {
  margin-top: calc(18 * var(--rem));
}
.items-slider-item__text {
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-regular);
  line-height: calc(21 / 13);
  .--small {
    font-size: calc(11 * var(--rem));
  }
}
.items-slider-item__label {
  margin-top: calc(12 * var(--rem));
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(18 / 12);
}
.items-slider-item__name {
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-regular);
  line-height: calc(18 / 12);
  letter-spacing: .02em;
}
.items-slider-item__detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(6 * var(--rem));
}
.items-slider-item__price {
  margin-top: calc(-3 * var(--rem));
  font-size: calc(11 * var(--rem));
  font-weight: var(--font-regular);
  .--em {
    font-family: var(--lp-font-trade-gothic);
    font-size: calc(18 * var(--rem));
    font-weight: var(--font-bold);
  }
}
.items-slider-item__button {
  --width: calc(100 * var(--rem));
  --height: calc(30 * var(--rem));
  .modal-inner-care & {
    --button-color: #EED16E;
  }
  .modal-skin-care & {
    --button-color: #F4C483;
  }
  .component-button {
    font-family: var(--lp-font-trade-gothic);
  }
}


/**
 * project-mainvisual
 */
.project-mainvisual__image {
  width: 100%;
}


/**
 * section-lead
 */
.section-lead {
  --ticker-color: #D7E59A;
  position: relative;
  padding-top: calc(55 * var(--rem));
  padding-bottom: calc(113 * var(--rem));
  background: var(--lp-background-color);
  .component-ticker__container {
    position: absolute;
    bottom: calc(-5 * var(--rem));
    left: 0;
    width: 100%;
  }
}
.section-lead__text {
  font-size: calc(15 * var(--rem));
  line-height: calc(35 / 15);
  text-align: center;
  & + & {
    margin-top: calc(16 * var(--rem));
  }
}

.component-deco {
  position: absolute;
  z-index: var(--z-index, 0);
  width: calc(var(--width) * var(--rem));
  height: calc(var(--height) * var(--rem));
  background: var(--image-src) no-repeat center / 100% auto;
  transition: transform 1s;
  will-change: transform;
  pointer-events: none;
}
.component-deco--1 {
  top: calc(16 * var(--rem));
  left: calc(23 * var(--rem));
}
.component-deco--2 {
  top: calc(138 * var(--rem));
  left: 0;
}
.component-deco--3 {
  top: calc(49 * var(--rem));
  left: calc(287 * var(--rem));
}
.component-deco--4 {
  top: calc(239 * var(--rem));
  right: calc(5 * var(--rem));
}
.component-deco--5 {
  top: calc(342 * var(--rem));
  left: calc(7 * var(--rem));
}
.component-deco--6 {
  top: calc(371 * var(--rem));
  left: calc(307 * var(--rem));
}


/**
 * section-index
 */
.section-index {
  padding-top: calc(55 * var(--rem));
  padding-bottom: calc(60 * var(--rem));
  background: var(--color-green-accent);
}
.section-index__heading {
  margin-bottom: calc(27 * var(--rem));
  font-size: calc(16 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(34 / 32);
  text-align: center;
  > span {
    display: inline-block;
    letter-spacing: .1em;
  }
  .--middle {
    font-size: calc(20 * var(--rem));
    letter-spacing: .1em;
  }
  .en {
    font-family: var(--lp-font-trade-gothic);
    font-size: calc(22 * var(--rem));
    letter-spacing: .05em;
  }
  .num {
    font-size: calc(32 * var(--rem));
  }
}


/**
 * index-list
 */
.index-list {
  width: calc(350 * var(--rem));
  margin-inline: auto;
}
.index-list__item {
  position: relative;
  display: flex;
  width: 100%;
  height: calc(140 * var(--rem));
  padding-left: calc(25 * var(--rem));
  background: #fff;
  border-radius: calc(5 * var(--rem));
  & + & {
    margin-top: calc(8 * var(--rem));
  }
}
.index-list__body {
  position: relative;
  z-index: 1;
  padding-top: calc(20 * var(--rem));
}
.index-list__label {
  margin-top: calc(5 * var(--rem));
  font-size: calc(22 * var(--rem));
  font-weight: var(--font-semibold);
  line-height: 1;
}
.index-list__text {
  margin-top: calc(12 * var(--rem));
  font-size: calc(13 * var(--rem));
  line-height: calc(24 / 15);
  .--middle {
    font-size: calc(14 * var(--rem));
  }
  .--large {
    font-size: calc(16 * var(--rem));
  }
}
.index-list__image {
  position: absolute;
  top: 0;
  right: calc(10 * var(--rem));
  width: calc(200 * var(--rem));
}

.component-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tag-width, calc(50 * var(--rem)));
  height: var(--tag-height, calc(16 * var(--rem)));
  border-radius: calc(99 * var(--rem));
  background: var(--tag-color);
  color: #fff;
  font-family: var(--lp-font-trade-gothic);
  font-size: var(--tag-font-size, calc(13 * var(--rem)));
  font-weight: var(--font-bold);
}
.component-step-label {
  color: var(--step-label-color);
  font-family: var(--lp-font-trade-gothic);
}
.--step1 {
  --tag-color: #EBDD68;
  --step-label-color: #EBDD68;
}
.--step2 {
  --tag-color: #EED16E;
  --step-label-color: #EED16E;
}
.--step3 {
  --tag-color: #F4C483;
  --step-label-color: #F4C483;
}


/**
 * section-anchor
 */
.section-anchor {
  --blink-text-color: var(--color-green);
  --blink-text-size: calc(32 * var(--rem));
  padding-top: calc(55 * var(--rem));
  padding-bottom: calc(62 * var(--rem));
  background: var(--color-green-light);
  .blink-text__container {
    margin-bottom: calc(31 * var(--rem));
  }
  .blink-text {
    letter-spacing: .02em;
  }
}


/**
 * blink-text
 */
.blink-text__container {
  display: flex;
  justify-content: center;
}
.blink-text {
  display: inline-block;
  color: var(--blink-text-color);
  font-family: var(--lp-font-trade-gothic);
  font-size: var(--blink-text-size);
  font-weight: var(--font-bold);
  line-height: 1;
  letter-spacing: .05em;
  animation: var(--total-duration) infinite linear strokeBlink;
  animation-delay: var(--delay);
  -webkit-text-stroke: 1px transparent;
  paint-order: stroke;
}
@keyframes strokeBlink {
  0% {
    color: var(--blink-text-color);
    -webkit-text-stroke: 1px transparent;
  }
  2% {
    color: transparent;
    -webkit-text-stroke: 1px var(--blink-text-color);
  }
  8% {
    color: var(--blink-text-color);
    -webkit-text-stroke: 1px transparent;
  }
  100% {
    color: var(--blink-text-color);
    -webkit-text-stroke: 1px transparent;
  }
}


/**
 * anchor-block
 */
.anchor-block {
  & + & {
    margin-top: calc(42 * var(--rem));
  }
}
.anchor-block__heading {
  margin-bottom: calc(19 * var(--rem));
  font-size: calc(20 * var(--rem));
  font-weight: var(--font-semibold);
  line-height: calc(28 / 20);
  text-align: center;
}


/**
 * anchor-box
 */
.anchor-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(10 * var(--rem));
}
.anchor-box__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(170 * var(--rem));
  height: calc(80 * var(--rem));
  padding-left: calc(18 * var(--rem));
  background: #fff;
  border: 1px solid #E8EFD2;
  border-radius: calc(5 * var(--rem));
}
.anchor-box__text {
  position: relative;
  z-index: 1;
  font-size: calc(14 * var(--rem));
}
.anchor-box__image {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(90 * var(--rem));
}


/**
 * anchor-circle
 */
.anchor-circle__container {
  width: fit-content;
  padding-right: calc(20 * var(--rem));
}
.anchor-circle {
  display: flex;
  gap: calc(8 * var(--rem));
  & + & {
    margin-top: calc(15 * var(--rem));
  }
}
.anchor-circle__link {
  display: block;
  width: calc(76 * var(--rem));
}
.anchor-circle__image {
  width: 100%;
}
.anchor-circle__label {
  margin-top: calc(9 * var(--rem));
  font-size: calc(12 * var(--rem));
  line-height: 1;
  text-align: center;
}


/**
 * project-section
 */
.project-section {
  position: relative;
  padding-top: calc(85 * var(--rem));
  padding-bottom: calc(60 * var(--rem));
  background: var(--bg-color);
  .component-ticker__container {
    position: absolute;
    top: calc(41 * var(--rem));
    left: 0;
    width: 100%;
  }
}
.project-section__heading {
  position: relative;
  font-size: calc(25 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(28 / 25);
  letter-spacing: .1em;
  text-align: center;
}
.project-section__lead {
  margin-top: calc(20 * var(--rem));
  margin-inline: calc(20 * var(--rem));
  font-size: calc(14 * var(--rem));
  line-height: calc(24 / 14);
}
.project-section__plate {
  position: relative;
  width: calc(390 * var(--rem));
  margin-top: calc(28 * var(--rem));
  margin-inline: auto;
  .component-link-point {
    position: absolute;
  }
}
.project-section__skin-care {
  position: relative;
  width: calc(410 * var(--rem));
  margin-top: calc(-11 * var(--rem));
  margin-inline: calc(-10 * var(--rem));
  .component-link-point {
    position: absolute;
  }
}
.project-section__button {
  margin-top: calc(10 * var(--rem));
}


/**
 * section-dry-skin
 */
.section-dry-skin,
.section-sensitive-skin {
  --bg-color: var(--color-yellow-light);
  --ticker-color: var(--color-yellow-accent);
  --button-color: var(--color-yellow);
  .component-ticker__text {
    font-size: calc(55 * var(--rem));
  }
}
.section-dry-skin__plate-trigger--1 {
  top: calc(154 * var(--rem));
  left: calc(118 * var(--rem));
}
.section-dry-skin__plate-trigger--2 {
  top: calc(122 * var(--rem));
  left: calc(245 * var(--rem));
}
.section-dry-skin__plate-trigger--3 {
  top: calc(240 * var(--rem));
  left: calc(126 * var(--rem));
}
.section-dry-skin__plate-trigger--4 {
  top: calc(195 * var(--rem));
  left: calc(197 * var(--rem));
}
.section-dry-skin__plate-trigger--5 {
  top: calc(246 * var(--rem));
  left: calc(261 * var(--rem));
}
.section-dry-skin__skin-care-trigger--1 {
  top: calc(280 * var(--rem));
  left: calc(76 * var(--rem));
}
.section-dry-skin__skin-care-trigger--2 {
  top: calc(202 * var(--rem));
  left: calc(177 * var(--rem));
}
.section-dry-skin__skin-care-trigger--3 {
  top: calc(257 * var(--rem));
  left: calc(320 * var(--rem));
}


/**
 * section-clear-skin
 */
.section-clear-skin,
.section-oily-skin {
  --bg-color: var(--color-orange-light);
  --ticker-color: var(--color-orange-accent);
  --button-color: var(--color-orange);
  .component-ticker__text {
    font-size: calc(55 * var(--rem));
  }
}
.section-clear-skin__plate-trigger--1 {
  top: calc(306 * var(--rem));
  left: calc(73 * var(--rem));
}
.section-clear-skin__plate-trigger--2 {
  top: calc(215 * var(--rem));
  left: calc(145 * var(--rem));
}
.section-clear-skin__plate-trigger--3 {
  top: calc(121 * var(--rem));
  left: calc(127 * var(--rem));
}
.section-clear-skin__plate-trigger--4 {
  top: calc(121 * var(--rem));
  left: calc(237 * var(--rem));
}
.section-clear-skin__plate-trigger--5 {
  top: calc(235 * var(--rem));
  left: calc(261 * var(--rem));
}
.section-clear-skin__skin-care-trigger--1 {
  top: calc(138 * var(--rem));
  left: calc(165 * var(--rem));
}
.section-clear-skin__skin-care-trigger--2 {
  top: calc(270 * var(--rem));
  left: calc(102 * var(--rem));
}
.section-clear-skin__skin-care-trigger--3 {
  top: calc(305 * var(--rem));
  left: calc(316 * var(--rem));
}


/**
 * section-sensitive-skin
 */
.section-sensitive-skin__plate-trigger--1 {
  top: calc(293 * var(--rem));
  left: calc(296 * var(--rem));
}
.section-sensitive-skin__plate-trigger--2 {
  top: calc(108 * var(--rem));
  left: calc(243 * var(--rem));
}
.section-sensitive-skin__plate-trigger--3 {
  top: calc(218 * var(--rem));
  left: calc(259 * var(--rem));
}
.section-sensitive-skin__plate-trigger--4 {
  top: calc(230 * var(--rem));
  left: calc(73 * var(--rem));
}
.section-sensitive-skin__plate-trigger--5 {
  top: calc(152 * var(--rem));
  left: calc(153 * var(--rem));
}
.section-sensitive-skin__skin-care-trigger--1 {
  top: calc(249 * var(--rem));
  left: calc(300 * var(--rem));
}
.section-sensitive-skin__skin-care-trigger--2 {
  top: calc(186 * var(--rem));
  left: calc(153 * var(--rem));
}
.section-sensitive-skin__skin-care-trigger--3 {
  top: calc(327 * var(--rem));
  left: calc(114 * var(--rem));
}


/**
 * section-oily-skin
 */
.section-oily-skin__plate-trigger--1 {
  top: calc(119 * var(--rem));
  left: calc(241 * var(--rem));
}
.section-oily-skin__plate-trigger--2 {
  top: calc(178 * var(--rem));
  left: calc(209 * var(--rem));
}
.section-oily-skin__plate-trigger--3 {
  top: calc(152 * var(--rem));
  left: calc(128 * var(--rem));
}
.section-oily-skin__plate-trigger--4 {
  top: calc(194 * var(--rem));
  left: calc(294 * var(--rem));
}
.section-oily-skin__plate-trigger--5 {
  top: calc(265 * var(--rem));
  left: calc(171 * var(--rem));
}
.section-oily-skin__skin-care-trigger--1 {
  top: calc(178 * var(--rem));
  left: calc(148 * var(--rem));
}
.section-oily-skin__skin-care-trigger--2 {
  top: calc(321 * var(--rem));
  left: calc(86 * var(--rem));
}
.section-oily-skin__skin-care-trigger--3 {
  top: calc(279 * var(--rem));
  left: calc(307 * var(--rem));
}


/**
 * section-bottom
 */
.section-bottom {
  padding-block: calc(60 * var(--rem));
  padding-inline: calc(20 * var(--rem));
  background: var(--lp-background-color);
}


/**
 * diagnosis-block
 */
.diagnosis-block {
  padding-top: calc(36 * var(--rem));
  padding-bottom: calc(99 * var(--rem));
  background: #F4F8E5 url(../img/diagnosis_block_bg.png) no-repeat center bottom / 100% auto;
  border-radius: calc(10 * var(--rem));
}
.diagnosis-block__label {
  font-family: var(--lp-font-noto);
  font-size: calc(16 * var(--rem));
  line-height: calc(24 / 16);
  text-align: center;
}
.diagnosis-block__text {
  margin-top: calc(14 * var(--rem));
  font-size: calc(14 * var(--rem));
  line-height: calc(24 / 14);
  text-align: center;
}
.diagnosis-block__button {
  --width: calc(230 * var(--rem));
  --height: calc(40 * var(--rem));
  --button-color: #fff;
  --text-color: #549A33;
  margin-top: calc(19 * var(--rem));
  .component-button--arrow {
    border: 1px solid currentColor;
    font-size: calc(13 * var(--rem));
    &::after {
      right: calc(17 * var(--rem));
      width: calc(5 * var(--rem));
      height: calc(10 * var(--rem));
    }
  }
}


/**
 * supervision-block
 */
.supervision-block {
  margin-top: calc(60 * var(--rem));
  padding-top: calc(21 * var(--rem));
  padding-inline: calc(23 * var(--rem));
  padding-bottom: calc(19 * var(--rem));
  background: #FFFEEF;
  border: 2px solid #EFEED8;
  border-radius: calc(5 * var(--rem));
}
.supervision-block__heading {
  margin-bottom: calc(7 * var(--rem));
  font-size: calc(14 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(20 / 14);
  text-align: center;
}
.supervision-box {
  & + & {
    margin-top: calc(15 * var(--rem));
    padding-top: calc(18 * var(--rem));
    border-top: 1px solid #EAE8D3;
  }
  .advice-block__profile-label {
    margin-bottom: calc(5 * var(--rem));
    font-size: calc(11 * var(--rem));
    line-height: calc(16 / 11);
  }
  .advice-block__profile-name {
    font-size: calc(11 * var(--rem));
    line-height: calc(18 / 11);
  }
}
.supervision-box__text {
  margin-top: calc(8 * var(--rem));
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-regular);
  line-height: calc(20 / 12);
}


/**
 * banner-block
 */
.banner-block {
  width: 100%;
  margin-top: calc(60 * var(--rem));
}


/**
 * project-footer-nav
 */
.project-footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  opacity: 0;
  translate: 0 100%;
  transition: opacity 0.6s .2s ease, translate 0.6s .2s ease;
  will-change: opacity, translate;
  &.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}
.footer-nav {
  display: flex;
}
.footer-nav__item {
  width: calc(100% / 4);
  & + & {
    border-left: 1px solid #EDEDD2;
  }
}
.footer-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(50 * var(--rem));
  background: #FFFDEB;
  font-size: calc(13 * var(--rem));
  letter-spacing: .02em;
}


/**
 * project-logo-box
 */
.project-logo-box {
  text-align: center;
}
.project-logo-box__main {
  color: var(--color-green);
  font-family: var(--lp-font-trade-gothic);
  font-size: calc(76 * var(--rem-pc));
  font-weight: var(--font-bold);
  line-height: calc(92 / 76);
  letter-spacing: 0;
}
.project-logo-box__sub {
  font-size: calc(20 * var(--rem-pc));
  font-weight: var(--font-bold);
  letter-spacing: .1em;
}


/**
 * project-nemu
 */
.project-nemu {
  --blink-text-color: var(--color-green);
  --blink-text-size: calc(32 * var(--rem-pc));
  .blink-text__container {
    margin-bottom: calc(25 * var(--rem-pc));
  }
  .anchor-block__heading {
    margin-bottom: calc(20 * var(--rem-pc));
    font-size: calc(20 * var(--rem-pc));
  }
  .anchor-box {
    gap: calc(10 * var(--rem-pc));
    width: calc(350 * var(--rem-pc));
  }
  .anchor-box__link {
    width: calc(170 * var(--rem-pc));
    height: calc(80 * var(--rem-pc));
  }
  .anchor-box__text {
    font-size: calc(14 * var(--rem-pc));
  }
  .anchor-box__image {
    width: calc(90 * var(--rem-pc));
  }
}


/* ===================
  Share
=================== */
#share {
  transition: bottom 0.6s 0.2s ease;
  .footer-nav-visible & {
    bottom: calc(2% + calc(50 * var(--rem)));
  }
}



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

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


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