@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 {
  --color-text: #212121;
  --color-text-sub: #888;
  --color-brown: #6b4311;
  --color-brown-shadow: #542f00;
  --color-brown-buy: #693a00;
  --color-yellow: #f7f7cd;
  --color-yellow-light: #ffffe6;
  --color-pc-bg: #ffffe7;
  --color-intro-bg: #fff;
  --color-organicdays-bg: #ecf8fa;
  --color-vote-bg: #f1f6fc;
  --color-vote: #4c8daf;
  --color-menu-bg: #fffefc;
  --color-menu-line: #dcc7ad;
  --color-menu-icon: #876439;
  --color-assessment-bg: #fefeee;
  --color-card-line: #baad90;
  --color-choice-bg: #fafafa;
  --color-scene-bg: #fafaf2;
  --color-qa-bg: #fafafa;
  --tail-fill-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10L5 10Z'/%3E%3C/svg%3E");
  --tail-line-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3CclipPath id='c'%3E%3Cpath d='M0 0H10L5 10Z'/%3E%3C/clipPath%3E%3Cpath d='M0 0L5 10L10 0' fill='none' stroke='%23000' stroke-width='2' vector-effect='non-scaling-stroke' clip-path='url(%23c)'/%3E%3C/svg%3E");
  --dash: calc(2 * var(--rem));
  --dash-w: 1px;

  --lp-font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Asul", "Times New Roman", serif;
  --font-outfit: "Outfit", var(--lp-font-ja);

  --transition-timing: cubic-bezier(.51, .21, .41, 1);
  --letter-spacing: 0;

  --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(--color-text);
  font-style: normal;
  letter-spacing: var(--letter-spacing);
  line-break: strict;
  -webkit-font-smoothing: antialiased;

  & *,
  & *: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: .645em;
    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;
    font: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

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

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

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

@keyframes project-float {
  0%,
  50%,
  100% {
    translate: 0 0;
    animation-timing-function: ease-in-out;
  }

  25%,
  75% {
    translate: 0 calc(-6 * var(--rem));
    animation-timing-function: ease-in-out;
  }
}

@keyframes project-tilt {
  0%,
  33.333%,
  100% {
    rotate: 0deg;
  }

  66.667% {
    rotate: var(--tilt);
  }
}

@keyframes project-slidein-right {
  0% {
    opacity: 0;
    translate: calc(-10 * var(--rem)) calc(5 * var(--rem));
    scale: 0.95;
  }

  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes project-slidein-left {
  0% {
    opacity: 0;
    translate: calc(10 * var(--rem)) calc(5 * var(--rem));
    scale: 0.95;
  }

  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

html.js .lp_contents {
  & .project-qa__q,
  & .project-qa__a,
  & .project-qa__product {
    opacity: 0;
  }

  /* Q：右から表示 */
  & .project-qa__q.is-active {
    animation: project-slidein-left 0.4s ease-out both;
  }

  /* A・商品情報：左から表示 */
  & .project-qa__a.is-active,
  & .project-qa__product.is-active {
    animation: project-slidein-right 0.4s ease-out both;
  }
}
.lp_contents {
  & .project-float {
    animation: project-float 4s linear infinite;
  }
}
.lp_contents {
  & :is(.project-bubble, .project-heading-bubble, .project-staff__bubble-2) {
    &::before,
    &::after {
      position: absolute;
      left: var(--tail-x, 50%);
      width: var(--tail-w);
      translate: -50% 0;
      content: "";
    }

    &::before {
      top: calc(100% - 1px);
      height: calc(var(--tail-top, 0px) + 1px + var(--tail-h));
      background-color: var(--tail-fill);
      -webkit-mask: linear-gradient(#000 0 0) 50% 0 / calc(100% - 2 * var(--tail-gap, 1.5px)) calc(var(--tail-top, 0px) + 2px) no-repeat, var(--tail-fill-mask) 50% 100% / 100% var(--tail-h) no-repeat;
      mask: linear-gradient(#000 0 0) 50% 0 / calc(100% - 2 * var(--tail-gap, 1.5px)) calc(var(--tail-top, 0px) + 2px) no-repeat, var(--tail-fill-mask) 50% 100% / 100% var(--tail-h) no-repeat;
    }

    &::after {
      top: calc(100% + var(--tail-top, 0px));
      height: var(--tail-h);
      background-color: var(--tail-line);
      -webkit-mask: var(--tail-line-mask) 0 0 / 100% 100% no-repeat;
      mask: var(--tail-line-mask) 0 0 / 100% 100% no-repeat;
    }
  }

  & .project-btn {
    --btn-depth: 4;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(230 * var(--rem));
    height: calc(40 * var(--rem));
    padding-right: var(--btn-pad, 0px);
    background-color: #fff;
    border: 1px solid var(--btn-line);
    border-radius: calc(100 * var(--rem));
    box-shadow: 0 calc(var(--btn-depth) * var(--rem)) 0 var(--btn-shadow);
    font-weight: 600;
    font-size: calc(13 * var(--rem));
    line-height: 1;
    color: var(--btn-text, var(--btn-line));
    letter-spacing: .05em;
    white-space: nowrap;
    transition: translate .2s ease-out, box-shadow .2s ease-out;

    &::after {
      position: absolute;
      top: calc(7 * var(--rem));
      right: calc(9 * var(--rem));
      width: calc(24 * var(--rem));
      height: calc(24 * var(--rem));
      background: var(--btn-icon) url(../img/icon-arrow.svg) center / 100% no-repeat;
      border-radius: 50%;
      content: "";
    }

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
        translate: 0 calc(var(--btn-depth) * var(--rem));
        box-shadow: 0 0 0 var(--btn-shadow);
      }
    }
  }

  & .project-btn__label {
    letter-spacing: .05em;
  }

  & .project-btn--wide {
    --btn-pad: calc(23 * var(--rem));
    width: calc(280 * var(--rem));
  }

  & .project-btn--staff {
    --btn-pad: 0px;
  }

  & .project-btn--cyan {
    --btn-line: #00c1e4;
    --btn-shadow: #009fbc;
    --btn-icon: #00c1e4;
  }

  & .project-btn--blue {
    --btn-depth: 3;
    --btn-line: var(--color-vote);
    --btn-shadow: var(--color-vote);
    --btn-icon: #679fbc;
  }

  & .project-btn--brown {
    --btn-depth: 3;
    --btn-line: var(--color-brown);
    --btn-shadow: var(--color-brown-shadow);
    --btn-icon: var(--color-brown);
  }

  & .project-btn--cleansing {
    --btn-line: #63aeb0;
    --btn-shadow: #8cb9bb;
    --btn-icon: #81bcbe;
  }

  & .project-btn--haircare {
    --btn-line: #d2b234;
    --btn-shadow: #c8a725;
    --btn-icon: #dac057;
  }

  & .project-btn--pointcare {
    --btn-line: #c69676;
    --btn-text: #b4886a;
    --btn-shadow: #a77858;
    --btn-icon: #d0a487;
  }

  & .project-btn--innercare {
    --btn-line: #88c583;
    --btn-shadow: #84b580;
    --btn-icon: #9fce9b;
  }

  & .project-buy {
    display: block;
    padding: calc(2 * var(--rem)) calc(20 * var(--rem)) 0;
    background-color: #fff;
    border: 1px solid var(--color-brown);
    border-radius: calc(100 * var(--rem));
    box-shadow: 0 calc(3 * var(--rem)) 0 var(--color-brown-buy);
    font-family: var(--font-en);
    font-size: calc(13 * var(--rem));
    line-height: calc(20 / 13);
    color: var(--color-brown);
    white-space: nowrap;
    transition: translate .2s ease-out, box-shadow .2s ease-out;

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
        translate: 0 calc(3 * var(--rem));
        box-shadow: 0 0 0 var(--color-brown-buy);
      }
    }
  }

  & .project-outfit {
    font-family: var(--font-outfit);
    line-height: 0;
  }

  & .project-price {
    font-family: var(--font-outfit);
    font-size: calc(18 * var(--rem));
    line-height: 1.5;
    white-space: nowrap;
  }

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

  & .project-bubble {
    --bubble-line: var(--color-text);
    --tail-w: calc(10 * var(--rem));
    --tail-h: calc(10 * var(--rem));
    --tail-fill: var(--bubble-bg);
    --tail-line: var(--bubble-line);
    position: relative;
    display: inline-block;
    padding: calc(2 * var(--rem)) calc(10 * var(--rem)) calc(3 * var(--rem));
    background-color: var(--bubble-bg);
    border: 1px solid var(--bubble-line);
    border-radius: calc(4 * var(--rem));
    font-weight: 600;
    font-size: calc(14 * var(--rem));
    line-height: calc(20 / 14);
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-bubble--yellow {
    --bubble-bg: var(--color-yellow);
    --bubble-line: var(--color-brown);
    padding: calc(5 * var(--rem)) calc(10 * var(--rem)) calc(6 * var(--rem));
    font-weight: 700;
    line-height: 1;
    color: var(--color-brown);
  }

  & .project-heading-bubble {
    --tail-w: calc(16 * var(--rem));
    --tail-h: calc(14 * var(--rem) + 1px);
    --tail-gap: 1px;
    --tail-fill: var(--color-yellow);
    --tail-line: var(--color-brown);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--rem));
    width: max-content;
    margin: 0 auto;
    padding: calc(14 * var(--rem)) calc(15 * var(--rem));
    background-color: var(--color-yellow);
    border: 1px solid var(--color-brown);
    border-radius: calc(6 * var(--rem));
    font-weight: 700;
    color: var(--color-brown);
    text-align: center;
    white-space: nowrap;
  }

  & .project-heading-bubble--wide {
    padding-inline: calc(40 * var(--rem));
  }

  & .project-heading-bubble__sub {
    font-size: calc(15 * var(--rem));
    line-height: 1.2;
    letter-spacing: .08em;
  }

  & .project-heading-bubble__main {
    font-size: calc(22 * var(--rem));
    line-height: calc(29 / 22);
    letter-spacing: .08em;
  }

  & .project-section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(6 * var(--rem));
    font-weight: 700;
    color: var(--color-brown);
    text-align: center;
    white-space: nowrap;
  }

  & .project-section-title__sub {
    font-size: calc(16 * var(--rem));
    line-height: calc(19 / 16);
    letter-spacing: .08em;
  }

  & .project-section-title__main {
    font-size: calc(22 * var(--rem));
    line-height: calc(29 / 22);
    letter-spacing: .08em;
  }
}

