@charset "UTF-8";

:root {
  --pw: 1440;
  --sw: 390;
  --artboard-pw: 500;
  --artboard-sw: 390;
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
  --ratio: 1;
  --variable: calc(100vw / var(--sw));
}

@media (min-width: 769px) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}

@media (min-width: 1441px) {
  :root {
    --variable: 1px;
  }
}

.p-feature {
  --base-font-color: #212121;
  --color-primary: #c70016;
  --color-secondary: #975f2c;
  --color-tertiary: #7e270e;
  --color-sub: #888;
  --color-voice: #999;
  --color-bg: #f6f5f0;
  --color-bg-brown: #efebe3;
  --color-bg-pink: #f7eeed;
  --color-bg-pink-dark: #f9ebe9;
  --color-bg-campaign: #edd7d1;
  --color-bg-gift: #e7c6bf;
  --color-bg-campaign-label: #ebdbd9;

  --lp-font-ja: "Zen Maru Gothic", hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 游ゴシック, "Yu Gothic", メイリオ, Meiryo, sans-serif;
  --lp-font-en: "Jost", Verdana, Helvetica, Arial, sans-serif;
  --lp-font-display: "freight-neo-pro", "Jost", Verdana, Helvetica, Arial, sans-serif;
  --lp-font-bracket: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);
  --letter-spacing: .02em;

  --z-base: 1;
  --z-sticky: 10;
  --z-modal-overlay: 1000;
  --z-modal: 1010;
}

.lp_contents {
  position: relative;
  font-family: var(--lp-font-ja);
  color: var(--base-font-color, #000);
  font-style: normal;
  letter-spacing: var(--letter-spacing);
  background-color: var(--color-bg);

  & * {
    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, b) {
    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), border-color var(--duration) var(--timing);
  }

  & :where(a) {
    color: inherit;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }

  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  & a:focus-visible,
  & button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

#footer,
footer,
#FooterWrap {
  position: relative;
  z-index: 2;
}

.lp_contents {
  & .u-d-lg {
    @media (max-width: 768px) {
      display: none !important;
    }
  }

  & .u-d-md {
    @media (min-width: 769px) {
      display: none !important;
    }
  }
}

.lp_contents {
  & .ani-fatten {
    transform-origin: 50% 100%;
    animation: lp-fatten 4s ease-in-out infinite;
  }

  & .ani-blink {
    animation: lp-blink 2.4s ease-in-out infinite;
  }

}

@keyframes lp-fatten {
  0%,
  100% {
    scale: 1 1;
  }

  50% {
    scale: 1.15 1;
  }
}

@keyframes lp-blink {
  0%,
  100% {
    opacity: 1;
    scale: 1;
  }

  50% {
    opacity: .25;
    scale: .8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents .ani-fatten {
    animation: none;
  }

  .lp_contents .ani-blink {
    animation: none;
  }
}

.lp_contents {
  & .accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--transition-timing);
  }
}

.lp_contents {
  & .layout-columns {
    @media (min-width: 769px) {
      display: grid;
    }

    &.layout-columns--col-3 {
      @media (min-width: 769px) {
        grid-template-columns: 1fr calc(var(--artboard-pw) * var(--rem-pc)) 1fr;
      }
    }
  }

  & .layout-rail {
    display: none;

    @media (min-width: 769px) {
      position: sticky;
      top: 0;
      z-index: var(--z-sticky);
      display: grid;
      place-items: center;
      height: 100dvh;
      padding-top: var(--header-height, 0px);
    }
  }

  & .layout-primary {
    min-width: 0;
    overflow-x: clip;
  }

  & .layout-inner {
    display: flow-root;
    width: calc(var(--artboard-sw) * var(--rem));
    margin-inline: auto;
    padding-bottom: calc(70 * var(--rem));
  }

  @media (min-width: 769px) {
    background-color: var(--color-bg-brown);

    & .layout-primary {
      background-color: var(--color-bg);
    }
  }
}

.lp_contents {
  & .component-en {
    font-family: var(--lp-font-en);
    font-weight: 500;
  }

  & .component-mark {
    font-size: .645em;
    vertical-align: super;
  }

  & .component-note {
    font-size: calc(11 * var(--rem));
    line-height: 1.5;
    color: var(--color-sub);
    text-align: center;
    white-space: nowrap;
  }

  & .component-note--light {
    width: 100%;
    color: #fff;
    text-align: right;
  }

  & .component-bracket {
    font-family: var(--lp-font-bracket);
    font-weight: 100;
  }

  & .component-button {
    transition: background-color var(--duration, .3s) var(--timing, ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(150 * var(--rem));
    height: calc(36 * var(--rem));
    background-color: #000;
    font-size: calc(15 * var(--rem));
    line-height: 2;
    color: #fff;
    text-align: center;
    white-space: nowrap;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-primary);
        opacity: 1;
      }
    }
  }

  & .component-button--wide {
    width: calc(250 * var(--rem));
    height: calc(40 * var(--rem));
  }

  & .component-button--small {
    height: calc(30 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 1;
  }

  & .component-photo {
    width: calc(200 * var(--rem));
    background-color: #fff;

    & a {
      display: block;
    }
  }

  & .component-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(4 * var(--rem));
    font-family: var(--lp-font-display);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

  & .component-price__off {
    font-size: calc(20 * var(--rem));
    letter-spacing: .02em;
  }

  & .component-price__rate {
    color: var(--color-primary);
  }

  & .component-price__rate-unit {
    font-size: calc(16 * var(--rem));
  }

  & .component-price__before {
    text-decoration: line-through;
  }

  & .component-price__before-label {
    font-family: var(--lp-font-ja);
    font-weight: 500;
    font-size: calc(14 * var(--rem));
  }

  & .special-price {
    color: var(--color-primary);
  }

  & .component-price__now {
    font-size: calc(32 * var(--rem));
    letter-spacing: .01em;
  }

  & .component-price__tax {
    font-size: calc(16 * var(--rem));
  }

  & .component-price--item {
    gap: calc(4 * var(--rem));

    & .component-price__before {
      font-size: calc(16 * var(--rem));
    }

    & .component-price__before-label {
      font-size: calc(11 * var(--rem));
    }

    & .component-price__now {
      font-size: calc(20 * var(--rem));
      letter-spacing: .014em;
    }

    & .component-price__tax {
      font-size: calc(14 * var(--rem));
    }
  }
}

.lp_contents {
  & .project-mv__band {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(10 * var(--rem));
    overflow: hidden;
    height: calc(52 * var(--rem));
    padding-left: calc(7 * var(--rem));
    background-color: var(--color-tertiary);
    color: #fff;
  }

  & .project-mv__term {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(98 * var(--rem));
    padding-block: calc(3 * var(--rem));
    border-top: 1px solid rgb(255 255 255 / .6);
    border-bottom: 1px solid rgb(255 255 255 / .6);
    font-family: var(--lp-font-en);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
  }

  & .project-mv__term-label {
    font-size: calc(10 * var(--rem));
    line-height: 1.6;
    letter-spacing: .08em;
  }

  & .project-mv__term-date {
    font-size: calc(10 * var(--rem));
    line-height: 1.8;
    letter-spacing: .05em;
  }

  & .project-mv__term-unit {
    font-size: calc(8 * var(--rem));
  }

  & .project-mv__offer {
    display: flex;
    align-items: flex-end;
    gap: calc(3 * var(--rem));
    font-family: var(--lp-font-display);
    font-weight: 700;
    line-height: calc(36 * var(--rem));
    white-space: nowrap;
  }

  & .project-mv__offer-figure {
    translate: 0 calc(-3 * var(--rem));
    font-size: calc(36 * var(--rem));
    font-weight: 600;
    letter-spacing: 0;
  }

  & .project-mv__offer-unit {
    vertical-align: calc(2 * var(--rem));
    font-size: calc(20 * var(--rem));
    font-weight: 700;
    line-height: 1;
  }

  & .project-mv__offer-label {
    font-size: calc(18 * var(--rem));
    letter-spacing: .05em;
  }

  & .project-mv__offer-amp {
    margin-inline: calc(2 * var(--rem));
    font-size: calc(16 * var(--rem));
    letter-spacing: .05em;
  }

  & .project-mv__note {
    position: absolute;
    top: calc(39 * var(--rem));
    right: calc(3 * var(--rem));
    font-size: calc(6 * var(--rem));
    line-height: 1.6;
    letter-spacing: .08em;
    white-space: nowrap;
  }
}

.lp_contents {
  & .project-lead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(30 * var(--rem));
    margin-top: calc(40 * var(--rem));
  }

  & .project-lead__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--rem));
    width: calc(350 * var(--rem));
  }

  & .project-lead__copy {
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    line-height: 2;
    text-align: center;
    white-space: nowrap;
  }

  & .project-lead__strong {
    font-weight: 900;
    font-size: calc(23 * var(--rem));
    color: var(--color-primary);
  }

  & .project-lead__items {
    display: flex;
    align-items: flex-end;
    gap: calc(6 * var(--rem));
  }

  & .project-lead__item--cream,
  & .project-lead__item--enzyme {
    width: calc(40 * var(--rem));
  }

  & .project-lead__item--oil {
    width: calc(36 * var(--rem));
  }

  & .project-lead__item--balm {
    width: calc(46 * var(--rem));
  }
}