.lp_contents {
  & .project-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(50 * var(--rem));
    padding: calc(50 * var(--rem)) 0;
    background-color: var(--color-intro-bg);
  }

  & .project-intro__text {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--rem));
    font-size: calc(15 * var(--rem));
    line-height: 2;
    text-align: center;
    white-space: nowrap;
  }

  & .project-organicdays {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem));
    width: calc(350 * var(--rem));
    padding: calc(30 * var(--rem)) calc(15 * var(--rem)) calc(35 * var(--rem));
    background-color: var(--color-organicdays-bg);
    border-radius: calc(10 * var(--rem));
  }

  & .project-organicdays__head {
    display: flex;
    flex-direction: column;
    gap: calc(6 * var(--rem));
    width: 100%;
  }

  & .project-organicdays__title {
    height: calc(24 * var(--rem));

    & img {
      width: calc(287 * var(--rem));
      margin: calc(3 * var(--rem)) auto 0;
    }
  }

  & .project-organicdays__text {
    font-size: calc(14 * var(--rem));
    line-height: calc(21.5 / 14);
    letter-spacing: .05em;

    & span {
      letter-spacing: .05em;
    }
    text-align: center;
    white-space: nowrap;
  }

  & .project-organicdays__visual {
    width: calc(300 * var(--rem));
  }
}