.lp_contents {
  & .project-campaign {
    width: calc(370 * var(--rem));
    margin-top: calc(50 * var(--rem));
    margin-left: calc(10 * var(--rem));
    padding: calc(5 * var(--rem));
    border: 1px solid var(--color-primary);
    border-radius: calc(60 * var(--rem));
  }

  & .project-campaign__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(40 * var(--rem));
    padding: calc(44 * var(--rem)) calc(4 * var(--rem)) calc(24 * var(--rem));
    border-radius: calc(55 * var(--rem));
    background-color: var(--color-bg-campaign);
  }

  & .project-campaign__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(15 * var(--rem));
    width: calc(350 * var(--rem));
  }

  & .project-campaign__title {
    font-family: var(--lp-font-display);
    font-weight: 500;
    font-size: calc(40 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
    color: var(--color-primary);
    text-align: center;
    white-space: nowrap;
  }

  & .project-campaign__term {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(12 * var(--rem));
    width: calc(330 * var(--rem));
    padding-top: calc(7 * var(--rem));
  }

  & .project-campaign__term-label {
    position: absolute;
    top: 0;
    left: calc(85 * var(--rem));
    width: calc(159 * var(--rem));
    padding-inline: calc(10 * var(--rem));
    background-color: var(--color-bg-campaign);
    font-family: var(--lp-font-display);
    font-weight: 500;
    font-size: calc(17 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
    text-align: center;
    white-space: nowrap;
  }

  & .project-campaign__term-date {
    width: calc(300 * var(--rem));
    padding-block: calc(10 * var(--rem)) calc(15 * var(--rem));
    border-top: 1px solid rgb(33 33 33 / .38);
    border-bottom: 1px solid rgb(33 33 33 / .38);
    font-family: var(--lp-font-display);
    font-weight: 500;
    font-size: calc(22 * var(--rem));
    line-height: 1;
    letter-spacing: .045em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  & .project-campaign__term-week {
    font-size: calc(15 * var(--rem));
  }

  & .project-campaign__term-time {
    font-size: calc(18 * var(--rem));
  }

  & .project-campaign__offer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--rem));
    width: calc(350 * var(--rem));
  }

  & .project-campaign__offer-lead {
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }

  & .project-campaign__offer-figures {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & .project-campaign__offer-figure--second {
    margin-top: calc(-14 * var(--rem));
  }

  & .project-campaign__offer-figure {
    translate: 0 calc(-4 * var(--rem));
    display: flex;
    align-items: flex-end;
    gap: calc(6 * var(--rem));
    font-family: var(--lp-font-display);
    font-weight: 700;
    line-height: calc(57 * var(--rem));
    color: var(--color-primary);
    white-space: nowrap;
  }

  & .project-campaign__offer-num {
    translate: 0 calc(-6 * var(--rem));
    font-weight: 600;
    font-size: calc(57 * var(--rem));
    letter-spacing: 0;
  }

  & .project-campaign__offer-unit {
    vertical-align: calc(3 * var(--rem));
    font-weight: 700;
    font-size: calc(32 * var(--rem));
    line-height: 1;
  }

  & .project-campaign__offer-label {
    font-size: calc(28 * var(--rem));
    letter-spacing: .05em;
  }

  & .project-campaign__offer-amp {
    font-size: calc(26 * var(--rem));
    letter-spacing: .05em;
  }

  & .project-campaign__offer .component-note {
    color: inherit;
  }

  & .project-campaign__offer .component-button {
    margin-top: calc(12 * var(--rem));
  }

  & .project-campaign__gift {
    position: relative;
    width: calc(350 * var(--rem));
    padding-top: calc(43 * var(--rem));
  }

  & .project-campaign__gift-balloon {
    position: absolute;
    top: calc(-14 * var(--rem));
    left: calc(131 * var(--rem));
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(87 * var(--rem));
    height: calc(40 * var(--rem));
    background-image: url(../img/261001/bubble-more.svg);
    background-repeat: no-repeat;
    padding-bottom: calc(5 * var(--rem));
    background-size: 100% 100%;
    font-weight: 700;
    font-size: calc(16 * var(--rem));
    line-height: 1.6;
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }

  & .project-campaign__gift-body {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }

  & .project-campaign__gift-credit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--rem));
    width: calc(236 * var(--rem));
    text-align: center;
  }

  & .project-campaign__gift-lead {
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    line-height: 1.5;
    white-space: nowrap;
  }

  & .project-campaign__gift-tax {
    font-size: calc(12 * var(--rem));
  }

  & .project-campaign__gift-name {
    font-weight: 500;
    font-size: calc(20 * var(--rem));
    line-height: 1.5;
    text-decoration: underline;
    text-underline-position: from-font;
    white-space: nowrap;
  }

  & .project-campaign__gift-tail {
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    line-height: 1.5;
    white-space: nowrap;
  }

  & .project-campaign__gift-figure {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: calc(102 * var(--rem));
    height: calc(201 * var(--rem));
  }

  & .project-campaign__gift-figure::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: calc(1 * var(--rem));
    height: calc(100 * var(--rem));
    border-radius: 50%;
    background-color: var(--color-bg-gift);
  }

  & .project-campaign__gift-image {
    position: absolute;
    top: calc(55 * var(--rem));
    left: calc(13 * var(--rem));
    width: calc(50 * var(--rem));
    rotate: 12.15deg;
  }

  & .project-campaign__gift-price {
    position: absolute;
    display: block;
    top: calc(14 * var(--rem));
    inset-inline: 0;
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(12 * var(--rem));
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
  }

  & .project-campaign__gift-amount {
    font-weight: 500;
    font-size: calc(18 * var(--rem));
  }

  & .project-campaign__gift-price .project-campaign__gift-tax {
    font-size: calc(11 * var(--rem));
  }
}

.lp_contents {
  & .project-about {
    position: relative;
    margin-top: calc(50 * var(--rem));
  }

  & .project-about__intro {
    position: relative;
    width: calc(350 * var(--rem));
    height: calc(586 * var(--rem));
    margin-left: calc(20 * var(--rem));
  }

  & .project-about__title {
    position: relative;
    width: calc(350 * var(--rem));
    height: calc(79 * var(--rem));
    font-weight: 700;
    font-size: calc(20 * var(--rem));
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--color-primary);
    text-align: center;
    white-space: nowrap;
  }

  & .project-about__title-inner {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
  }

  & .project-about__title-strong {
    font-weight: 900;
    font-size: calc(27 * var(--rem));
  }

  & .project-about__balloon {
    position: absolute;
    top: calc(99 * var(--rem));
    left: calc(22 * var(--rem));
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(165 * var(--rem));
    height: calc(74 * var(--rem));
    background-image: url(../img/261001/bubble-shimoda.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(160 * var(--rem)) calc(60 * var(--rem));
    padding-bottom: calc(10 * var(--rem));
    font-weight: 700;
    font-size: calc(15 * var(--rem));
    line-height: 1.75;
    text-align: center;
    white-space: nowrap;
    rotate: -5deg;
  }

  & .project-about__character {
    position: absolute;
    top: calc(84 * var(--rem));
    left: calc(96 * var(--rem));
    width: calc(220 * var(--rem));
  }

  & .project-about__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(30 * var(--rem));
    width: 100%;
    margin-top: calc(-332 * var(--rem));
    padding-top: calc(24 * var(--rem));
    border-radius: calc(195 * var(--rem));
    background-color: #fff;
  }

  & .project-about__expert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(15 * var(--rem));
    width: calc(330 * var(--rem));
  }

  & .project-about__expert-lead {
    width: 100%;
    font-weight: 500;
    font-size: calc(20 * var(--rem));
    line-height: 1.6;
    text-align: center;
    white-space: nowrap;
  }

  & .project-about__slash {
    color: var(--color-primary);
  }

  & .project-about__expert-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(5 * var(--rem));
    width: 100%;
  }

  & .project-about__expert-avatar {
    width: calc(100 * var(--rem));
  }

  & .project-about__expert-name {
    font-size: calc(13 * var(--rem));
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }

  & .project-about__expert-name .component-en {
    font-weight: 400;
  }

  & .project-about__profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  & .project-about__profile-trigger {
    order: 1;
    position: relative;
    display: block;
    font-family: var(--lp-font-en);
    font-size: calc(13 * var(--rem));
    line-height: 1.5;
    text-decoration: underline;
    text-underline-position: from-font;
    text-transform: uppercase;
    white-space: nowrap;
  }

  & .project-about__profile-trigger::after {
    content: "";
    position: absolute;
    inset: calc(-13 * var(--rem)) calc(-24 * var(--rem));
  }

  & .project-about__profile-label--close {
    display: none;
  }

  & .project-about__profile.is-open .project-about__profile-label {
    display: none;
  }

  & .project-about__profile.is-open .project-about__profile-label--close {
    display: inline;
  }

  & .project-about__profile-sign::before {
    content: "\00a0+";
  }

  & .project-about__profile.is-open .project-about__profile-sign::before {
    content: "\00a0−";
  }

  & .project-about__profile-text {
    padding-block: calc(10 * var(--rem));
    font-size: calc(13 * var(--rem));
    line-height: 1.5;
  }

  & .project-about__detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(40 * var(--rem));
    width: 100%;
  }

  & .project-about__compare {
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--rem));
    width: calc(330 * var(--rem));
  }

  & .project-about__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(15 * var(--rem));
    padding: calc(20 * var(--rem));
    border-radius: calc(10 * var(--rem));
    text-align: center;
  }

  & .project-about__card--thin {
    background-color: var(--color-bg-brown);
  }

  & .project-about__card--fat {
    background-color: var(--color-bg-pink);
  }

  & .project-about__card-title {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: calc(8 * var(--rem));
    font-size: calc(22 * var(--rem));
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
  }

  & .project-about__card-name {
    font-size: calc(22 * var(--rem));
  }

  & .project-about__card-suffix {
    font-size: calc(16 * var(--rem));
  }

  & .project-about__card--thin .project-about__card-title {
    color: var(--color-tertiary);
  }

  & .project-about__card--thin .project-about__card-name,
  & .project-about__card--thin .project-about__card-suffix {
    color: var(--color-secondary);
  }

  & .project-about__card--fat .project-about__card-title {
    color: var(--color-primary);
  }

  & .project-about__card--fat .project-about__card-name,
  & .project-about__card--fat .project-about__card-suffix {
    font-weight: 900;
  }

  & .project-about__card-text {
    width: calc(290 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 2;
    white-space: nowrap;

    & b {
      font-weight: 700;
    }
  }

  & .project-about__card-example {
    font-size: calc(14 * var(--rem));
    line-height: .9;
    white-space: nowrap;
  }

  & .project-about__card-answer {
    font-size: calc(19 * var(--rem));
    line-height: .9;
    white-space: nowrap;
  }

  & .project-about__card--thin .project-about__card-answer {
    color: var(--color-secondary);
  }

  & .project-about__card--fat .project-about__card-answer {
    font-weight: 700;
    color: var(--color-primary);
  }

  & .project-about__bridge {
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    line-height: 2;
    text-align: center;
    white-space: nowrap;
  }

  & .project-about__bridge-accent {
    color: var(--color-primary);
  }

  & .project-about__bridge-strong {
    font-weight: 900;
    font-size: calc(20 * var(--rem));
    color: var(--color-primary);
  }

  & .project-about__method {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem));
    width: 100%;
    padding: calc(60 * var(--rem)) calc(30 * var(--rem));
    border-radius: calc(150 * var(--rem));
    background-image: url(../img/261001/method-bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% calc(508 * var(--rem));
  }

  & .project-about__spark {
    position: absolute;
  }

  & .project-about__spark--1 {
    top: calc(208 * var(--rem));
    right: calc(8 * var(--rem));
    width: calc(35 * var(--rem));
  }

  & .project-about__spark--2 {
    top: calc(385 * var(--rem));
    left: calc(38 * var(--rem));
    width: calc(36 * var(--rem));
    animation-delay: .8s;
  }

  & .project-about__spark--3 {
    top: calc(54 * var(--rem));
    left: calc(69 * var(--rem));
    width: calc(18 * var(--rem));
    animation-delay: 1.6s;
  }

  & .project-about__method-title {
    position: relative;
    width: calc(255 * var(--rem));
    height: calc(73 * var(--rem));
    font-weight: 700;
    font-size: calc(24 * var(--rem));
    line-height: 1.4;
    letter-spacing: .02em;
    color: var(--color-primary);
    text-align: center;
    white-space: nowrap;
  }

  & .project-about__method-title::before {
    content: "";
    position: absolute;
    top: calc(58 * var(--rem));
    right: calc(-23 * var(--rem));
    left: calc(-23 * var(--rem));
    height: calc(15 * var(--rem));
    border-radius: calc(999 * var(--rem));
    background-image: linear-gradient(90deg, #f7eeed, #f6e0de);
    mix-blend-mode: multiply;
  }

  & .project-about__method-title-inner {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
  }

  & .project-about__method-title-strong {
    position: relative;
    font-weight: 900;
    font-size: calc(27 * var(--rem));
  }

  & .project-about__method-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--rem));
    width: 100%;
  }

  & .project-about__method-text {
    font-weight: 500;
    font-size: calc(15 * var(--rem));
    line-height: 2;
    text-align: center;
    white-space: nowrap;
  }

  & .project-about__method-lead {
    font-weight: 700;
    font-size: calc(18 * var(--rem));
    line-height: 2;
    letter-spacing: .015em;
    color: var(--color-primary);
    text-align: center;
    white-space: nowrap;
  }

  & .project-about__method-lead-strong {
    font-weight: 900;
    font-size: calc(22 * var(--rem));
  }
}