@keyframes project-vote-loop {
  to {
    translate: calc(-108 * 6 * var(--rem)) 0;
  }
}

.lp_contents {
  & .project-vote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem));
    padding: 0 0 calc(50 * var(--rem));
    background-color: var(--color-vote-bg);
  }

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

  & .project-vote__title {
    width: 100%;
  }

  & .project-vote__text {
    font-size: calc(14 * var(--rem));
    line-height: calc(24 / 14);
    letter-spacing: .05em;
    text-align: center;
    white-space: nowrap;
  }

  & .project-vote__loop {
    display: flex;
    width: 100%;
    padding-left: calc(8 * var(--rem));
    overflow: hidden;
  }

  & .project-vote__track {
    display: flex;
    flex-shrink: 0;
    gap: calc(8 * var(--rem));
    padding-right: calc(8 * var(--rem));
    animation: project-vote-loop 34s linear infinite;

    & img {
      width: calc(100 * var(--rem));
    }
  }

  & .project-staff {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--rem));
    width: calc(350 * var(--rem));
    margin-top: calc(30 * var(--rem));
    padding-bottom: calc(25 * var(--rem));
    
    
    

    &::before {
      position: absolute;
      top: calc(13 * var(--rem));
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 0;
      background-color: #fff;
      border-radius: calc(10 * var(--rem));
      content: "";
    }

    & > * {
      position: relative;
      z-index: var(--z-base);
    }
  }

  & .project-staff__bubble {
    display: grid;
    padding-bottom: calc(10 * var(--rem));
    font-weight: 600;
    font-size: calc(14 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
    white-space: nowrap;

    & span {
      letter-spacing: .05em;
    }

    & > span {
      grid-area: 1 / 1;
      justify-self: start;
      align-self: start;
      padding: calc(5 * var(--rem)) calc(10 * var(--rem)) calc(6 * var(--rem));
      background-color: var(--color-yellow);
      border: 1px solid var(--color-text);
      border-radius: calc(4 * var(--rem));
    }
  }

  & .project-staff__bubble-2 {
    --tail-x: calc(76 * var(--rem) - 1px);
    --tail-w: calc(10 * var(--rem));
    --tail-h: calc(10 * var(--rem));
    --tail-fill: var(--color-yellow);
    --tail-line: var(--color-text);
    position: relative;
    margin: calc(24 * var(--rem)) 0 0 calc(65 * var(--rem));
  }

  & .project-staff__title {
    margin-top: calc(-8 * var(--rem));
    font-weight: 700;
    font-size: calc(20 * var(--rem));
    line-height: calc(27 / 20);
    letter-spacing: .05em;
    text-align: center;
    white-space: nowrap;
  }

  & .project-staff__title-sub {
    display: block;
    font-size: calc(18 * var(--rem));
    line-height: calc(24 / 18);
    letter-spacing: .05em;
  }

  & .project-staff__list {
    display: flex;
    justify-content: center;
    margin-top: calc(2 * var(--rem));
  }

  & .project-staff__member {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(130 * var(--rem));
    font-size: calc(12 * var(--rem));
    line-height: calc(16 / 12);
    text-align: center;
    
    
    

    & img {
      width: calc(90 * var(--rem));
      border-radius: 50%;
      outline: 2px solid #fff;
      outline-offset: -2px;
      box-shadow: 0 0 calc(4 * var(--rem)) rgb(0 0 0 / .3);
    }
  }

  & .project-staff__member--hammy img {
    outline: 1px solid #f9f9ef;
    outline-offset: -1px;
  }

  & .project-staff__role {
    margin-top: calc(8 * var(--rem));
  }

  & .project-staff__name {
    font-weight: 600;
  }
}