.lp_contents {
  & .project-types {
    margin-top: calc(70 * var(--rem));
    padding-bottom: calc(61 * var(--rem));
    background-image: linear-gradient(to bottom, rgb(126 39 14 / 0) calc(62 * var(--rem)), var(--color-tertiary) calc(62 * var(--rem)));
  }

  & .project-types__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(20 * var(--rem));
    width: calc(350 * var(--rem));
    margin-left: calc(20 * var(--rem));
  }

  & .project-types__heading {
    position: relative;
    width: 100%;
    height: calc(140 * var(--rem));
  }

  & .project-types__heading-balloon {
    position: absolute;
    top: 0;
    left: calc(33 * var(--rem));
    width: calc(280 * var(--rem));
  }

  & .project-types__title {
    position: absolute;
    top: calc(25 * var(--rem));
    left: 0;
    width: 100%;
    font-weight: 700;
    font-size: calc(20 * var(--rem));
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--color-secondary);
    text-align: center;
    white-space: nowrap;
  }

  & .project-types__title-strong {
    font-weight: 400;
    font-size: calc(27 * var(--rem));
  }

  & .project-types__lead {
    width: 100%;
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    line-height: 2;
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }

  & .project-types__nav {
    display: flex;
    flex-wrap: wrap;
    gap: calc(10 * var(--rem));
    width: 100%;
  }

  & .project-types__nav-link {
    position: relative;
    display: block;
    overflow: hidden;
    width: calc(170 * var(--rem));
    height: calc(56 * var(--rem));
    border-radius: calc(5 * var(--rem));
    background-color: var(--color-bg-brown);
    box-shadow: 0 0 calc(8 * var(--rem)) rgb(0 0 0 / .25);

    @media (any-hover: hover) {
      &:hover {
        background-color: #fff;
        opacity: 1;
      }
    }
  }

  & .project-types__nav-pattern {
    position: absolute;
    top: calc(-4 * var(--rem));
    left: calc(-14 * var(--rem));
    width: calc(240 * var(--rem));
  }

  & .project-types__nav-label {
    position: absolute;
    top: calc(9 * var(--rem));
    left: calc(15 * var(--rem));
    width: calc(130 * var(--rem));
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    line-height: 1.2;
    color: var(--color-tertiary);
    text-align: center;
    white-space: nowrap;
  }

  & .project-types__nav-chevron {
    position: absolute;
    top: calc(25 * var(--rem));
    left: calc(147 * var(--rem));
    width: calc(9 * var(--rem));
    height: auto;
    color: var(--color-tertiary);
  }
}