.lp_contents {
  & .project-menu {
    padding: calc(50 * var(--rem)) calc(20 * var(--rem)) calc(40 * var(--rem));
  }

  & .project-menu__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(14 * var(--rem));
    padding: calc(20 * var(--rem));
    background-color: var(--color-menu-bg);
    border: 1px solid var(--color-menu-line);
    border-radius: calc(10 * var(--rem));
  }

  & .project-menu__title {
    font-family: var(--font-en);
    font-weight: 700;
    font-size: calc(20 * var(--rem));
    line-height: 1;
    color: var(--color-brown);
    letter-spacing: .05em;
  }

  & .project-menu__list {
    display: grid;
    grid-template-columns: repeat(2, calc(145 * var(--rem)));
    gap: calc(16 * var(--rem)) calc(20 * var(--rem));
    margin-inline: calc(-1 * var(--rem));
  }

  & .project-menu__item {
    position: relative;
    height: calc(36 * var(--rem));

    &:nth-child(-n + 2)::after {
      position: absolute;
      bottom: calc(-8 * var(--rem));
      left: 0;
      width: 100%;
      height: var(--dash-w);
      background: repeating-linear-gradient(to right, var(--color-brown) 0 var(--dash), transparent var(--dash) calc(2 * var(--dash)));
      content: "";
    }

    &:nth-child(odd)::before {
      position: absolute;
      top: 0;
      right: calc(-10 * var(--rem));
      width: var(--dash-w);
      height: 100%;
      background: repeating-linear-gradient(to bottom, var(--color-brown) 0 var(--dash), transparent var(--dash) calc(2 * var(--dash)));
      content: "";
    }
  }

  & .project-menu__link {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: calc(5 * var(--rem));
    font-weight: 600;
    font-size: calc(14 * var(--rem));
    line-height: 1.2;
    color: var(--color-brown);
    letter-spacing: .05em;
    white-space: nowrap;

    &::after {
      position: absolute;
      top: calc(9 * var(--rem));
      left: calc(122 * var(--rem));
      width: calc(18 * var(--rem));
      height: calc(18 * var(--rem));
      background: var(--color-menu-icon) url(../img/icon-arrow.svg) center / 133.3% no-repeat;
      border-radius: 50%;
      rotate: 90deg;
      content: "";
    }
  }
}