.lp_contents {
  & .section-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: calc(60 * var(--rem));
    border-radius: calc(50 * var(--rem));
    background-color: #fff;
    box-shadow: 0 0 calc(10 * var(--rem)) rgb(0 0 0 / .12);
  }

  & .section-type__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(30 * var(--rem));
    width: calc(350 * var(--rem));
    padding-top: calc(30 * var(--rem));
  }

  & .section-type__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem));
    width: 100%;
  }

  & .section-type__badge {
    position: relative;
    overflow: hidden;
    width: calc(280 * var(--rem));
    height: calc(44 * var(--rem));
    border-radius: calc(60 * var(--rem));
    background-color: var(--color-bg-brown);
  }

  & .section-type__badge-pattern {
    position: absolute;
    top: calc(-4 * var(--rem));
    left: calc(-8 * var(--rem));
    width: calc(300 * var(--rem));
  }

  & .section-type__badge-label {
    position: absolute;
    top: calc(9 * var(--rem));
    left: 0;
    width: 100%;
    font-weight: 700;
    font-size: calc(20 * var(--rem));
    line-height: 1.2;
    color: var(--color-tertiary);
    text-align: center;
    white-space: nowrap;
  }

  & .section-type__voice {
    font-weight: 700;
    font-size: calc(17 * var(--rem));
    line-height: 1.75;
    color: var(--color-voice);
    text-align: center;
    white-space: nowrap;
  }

  & .section-type__voice--dry {
    color: #9d9b97;
  }

  & .section-type__point {
    position: relative;
    padding: calc(4 * var(--rem)) calc(15 * var(--rem));
    border: 1px solid var(--color-primary);
    border-radius: calc(74 * var(--rem));
    font-weight: 500;
    font-size: calc(14 * var(--rem));
    line-height: 2;
    color: var(--color-primary);
    text-align: center;
    white-space: nowrap;
  }

  & .section-type__point::after {
    content: "";
    position: absolute;
    top: calc(40 * var(--rem));
    left: calc(140 * var(--rem));
    width: calc(18 * var(--rem));
    height: 1px;
    background-color: var(--color-primary);
    rotate: -45deg;
  }

  & .section-type__buy {
    display: grid;
    grid-template-areas:
      "name name"
      "price detail";
    grid-template-columns: max-content max-content;
    align-items: center;
    justify-content: center;
    column-gap: calc(20 * var(--rem));
    row-gap: calc(15 * var(--rem));

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;

        & .component-button {
          background-color: var(--color-primary);
        }
      }
    }
  }

  & .section-type__name {
    grid-area: name;
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }

  & .section-type__buy .component-price {
    grid-area: price;
  }

  & .section-type__buy .component-button {
    grid-area: detail;
  }

  & .section-type__tips {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--rem));
    width: calc(350 * var(--rem));
    padding: calc(20 * var(--rem)) calc(10 * var(--rem));
    border-radius: calc(10 * var(--rem));
    background-color: var(--color-bg-pink-dark);
  }

  & .section-type__tips-title {
    font-weight: 500;
    font-size: calc(18 * var(--rem));
    line-height: 1.2;
    letter-spacing: .08em;
    color: var(--color-primary);
    text-align: center;
    white-space: nowrap;
  }

  & .section-type__tips-text {
    width: calc(330 * var(--rem));
    font-weight: 500;
    font-size: calc(15 * var(--rem));
    line-height: 1.75;
    text-align: center;
    white-space: nowrap;
  }

  & .section-type__wave {
    width: 100%;
  }

  & .section-type__recommend {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: calc(10 * var(--rem)) calc(20 * var(--rem)) calc(40 * var(--rem));
    border-radius: 0 0 calc(50 * var(--rem)) calc(50 * var(--rem));
    background-image: linear-gradient(to bottom, #fcf2f1, #fff);
  }

  & .section-type__recommend-title {
    font-weight: 700;
    font-size: calc(18 * var(--rem));
    line-height: 1.5;
    letter-spacing: .08em;
    text-align: center;
    white-space: nowrap;
  }

  & .section-type__recommend-list {
    display: flex;
    align-items: flex-start;
    gap: calc(20 * var(--rem));
  }

  & .section-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(165 * var(--rem));
    padding-top: calc(43 * var(--rem));
  }

  & .section-item__category {
    position: absolute;
    top: calc(24 * var(--rem));
    left: calc(5 * var(--rem));
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(65 * var(--rem));
    height: calc(65 * var(--rem));
    border-radius: 50%;
    background-image: url(../img/261001/cat-badge.png);
    background-size: 100% 100%;
    box-shadow: calc(2 * var(--rem)) calc(2 * var(--rem)) calc(4 * var(--rem)) rgb(0 0 0 / .12);
    font-weight: 700;
    font-size: calc(12 * var(--rem));
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--color-primary);
    text-align: center;
    white-space: nowrap;
  }

  & .component-photo--item {
    position: relative;
    z-index: var(--z-base);
    width: calc(140 * var(--rem));
    background-color: transparent;
  }

  & .section-item__buy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(14 * var(--rem));
    margin-top: calc(10 * var(--rem));

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;

        & .component-button {
          background-color: var(--color-primary);
        }
      }
    }
  }

  & .section-item__name {
    width: calc(165 * var(--rem));
    font-weight: 500;
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }
}