.lp_contents {
  & .project-assessment {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(20 * var(--rem)) 0 calc(50 * var(--rem));
    background: linear-gradient(#fff 0 calc(60 * var(--rem)), var(--color-assessment-bg) 0);
  }

  & .project-assessment__head {
    padding-bottom: calc(14 * var(--rem));
  }

  & .project-assessment__body {
    width: calc(340 * var(--rem));
    margin-top: calc(20 * var(--rem));
  }

  & .project-assessment__step {
    position: relative;

    &[hidden] {
      display: none;
    }
  }

  & .project-assessment__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem));
    padding: calc(20 * var(--rem));
    background-color: #fff;
    box-shadow: calc(4 * var(--rem)) calc(4 * var(--rem)) calc(4 * var(--rem)) rgb(0 0 0 / .04);

    &::after {
      position: absolute;
      top: calc(8 * var(--rem));
      left: calc(8 * var(--rem));
      width: 100%;
      height: 100%;
      border-right: 1px solid var(--color-card-line);
      border-bottom: 1px solid var(--color-card-line);
      pointer-events: none;
      content: "";
    }
  }

  & .project-assessment__question {
    font-weight: 700;
    font-size: calc(18 * var(--rem));
    line-height: calc(22 / 18);
    letter-spacing: .08em;
    text-align: center;
    white-space: nowrap;
    outline: none;
  }

  & .project-assessment__question-no {
    font-family: var(--font-en);
    line-height: 0;
    letter-spacing: .08em;
  }

  & .project-assessment__choices {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--rem));
  }

  & .project-assessment__choice {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--rem));
    width: calc(300 * var(--rem));
    height: calc(66 * var(--rem));
    padding: calc(12 * var(--rem)) calc(10 * var(--rem));
    background-color: var(--color-choice-bg);
    border-radius: calc(5 * var(--rem));
    text-align: left;

      &:hover {
        background-color: var(--color-yellow-light);
      }
  }

  & .project-assessment__choice-key {
    flex-shrink: 0;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: calc(16 * var(--rem));
    line-height: 1.2;
    color: var(--color-brown);
    letter-spacing: .08em;
  }

  & .project-assessment__choice-text {
    flex: 1;
    font-weight: 500;
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
    /* white-space: nowrap; */
  }

  & .project-assessment__tap {
    position: relative;
    margin: calc(-1 * var(--rem)) 0 calc(1 * var(--rem));
    font-size: calc(13 * var(--rem));
    line-height: calc(16 / 13);
    translate: calc(-7 * var(--rem)) 0;
    white-space: nowrap;

    &::before,
    &::after {
      position: absolute;
      left: calc(-10 * var(--rem));
      width: calc(20 * var(--rem));
      height: .5px;
      background-color: var(--color-text);
      content: "";
    }

    &::before {
      top: calc(-4 * var(--rem));
      rotate: -17.1deg;
    }

    &::after {
      top: calc(19 * var(--rem));
      rotate: 15.07deg;
    }
  }

  & .project-assessment__back {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--rem));
    align-self: flex-start;
    margin: calc(-10 * var(--rem));
    padding: calc(10 * var(--rem));
    font-size: calc(13 * var(--rem));
    line-height: 1.2;

    &::before {
      width: calc(8 * var(--rem));
      height: calc(8 * var(--rem));
      background: url(../img/icon-back.svg) center / 100% no-repeat;
      content: "";
    }
  }

  & .project-assessment__chara {
    --tilt: 10deg;
    position: absolute;
    pointer-events: none;
    width: calc(90 * var(--rem));
    animation: project-tilt 1.5s linear infinite;
  }

  & .project-assessment__chara--q1 {
    --tilt: -10deg;
    bottom: calc(-25 * var(--rem));
    left: 0;
  }

  & .project-assessment__chara--q2 {
    top: calc(12 * var(--rem));
    right: calc(-10 * var(--rem));
  }

  & .project-assessment__chara--q3 {
	 --tilt: -10deg; 
    top: calc(23 * var(--rem));
    left: calc(-15 * var(--rem));
  }

  & .project-assessment__chara--q4 {
    right: 0;
    bottom: calc(-20 * var(--rem));
  }
}

.lp_contents {
  & .project-result--innerdry {
    --type-bg: #e4e8f4;
    --type-main: #687cc5;
    --type-label: #b1bade;
  }

  & .project-result--delicate {
    --type-bg: #f9ecee;
    --type-main: #df6275;
    --type-label: #e6acb5;
  }

  & .project-result--karakara {
    --type-bg: #ebf7ef;
    --type-main: #61b77e;
    --type-label: #99d4ad;
  }

  & .project-result--gowagowa {
    --type-bg: #f9efe3;
    --type-main: #eca748;
    --type-label: #f0c588;
  }

  & .project-result__card {
    background-color: var(--type-bg);
  }

  & .project-result__lead {
    font-weight: 700;
    font-size: calc(18 * var(--rem));
    line-height: calc(29 / 18);
    letter-spacing: .08em;
    text-align: center;
  }

  & .project-result__title {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(6 * var(--rem));
    min-height: calc(60 * var(--rem));
    padding-inline: calc(36 * var(--rem));
    font-weight: 700;
    line-height: 1.2;
    color: var(--type-main);
    text-align: center;
    white-space: nowrap;
    outline: none;

    &::before,
    &::after {
      position: absolute;
      width: calc(16 * var(--rem));
      height: calc(36 * var(--rem));
      border: 0 solid var(--type-main);
      content: "";
    }

    &::before {
      top: 0;
      left: 0;
      border-top-width: 1px;
      border-left-width: 1px;
    }

    &::after {
      right: 0;
      bottom: 0;
      border-right-width: 1px;
      border-bottom-width: 1px;
    }
  }

  & .project-result__title-sub {
    font-size: calc(16 * var(--rem));
    line-height: calc(19 / 16);
    letter-spacing: .08em;
  }

  & .project-result__title-main {
    font-size: calc(24 * var(--rem));
    line-height: calc(29 / 24);
    letter-spacing: .08em;
  }

  & .project-result__visual {
    position: relative;
    width: calc(200 * var(--rem));

    &::before {
      position: absolute;
      top: calc(50% + 10 * var(--rem));
      left: 50%;
      width: calc(240 * var(--rem));
      height: calc(240 * var(--rem));
      background: url(../img/assessment-chara-bg.svg) center / 100% no-repeat;
      translate: -50% -50%;
      content: "";
    }

    & img {
      position: relative;
    }
  }

  & .project-result__desc {
    position: relative;
    width: calc(300 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 1.5;

    & dt {
      height: calc(25 * var(--rem));
      padding-bottom: 1px;
      background-color: var(--type-label);
      border-radius: calc(3 * var(--rem));
      font-weight: 600;
      color: #fff;
      text-align: center;
    }

    & dd {
      margin: calc(5 * var(--rem)) 0 0;
    }

    & dd + dt {
      margin-top: calc(8 * var(--rem));
    }
  }

  & .project-result__items {
    display: flex;
    justify-content: center;
    gap: calc(10 * var(--rem));
    margin-top: calc(-12 * var(--rem));
  }

  & .project-result__item {
    width: calc(145 * var(--rem));

    & a {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: calc(3 * var(--rem));
      text-align: center;

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

  & .project-result__brand {
    margin-top: calc(2 * var(--rem));
    font-family: var(--font-en);
    font-size: calc(16 * var(--rem));
    line-height: 1.5;
    white-space: nowrap;
  }

  & .project-result--innerdry .project-result__brand {
    margin-top: calc(-3 * var(--rem));
  }

  & .project-result__name {
    font-size: calc(11 * var(--rem));
    line-height: calc(17 / 11);
    white-space: nowrap;
  }

  & .project-result__retry {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--rem));
    padding: calc(6 * var(--rem)) calc(15 * var(--rem));
    background-color: #fff;
    border: 1px solid var(--color-brown);
    border-radius: calc(100 * var(--rem));
    box-shadow: 0 calc(3 * var(--rem)) 0 var(--color-brown-shadow);
    font-weight: 500;
    font-size: calc(14 * var(--rem));
    line-height: 2;
    color: var(--color-brown);
    white-space: nowrap;
    transition: translate .2s ease-out, box-shadow .2s ease-out;

    &::after {
      width: calc(24 * var(--rem));
      height: calc(24 * var(--rem));
      background: var(--color-brown) url(../img/icon-retry.svg) center / 100% no-repeat;
      border-radius: 50%;
      content: "";
    }

    @media (any-hover: hover) {
      &:hover {
        translate: 0 calc(3 * var(--rem));
        box-shadow: 0 0 0 var(--color-brown-shadow);
      }
    }
  }

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

  & .project-event__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }

  & .project-event__lead {
    padding-bottom: calc(9 * var(--rem));
    line-height: 0;
  }

  & .project-event__title {
    font-weight: 700;
    font-size: calc(22 * var(--rem));
    line-height: calc(29 / 22);
    color: var(--color-brown);
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-event__text {
    font-size: calc(14 * var(--rem));
    line-height: calc(22 / 14);
    text-align: center;
    white-space: nowrap;
  }
}

.lp_contents {
  & .project-parts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(37 * var(--rem));
    padding: calc(50 * var(--rem)) calc(20 * var(--rem));
  }

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

  & .project-parts__item {
    display: flow-root;
    padding-bottom: calc(31 * var(--rem));
    background-color: var(--parts-bg);
    border-radius: calc(10 * var(--rem));
  }

  & .project-parts__item--cleansing {
    --parts-bg: #eaf6f7;
    --bubble-bg: #cfe9ea;
  }

  & .project-parts__item--haircare {
    --parts-bg: #faf6e9;
    --bubble-bg: #fbf2cd;
  }

  & .project-parts__item--pointcare {
    --parts-bg: #faf2e8;
    --bubble-bg: #efdec9;
    padding-bottom: calc(45 * var(--rem));
  }

  & .project-parts__item--innercare {
    --parts-bg: #edf6ec;
    --bubble-bg: #d2e9d0;
    padding-bottom: calc(30 * var(--rem));
  }

  & .project-parts__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(-12 * var(--rem));
  }

  & .project-parts__lead {
    padding-bottom: calc(9 * var(--rem));
    line-height: 0;
  }

  & .project-bubble--pointcare {
    padding: calc(4 * var(--rem)) calc(12 * var(--rem)) calc(5 * var(--rem));
  }

  & .project-bubble--innercare {
    font-size: calc(15 * var(--rem));
    line-height: 1.4;
  }

  & .project-parts__title {
    margin-top: calc(6 * var(--rem));
    font-weight: 600;
    font-size: calc(20 * var(--rem));
    line-height: 1.3;
    letter-spacing: .08em;
    text-align: center;
    white-space: nowrap;
  }

  & .project-parts__title-small {
    display: block;
    font-size: calc(12 * var(--rem));
    line-height: 1.5;
    letter-spacing: .08em;
  }

  & .project-parts__photo {
    width: calc(280 * var(--rem));
    margin-top: calc(15 * var(--rem));

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

  & .project-parts__item--pointcare .project-parts__photo {
    width: calc(300 * var(--rem));
  }

  & .project-parts__item--innercare .project-parts__photo {
    position: relative;
    width: calc(290 * var(--rem));
    background-color: #fff;

    &::after {
      position: absolute;
      inset: 0;
      border: 1px solid #e5e5e5;
      content: "";
    }

    & img {
      opacity: .9;
    }
  }

  & .project-parts__inner .project-btn {
    margin-top: calc(20 * var(--rem));
  }
}