.lp_contents {
  & .project-kit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem));
    width: 100%;
    padding-block: calc(60 * var(--rem));
    background-color: var(--color-primary);
  }

  & .project-kit__title {
    width: calc(350 * var(--rem));
    font-weight: 700;
    font-size: calc(20 * var(--rem));
    line-height: 1.5;
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }

  & .project-kit__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem));
    width: calc(350 * var(--rem));
    padding-block: calc(25 * var(--rem));
    border-radius: calc(80 * var(--rem));
    background-color: #fff;
    box-shadow: 0 0 calc(10 * var(--rem)) rgb(0 0 0 / .12);
  }

  & .project-kit__point {
    position: relative;
    padding: calc(4 * var(--rem)) calc(15 * var(--rem));
    border: 1px solid var(--color-primary);
    border-radius: calc(74 * var(--rem));
    font-weight: 500;
    font-size: calc(13 * var(--rem));
    line-height: 2;
    color: var(--color-primary);
    text-align: center;
    white-space: nowrap;
  }

  & .project-kit__point::after {
    content: "";
    position: absolute;
    top: calc(37 * var(--rem));
    left: calc(115 * var(--rem));
    width: calc(18 * var(--rem));
    height: 1px;
    background-color: var(--color-primary);
    rotate: -45deg;
  }

  & .component-photo--kit {
    width: calc(300 * var(--rem));
  }

  & .project-kit__figure {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: calc(4 * var(--rem));
    width: calc(300 * var(--rem));
    height: calc(160 * var(--rem));
    padding-bottom: calc(9 * var(--rem));
    border-radius: calc(20 * var(--rem));
  }

  & .project-kit__item--oil {
    width: calc(28 * var(--rem));
  }

  & .project-kit__item--cream {
    width: calc(47 * var(--rem));
  }

  & .project-kit__item--vital {
    width: calc(58 * var(--rem));
  }

  & .project-kit__item--hero {
    width: calc(106 * var(--rem));
  }

  & .project-kit__buy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(15 * var(--rem));

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;

        & .component-button {
          background-color: var(--color-primary);
        }
      }
    }
  }

  & .project-kit__name {
    font-weight: 500;
    font-size: calc(16 * var(--rem));
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }

  & .project-kit__worth-unit {
    font-family: var(--lp-font-ja);
    font-weight: 500;
    font-size: calc(16 * var(--rem));
  }

  & .project-kit__buy .component-price__before {
    text-decoration: none;
  }

  & .project-kit__buy .component-button {
    font-size: calc(14 * var(--rem));
    line-height: 1;
  }

  & .project-kit__detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(10 * var(--rem));
    width: calc(300 * var(--rem));
  }

  & .project-kit__detail-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-inline: calc(10 * var(--rem));
    font-weight: 700;
    font-size: calc(13 * var(--rem));
    line-height: 1;
    white-space: nowrap;
  }

  & .project-kit__detail-trigger::after {
    content: "";
    position: absolute;
    inset: calc(-16 * var(--rem)) 0;
  }

  & .project-kit__detail-trigger::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background-color: #d2d2d2;
    opacity: 0;
    transition: opacity .4s var(--transition-timing);
  }

  & .project-kit__detail.is-open .project-kit__detail-trigger::before {
    opacity: 1;
  }

  & .project-kit__detail-inner {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    align-items: center;
    gap: calc(7 * var(--rem));
    padding-inline: calc(12 * var(--rem)) calc(10 * var(--rem));
    background-color: #fff;
  }

  & .project-kit__detail-chevron {
    box-sizing: content-box;
    width: calc(9 * var(--rem));
    height: auto;
    color: #000;
    transition: rotate .4s var(--transition-timing);
  }

  & .project-kit__detail.is-open .project-kit__detail-chevron {
    rotate: 180deg;
  }

  & .project-kit__detail-text {
    width: calc(300 * var(--rem));
    padding-top: calc(10 * var(--rem));
    font-weight: 500;
    font-size: calc(13 * var(--rem));
    line-height: 1.5;
    white-space: nowrap;
  }
}

.lp_contents {
  & .project-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: calc(60 * var(--rem));
  }

  & .project-review__title {
    font-family: var(--lp-font-display);
    font-weight: 500;
    font-size: calc(30 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
    color: var(--color-primary);
    text-align: center;
    white-space: nowrap;
  }

  & .project-review__slider {
    width: 100%;
    padding-block: calc(25 * var(--rem));
  }

  & .project-review__slider .swiper-slide {
    width: calc(250 * var(--rem));
    height: auto;
    margin-inline: calc(15 * var(--rem) / 2);
  }

  & .project-review__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--rem));
    overflow: hidden;
    width: calc(250 * var(--rem));
    padding-bottom: calc(20 * var(--rem));
    border-radius: calc(5 * var(--rem));
    background-color: #fff;
    box-shadow: 0 0 calc(20 * var(--rem)) rgb(0 0 0 / .12);
  }

  & .project-review__photo {
    width: calc(250 * var(--rem));
  }

  & .project-review__author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--rem));
    width: 100%;
    padding-inline: calc(15 * var(--rem));
  }

  & .project-review__avatar {
    flex-shrink: 0;
    width: calc(60 * var(--rem));
    border-radius: 100%;
  }

  & .project-review__name {
    flex: 1 0 0;
    min-width: 0;
    font-size: calc(13 * var(--rem));
    line-height: 1.5;
  }

  & .project-review__name .component-en {
    font-weight: 400;
  }

  & .project-review__pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(15 * var(--rem));
    margin-top: calc(15 * var(--rem));
  }

  & .project-review__pagination .swiper-pagination-bullet {
    width: calc(8 * var(--rem));
    height: calc(8 * var(--rem));
    margin: 0;
    background-color: #d9d9d9;
    opacity: 1;
  }

  & .project-review__pagination .swiper-pagination-bullet-active {
    background-color: var(--color-primary);
  }
}

.lp_contents {
  & .project-cta {
    width: calc(300 * var(--rem));
    margin: calc(60 * var(--rem)) auto 0;
  }

  & .project-cta__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(2 * var(--rem));
    height: calc(80 * var(--rem));
    padding-top: calc(4 * var(--rem));
    background-color: #000;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-primary);
        opacity: 1;
      }
    }
  }

  & .project-cta__logo {
    width: calc(80 * var(--rem));
  }

  & .project-cta__label {
    font-weight: 500;
    font-size: calc(15 * var(--rem));
    line-height: 2;
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }
}

.lp_contents {
  & .project-rail__logo {
    width: calc(290 * var(--rem-pc));
  }

  & .project-rail__catch {
    width: calc(355 * var(--rem-pc));
  }
}