.lp_contents {
  & .project-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(25 * var(--rem));
    padding: calc(50 * var(--rem)) 0;
    background-color: var(--color-scene-bg);
  }

  & .project-scene__list {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--rem));
  }

  & .project-scene__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(350 * var(--rem));
    padding: calc(25 * var(--rem)) 0;
    background-color: #fff;
    border: 2px solid var(--scene-line);
    border-radius: calc(10 * var(--rem));
  }

  & .project-scene__card--morning {
    --scene-line: rgb(208 164 135 / .5);
    --scene-key: #d0a487;
    --scene-slide-bg: #f8f3ee;
    --bubble-bg: #efdec9;
    padding-bottom: calc(10 * var(--rem));
  }

  & .project-scene__card--bath {
    --scene-line: rgb(170 199 168 / .5);
    --scene-key: #aac7a8;
    --scene-slide-bg: #f1f7f1;
    --bubble-bg: #d2e9d0;
	  padding-bottom: calc(10 * var(--rem));	
  }

  & .project-scene__card--night {
    --scene-line: rgb(129 188 190 / .5);
    --scene-key: #81bcbe;
    --scene-slide-bg: #eff5f5;
    --bubble-bg: #cfe9ea;
    --scene-catch-lines: 2;
  }

  & .project-scene__title {
    padding-bottom: calc(9 * var(--rem));
    line-height: 0;

    & .project-bubble {
      padding: calc(3 * var(--rem)) calc(12 * var(--rem)) calc(4 * var(--rem));
      font-weight: 500;
      font-size: calc(18 * var(--rem));
      line-height: calc(25 / 18);
      letter-spacing: .05em;
    }
  }

  & .project-scene__slider {
    position: relative;
    width: 100%;
    margin-top: calc(10 * var(--rem));
  }

  & .project-scene__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--rem));
    width: calc(210 * var(--rem));
    height: auto;
    margin-inline: calc(5 * var(--rem));
    padding: calc(15 * var(--rem)) calc(10 * var(--rem)) calc(20 * var(--rem));
    background-color: var(--scene-slide-bg);
  }

  & .project-scene__catch {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(var(--scene-catch-lines, 3) * 21 * var(--rem));
    font-weight: 600;
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
    color: var(--color-brown);
    text-align: center;
    white-space: nowrap;
  }

  & .project-scene__photo {
    width: calc(160 * var(--rem));

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

  & .project-scene__name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
    white-space: nowrap;

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

  & .project-scene__brand {
    font-family: var(--font-en);
    font-size: calc(15 * var(--rem));
    line-height: calc(23 / 15);
  }

  & .project-scene__product {
    font-size: calc(13 * var(--rem));
    line-height: calc(20 / 13);
  }

  & .project-scene__buy {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(12 * var(--rem));
    margin-top: calc(-4 * var(--rem));
  }

  & .project-scene__arrow {
    position: absolute;
    top: calc(169 * var(--rem));
    z-index: var(--z-base);
    width: calc(34 * var(--rem));
    height: calc(34 * var(--rem));
    background: var(--scene-key) url(../img/icon-arrow.svg) center / 100% no-repeat;
    border-radius: 50%;
  }

  & .project-scene__arrow--prev {
    left: calc(11 * var(--rem));
    rotate: 180deg;
  }

  & .project-scene__arrow--next {
    right: calc(10 * var(--rem));
  }

  & .project-scene__pager {
    display: flex;
    justify-content: center;
    gap: calc(20 * var(--rem));
    margin-top: calc(15 * var(--rem));

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

    & .swiper-pagination-bullet-active {
      background-color: var(--scene-key);
    }
  }

  & .project-scene__note {
    width: calc(320 * var(--rem));
    margin-top: calc(15 * var(--rem));
    font-size: calc(10 * var(--rem));
    line-height: 1.5;
    color: var(--color-text-sub);
    text-align: right;
    white-space: nowrap;
  }
}

.lp_contents {
  & .project-qa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem));
    padding: calc(50 * var(--rem)) 0;
    overflow: hidden;
  }

  & .project-qa__list {
    display: flex;
    margin-top: calc(14 * var(--rem));
    flex-direction: column;
    gap: calc(20 * var(--rem));
  }

  & .project-qa__item {
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--rem));
    width: calc(350 * var(--rem));
    padding: calc(30 * var(--rem)) calc(25 * var(--rem)) calc(30 * var(--rem)) calc(25 * var(--rem));
    background-color: var(--color-qa-bg);
    border-radius: calc(20 * var(--rem));
    box-shadow: inset calc(2 * var(--rem)) calc(2 * var(--rem)) calc(8 * var(--rem)) rgb(0 0 0 / .08);
    overflow: hidden;
  }

  & .project-qa__q,
  & .project-qa__a,
  & .project-qa__product {
    position: relative;
    display: flex;
    gap: calc(4 * var(--rem));
    max-width: calc(270 * var(--rem));
    padding: calc(8 * var(--rem)) calc(15 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
    filter: drop-shadow(0 0 1.5px rgb(0 0 0 / .1));

    &::after {
      position: absolute;
      bottom: 0;
      width: calc(10 * var(--rem) + 1px);
      height: calc(10 * var(--rem));
      background-color: inherit;
      content: "";
    }
  }

  & .project-qa__q {
    align-self: flex-end;
    align-items: center;
    background-color: var(--color-yellow-light);
    border-radius: calc(10 * var(--rem)) calc(10 * var(--rem)) 0 calc(10 * var(--rem));

    &::after {
      left: calc(100% - 1px);
      clip-path: polygon(0 0, 1px 0, 100% 100%, 100% calc(100% + 1px), 0 calc(100% + 1px));
    }
  }

  & .project-qa__a,
  & .project-qa__product {
    align-self: flex-start;
    background-color: #fff;
    border-radius: calc(10 * var(--rem)) calc(10 * var(--rem)) calc(10 * var(--rem)) 0;

    &::after {
      right: calc(100% - 1px);
      clip-path: polygon(calc(100% - 1px) 0, 100% 0, 100% calc(100% + 1px), 0 calc(100% + 1px), 0 100%);
    }
  }

  & .project-qa__a {
    width: calc(270 * var(--rem));
  }

  & .project-qa__mark {
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: calc(16 * var(--rem));
    color: var(--color-brown);
  }

  & .project-qa__product {
    align-items: center;
    gap: calc(10 * var(--rem));
    width: calc(310 * var(--rem));
    max-width: none;
    padding: 0 calc(8 * var(--rem)) 0 0;
  }

  & .project-qa__photo {
    flex-shrink: 0;
    width: calc(120 * var(--rem));

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

  & .project-qa__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(3 * var(--rem));
    padding: calc(8 * var(--rem)) 0;
  }

  & .project-qa__name {
    display: flex;
    flex-direction: column;
    gap: calc(3 * var(--rem));

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

  & .project-qa__brand {
    font-family: var(--font-outfit);
    font-weight: 500;
    font-size: calc(15 * var(--rem));
    line-height: calc(23 / 15);
  }

  & .project-qa__product-name {
    font-size: calc(13 * var(--rem));
    line-height: calc(20 / 13);
  }

  & .project-qa__buy {
    display: flex;
    align-items: flex-start;
    gap: calc(10 * var(--rem));

    & .project-price {
      font-size: calc(17 * var(--rem));
      line-height: calc(26 / 17);
    }
  }

  & .project-banner {
    padding-bottom: calc(60 * var(--rem));

    & a {
      display: block;
      width: calc(350 * var(--rem));
      margin-inline: auto;
    }
  }
}

.lp_contents {
  & .project-rail-title {
    width: calc(336 * var(--rem-pc));
  }

  & .project-rail-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem-pc));
    pointer-events: auto;
  }

  & .project-rail-nav__title {
    font-family: var(--font-en);
    font-weight: 700;
    font-size: calc(20 * var(--rem-pc));
    line-height: 1;
    color: var(--color-brown);
    letter-spacing: .05em;
  }

  & .project-rail-nav__list {
    display: grid;
    grid-template-columns: repeat(2, calc(180 * var(--rem-pc)));
    gap: calc(8 * var(--rem-pc));
  }

  & .project-rail-nav__link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(46 * var(--rem-pc));
    background-color: rgb(255 255 255 / .6);
    border: 1px solid var(--color-brown);
    border-radius: calc(5 * var(--rem-pc));
    font-weight: 600;
    font-size: calc(16 * var(--rem-pc));
    line-height: 1;
    color: var(--color-brown);
    letter-spacing: .05em;
    white-space: nowrap;
  }
}

.lp_contents {
  & .layout-columns {
    @media (min-width: 769px) {
      display: grid;
      background: url(../img/bg-noise.png) 0 0 / 100px repeat fixed, var(--color-pc-bg);
    }

    &.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;
      margin-top: calc(-1 * (var(--rail-offset, 0px) + var(--header-height, 0px)));
      padding-top: var(--header-height, 0px);
      pointer-events: none;
    }
  }

  & .layout-primary {
    min-width: 0;
    overflow: hidden;
    background-color: #fff;
  }

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

@media (prefers-reduced-motion: reduce) {
  .lp_contents .project-float,
  .lp_contents .project-assessment__chara,
  .lp_contents .project-vote__track,
  html.js .lp_contents .project-qa__q.is-active,
  html.js .lp_contents .project-qa__a.is-active,
  html.js .lp_contents .project-qa__product.is-active {
    animation: none;
  }

  html.js .lp_contents .project-qa__q,
  html.js .lp_contents .project-qa__a,
  html.js .lp_contents .project-qa__product {
    opacity: 1;
  }
}

.lp_contents .notes {
    font-size: calc(10 * var(--rem));
    line-height: 1.5;
}