@charset "UTF-8";

:root {
  --pw: 1440;
  --sw: 390;
  --artboard-pw: 450;
  --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: #5b2908;
  --color-accent: #db6010;
  --color-green: #a6b22b;
  --color-red: #d1232c;
  --color-bg: #ffffe8;
  --color-bg-pc: #fffef3;
  --color-bg-card: #fffadc;
  --color-line-pc: rgb(219 96 16 / .3);

  --font-base: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-display: "the-seasons", "Times New Roman", serif;

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

  --dash: calc(2 * var(--rem));
  --dash-w: 1px;

  --ease-float: cubic-bezier(.445, .05, .55, .95);
  --duration-float: 3.7s;
  --duration-blink: 2.5s;
  --duration-modal: .3s;

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

.lp_contents {
  position: relative;
  font-family: var(--font-base);
  color: var(--color-text);
  font-style: normal;
  line-height: 1;
  letter-spacing: var(--letter-spacing);

  & * {
    font-feature-settings: normal;
  }

  & *,
  & *:before,
  & *:after {
    box-sizing: border-box;
  }

  & :where(div, 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;
  }

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

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

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

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

.lp_contents {
  & .modal {
    position: fixed;
    z-index: var(--z-modal-overlay);
    inset: 0;
    display: block;
    /* padding-block: calc(30 * var(--rem, 1px)); */
    background: rgb(255 255 232 / .9);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--duration-modal) ease-out, visibility 0s linear var(--duration-modal);
    

    &.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity var(--duration-modal) ease, visibility 0s linear 0s;
    }
  }

  & .modal_outside {
    position: relative;
    width: 100%;
    max-width: calc(670 * var(--rem, 1px));
    height: 100%;
    margin-inline: auto;
    background: #fff;
    overflow: hidden;
    scale: .95;
    transition: scale var(--duration-modal) ease-out;
  }

  & .modal.is-open .modal_outside {
    scale: 1;
    transition-timing-function: ease;
  }

  & .modal__body {
    position: relative;
    z-index: var(--z-modal);
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  & .modal__close {
    position: absolute;
    z-index: var(--z-modal);

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

  & .modal--ingredient {
    display: flex;
    align-items: center;
  }

  & .modal_outside--campaign {
    max-width: calc(390 * var(--rem));
    background-color: #fcfcd4;
  }

  & .modal__close--campaign {
    top: calc(6 * var(--rem));
    right: calc(6 * var(--rem));
    width: calc(54 * var(--rem));
  }

  & .modal_outside--ingredient {
    display: flex;
    flex-direction: column;
    width: calc(350 * var(--rem));
    height: auto;
    max-height: 100%;
    border-radius: calc(10 * var(--rem));
    background-color: #fffff8;
    box-shadow: 0 0 calc(20 * var(--rem)) rgb(0 0 0 / .1);

    & .modal__body {
      flex: 1 1 auto;
      height: auto;
      min-height: 0;
    }
  }

  & .modal__close--ingredient {
    top: calc(15 * var(--rem));
    right: calc(15 * var(--rem));
    width: calc(30 * var(--rem));
  }
}

.lp_contents {
  & .ani-float {
    animation: lp-float var(--duration-float) var(--ease-float) infinite;
  }

  & .ani-float--late {
    animation-duration: 3.8s;
    animation-delay: 1s;
  }

  & .ani-blink {
    animation: lp-blink var(--duration-blink) ease-in-out infinite;
  }
}

@keyframes lp-float {
  50% {
    translate: 0 calc(-5 * var(--rem));
  }

  100% {
    translate: 0 0;
  }
}

@keyframes lp-blink {
  0% {
    opacity: .9;
    scale: .8;
  }

  80% {
    opacity: .9;
  }

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

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

  .lp_contents .modal,
  .lp_contents .modal.is-open,
  .lp_contents .modal_outside {
    transition: none;
  }
}

.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: hidden;

    @media (min-width: 769px) {
      box-shadow: 0 0 calc(10 * var(--rem-pc)) rgb(0 0 0 / .05);
    }
  }

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

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

.lp_contents {
  & .section-heading {
    font-family: var(--font-display);
    font-size: calc(28 * var(--rem));
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
    white-space: nowrap;
  }

  & .section-heading--comments {
    letter-spacing: .04em;
  }

  & .section-heading--staff {
    margin-top: calc(14 * var(--rem));
  }

  & .section-heading--review {
    margin-top: calc(15 * var(--rem));
  }

  & .section-heading--preorder {
    margin-top: calc(19 * var(--rem));
  }

  & .section-heading--limited {
    margin-top: calc(18 * var(--rem));
  }

  & .section-subheading {
    margin-top: calc(7 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 600;
    color: var(--color-accent);
    text-align: center;
    white-space: nowrap;
  }

  & .section-subheading--campaign {
    margin-top: calc(8 * var(--rem));
  }

  & .section-pill {
    position: relative;
    width: fit-content;
    margin-inline: auto;
    padding: calc(6 * var(--rem)) calc(13 * var(--rem));
    border: 1px solid var(--color-accent);
    border-radius: calc(100 * var(--rem));
    background-color: #ffffd4;
    font-size: calc(12 * var(--rem));
    font-weight: 600;
    color: var(--color-accent);
    white-space: nowrap;
    
    
    
    
    
    
    
    

    &::after {
      position: absolute;
      top: calc(100% - 2 * var(--rem));
      left: 50%;
      width: calc(10 * var(--rem));
      height: calc(11 * var(--rem));
      background: url(../img/261016/icon-pill-tail.svg) center / 100% 100% no-repeat;
      translate: -50% 0;
      content: "";
    }
  }

  & .section-food-label {
    width: fit-content;
    padding: calc(3 * var(--rem)) calc(5 * var(--rem));
    border: 1px solid #000;
    font-size: calc(11 * var(--rem));
    white-space: nowrap;
  }

  & .section-food-label--product {
    margin-inline: auto;
  }

  & .component-viewmore {
    display: flex;
    align-items: center;
    gap: calc(4 * var(--rem));
    width: fit-content;
    margin-inline: auto;
    padding-bottom: calc(2 * var(--rem));
    border-bottom: 1px solid var(--color-accent);
    font-size: calc(12 * var(--rem));
    font-weight: 600;
    color: var(--color-accent);
    white-space: nowrap;

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

  & .component-viewmore {
    position: relative;

    &::after {
      position: absolute;
      inset: calc(-12 * var(--rem)) calc(-16 * var(--rem));
      content: "";
    }
  }

  & .component-viewmore__icon {
    width: calc(10 * var(--rem));
    height: calc(10 * var(--rem));
    background: url(../img/261016/icon-plus.svg) center / 100% 100% no-repeat, url(../img/261016/icon-minus.svg) center / 0 0 no-repeat;
  }

  & .component-viewmore__close {
    display: none;
  }

  & .is-open > .component-viewmore {
    & .component-viewmore__open {
      display: none;
    }

    & .component-viewmore__close {
      display: inline;
    }

    & .component-viewmore__icon {
      background-image: url(../img/261016/icon-minus.svg);
    }
  }

  & .component-viewmore--about {
    margin-top: calc(5 * var(--rem));
  }

  & .component-viewmore--why {
    margin-top: calc(11 * var(--rem));
  }

  & .section-badge {
    display: grid;
    place-items: center;
    background: center / 100% 100% no-repeat;
    font-weight: 500;
    color: var(--color-green);
    text-align: center;
    white-space: nowrap;
  }

  & .section-badge--slider {
    position: absolute;
    top: calc(10 * var(--rem));
    left: 0;
    width: calc(47 * var(--rem));
    height: calc(47 * var(--rem));
    padding: 0 calc(1 * var(--rem)) calc(1 * var(--rem)) 0;
    background-image: url(../img/261016/badge-ring-slider.svg);
    font-size: calc(13 * var(--rem));
  }

& .section-badge--slider.badge-send {
    left: calc(40 * var(--rem));
}
  & .section-badge--limited {
    font-size: calc(11 * var(--rem));
    line-height: 1.2;
  }

  & .section-badge--gift {
    position: absolute;
    top: calc(-35 * var(--rem));
    left: calc(-35 * var(--rem));
    width: calc(52 * var(--rem));
    height: calc(52 * var(--rem));
    padding: 0 calc(1 * var(--rem)) calc(1 * var(--rem)) 0;
    background-image: url(../img/261016/badge-ring-gift.svg);
    font-size: calc(12 * var(--rem));
  }

  & .section-badge__num {
    font-size: calc(15 * var(--rem));
    letter-spacing: .05em;
  }
}

.lp_contents {
  & .project-mv {
    margin: 0;
  }

  & .project-entry {
    width: calc(350 * var(--rem));
    margin: calc(41 * var(--rem)) auto 0;
    padding: calc(35 * var(--rem)) 0 calc(25 * var(--rem));
    border-radius: calc(10 * var(--rem));
    background-color: #fcfcd4;
    text-align: center;
  }

  & .project-entry__title {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  & .project-entry__slash {
    width: calc(13 * var(--rem));
  }

  & .project-entry__title-text {
    margin: calc(1 * var(--rem)) calc(1 * var(--rem)) 0 calc(3 * var(--rem));
    font-size: calc(19 * var(--rem));
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-entry__period {
    width: calc(280 * var(--rem));
    margin: calc(17 * var(--rem)) auto 0;
    padding: calc(9 * var(--rem)) 0;
    border-block: 1px solid var(--color-text);
    font-size: calc(13 * var(--rem));
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
  }

  & .project-entry__period-num {
    font-size: calc(17 * var(--rem));
    letter-spacing: .02em;
  }

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

  & .project-entry__brand-logo {
    width: calc(90 * var(--rem));
  }

  & .project-entry__brand-cross {
    width: calc(16 * var(--rem));
  }

  & .project-entry__brand-name {
    font-family: var(--font-display);
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    color: #917254;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-entry__name {
    margin-top: calc(10 * var(--rem));
    font-family: var(--font-display);
    font-size: calc(26 * var(--rem));
    font-weight: 700;
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .project-entry__button {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(150 * var(--rem));
    height: calc(40 * var(--rem));
    margin: calc(15 * var(--rem)) auto 0;
    border-radius: calc(100 * var(--rem));
    background-color: #fafab3;
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    color: var(--color-accent);
    white-space: nowrap;

    &::before {
      position: absolute;
      inset: calc(5 * var(--rem));
      border: 1px solid var(--color-accent);
      border-radius: calc(100 * var(--rem));
      content: "";
    }

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

  & .project-entry__button-icon {
    position: absolute;
    top: calc(15 * var(--rem));
    left: calc(125 * var(--rem));
    width: calc(10 * var(--rem));
  }

  & .project-about {
    width: calc(350 * var(--rem));
    margin: calc(40 * var(--rem)) auto 0;
    padding: calc(34 * var(--rem)) 0 calc(32 * var(--rem));
    border: 1px solid #917254;
    border-radius: calc(10 * var(--rem));
    background-color: #ffffef;
    text-align: center;
  }

  & .project-about__title {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: calc(2 * var(--rem));
  }

  & .project-about__title-logo {
    width: calc(108 * var(--rem));
  }

  & .project-about__title-text {
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-about__lead {
    margin-top: calc(20 * var(--rem));
    font-size: calc(18 * var(--rem));
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  & .project-about__body {
    position: relative;
    max-height: calc(100 * var(--rem));
    margin-top: calc(12 * var(--rem));

    &::after {
      position: absolute;
      top: calc(70 * var(--rem));
      left: 0;
      right: 0;
      width: calc(300 * var(--rem));
      height: calc(30 * var(--rem));
      margin-inline: auto;
      background: linear-gradient(rgb(255 255 239 / .5), #ffffef);
      transition: opacity .4s var(--transition-timing);
      pointer-events: none;
      content: "";
    }
  }

  & .project-about.is-open .project-about__body::after {
    opacity: 0;
  }

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

  & .project-seasons {
    margin-top: calc(60 * var(--rem));
    text-align: center;
  }

  & .project-seasons__title {
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .project-seasons__title-sub {
    display: block;
    font-size: calc(20 * var(--rem));
    line-height: 1.48;
    letter-spacing: .1em;
  }

  & .project-seasons__title-main {
    display: block;
    font-size: calc(26 * var(--rem));
    letter-spacing: .1em;
  }

  & .project-seasons__image {
    width: calc(300 * var(--rem));
    margin: calc(20 * var(--rem)) auto 0;

    & img {
      border-radius: calc(8 * var(--rem));
    }
  }

  & .project-seasons__copy {
    margin-top: calc(20 * var(--rem));
    font-size: calc(15 * var(--rem));
    font-weight: 400;
    line-height: 1.8;
    white-space: nowrap;
  }

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

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

  & .project-why__bubble {
    position: relative;
    width: calc(280 * var(--rem));
    margin-left: calc(56 * var(--rem));
  }

  & .project-why__title {
    position: absolute;
    top: calc(48 * var(--rem));
    left: 0;
    right: 0;
    font-size: calc(20 * var(--rem));
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
    white-space: nowrap;
  }

  & .project-why__point {
    width: calc(360 * var(--rem));
    margin: calc(6 * var(--rem)) auto 0;
  }

  & .project-why__point--2,
  & .project-why__point--3 {
    padding-top: calc(16 * var(--rem));
    background: repeating-linear-gradient(90deg, var(--color-text) 0 var(--dash), transparent var(--dash) calc(var(--dash) * 2)) left top / 100% var(--dash-w) no-repeat;
  }

  & .project-why__point--2 {
    margin-top: calc(22 * var(--rem));
  }

  & .project-why__point--3 {
    margin-top: calc(17 * var(--rem));
  }

  & .project-why__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  & .project-why__head-title {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .project-why__head-icon {
    width: calc(30 * var(--rem));
  }

  & .project-why__badge {
    padding: calc(2 * var(--rem)) calc(8 * var(--rem));
    border: 1px solid var(--color-green);
    border-radius: calc(100 * var(--rem));
    background-color: #fdffd9;
    font-size: calc(11 * var(--rem));
    font-weight: 600;
    color: var(--color-green);
    white-space: nowrap;
  }

  & .project-why__badge-num {
    font-size: calc(14 * var(--rem));
    letter-spacing: .05em;
  }

  & .project-why__body {
    position: relative;
    width: calc(355 * var(--rem));
    max-height: calc(70 * var(--rem));
    margin: calc(8 * var(--rem)) 0 0 calc(5 * var(--rem));

    &::after {
      position: absolute;
      top: calc(56 * var(--rem));
      left: 0;
      width: calc(350 * var(--rem));
      height: calc(40 * var(--rem));
      background: linear-gradient(rgb(255 255 232 / .5), var(--color-bg));
      transition: opacity .4s var(--transition-timing);
      pointer-events: none;
      content: "";
    }
  }

  & .project-why__point.is-open .project-why__body::after {
    opacity: 0;
  }

  & .project-why__text {
    font-size: calc(14 * var(--rem));
    line-height: 1.7857;
    /* white-space: nowrap; */
  }

  & .project-why__text--open {
    margin: calc(8 * var(--rem)) 0 0 calc(5 * var(--rem));
  }

  & .project-recommend {
    position: relative;
    margin-top: calc(51 * var(--rem));
    padding: calc(39 * var(--rem)) 0 calc(31 * var(--rem));
    background-color: #fbf8d8;

    &::after {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: calc(20 * var(--rem));
      background-color: #fbf8d8;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      content: "";
    }
  }

  & .project-recommend__title {
    font-size: calc(20 * var(--rem));
    font-weight: 600;
    color: var(--color-accent);
    text-align: center;
    white-space: nowrap;
  }

  & .project-recommend__list {
    display: flex;
    flex-direction: column;
    gap: calc(6 * var(--rem));
    width: calc(350 * var(--rem));
    margin: calc(20 * var(--rem)) auto 0;
  }

  & .project-recommend__item {
    display: flex;
    gap: calc(6 * var(--rem));
    padding: calc(10 * var(--rem)) calc(12 * var(--rem));
    border-radius: calc(8 * var(--rem));
    background-color: rgb(255 255 255 / .8);
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
    /* white-space: nowrap; */
    

    &::before {
      flex-shrink: 0;
      width: calc(16 * var(--rem));
      height: calc(18 * var(--rem));
      background: url(../img/261016/icon-check.svg) center / 100% 100% no-repeat;
      content: "";
    }
  }

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

  & .project-choose__bubble {
    position: relative;
    width: calc(312 * var(--rem));
    margin-left: calc(40 * var(--rem));
  }

  & .project-choose__title {
    position: absolute;
    top: calc(39 * var(--rem));
    left: 0;
    right: 0;
    font-weight: 600;
    color: var(--color-accent);
    text-align: center;
    white-space: nowrap;
  }

  & .project-choose__title-sub {
    display: block;
    font-size: calc(16 * var(--rem));
    line-height: 1.5188;
    letter-spacing: .05em;
  }

  & .project-choose__title-main {
    display: block;
    font-size: calc(24 * var(--rem));
    line-height: 1.35;
    letter-spacing: .05em;
  }

  & .project-choose__title-small {
    font-size: calc(16 * var(--rem));
    letter-spacing: .05em;
  }

  & .project-choose__product {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--rem));
    margin: calc(8 * var(--rem)) 0 0 calc(43 * var(--rem));
  }

  & .project-choose__product-image {
    position: relative;
    flex-shrink: 0;
    width: calc(130 * var(--rem));

    &::before {
      position: absolute;
      top: calc(191 * var(--rem));
      left: calc(21 * var(--rem));
      z-index: 0;
      width: calc(130 * var(--rem));
      height: calc(14 * var(--rem));
      border-radius: 50%;
      background-color: rgb(0 0 0 / .06);
      filter: blur(calc(5 * var(--rem)));
      content: "";
    }

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

  & .project-choose__product-name {
    margin-top: calc(10 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
  }

  & .project-ingredient {
    position: relative;
    width: calc(350 * var(--rem));
    height: calc(500 * var(--rem));
    margin: calc(30 * var(--rem)) auto 0;
    border: 1px solid var(--color-accent);
    border-radius: calc(10 * var(--rem));
    overflow: hidden;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(59 * var(--rem));
      background-color: #fefedd;
      content: "";
    }
  }

  & .project-ingredient__title {
    position: relative;
    margin-top: calc(11 * var(--rem));
    font-size: calc(18 * var(--rem));
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-accent);
    text-align: center;
    white-space: nowrap;
  }

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

  & .project-ingredient__divider {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(348 * var(--rem));
    pointer-events: none;
  }

  & .project-ingredient__lines {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(350 * var(--rem));
    pointer-events: none;
  }

  & .project-ingredient__pie {
    position: absolute;
    display: block;

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

    &:focus-visible {
      opacity: .7;
    }
  }

  & .project-ingredient__pie--acerola {
    top: calc(134 * var(--rem));
    left: calc(75 * var(--rem));
    width: calc(96 * var(--rem));
    clip-path: polygon(0 54.9%, 1.6% 49.7%, 4.2% 43.8%, 7.3% 38.5%, 12% 32.3%, 15.1% 28.8%, 23.4% 21.5%, 32.3% 15.6%, 38% 12.5%, 47.4% 8.3%, 58.9% 4.5%, 68.8% 2.1%, 81.8% 0, 99% 0, 99% 66%, 96.9% 67%, 68.2% 78.1%, 22.4% 95.8%, 15.1% 98.6%, 12.5% 99.3%, 7.3% 92.7%, 4.2% 87.5%, 1.6% 81.6%, 0 76.4%);
  }

  & .project-ingredient__pie--tetrasod {
    top: calc(134 * var(--rem));
    left: calc(178 * var(--rem));
    width: calc(96 * var(--rem));
    clip-path: polygon(0 0, 16.1% 0, 27.6% 1.7%, 39.1% 4.5%, 49.5% 8%, 56.8% 11.1%, 63.5% 14.6%, 71.4% 19.4%, 75.5% 22.6%, 80.7% 27.1%, 85.4% 31.9%, 91.1% 39.6%, 94.8% 46.5%, 96.9% 52.1%, 98.4% 59%, 98.4% 71.9%, 96.4% 80.2%, 94.3% 85.4%, 90.1% 92.7%, 86.5% 97.6%, 84.9% 99%, 81.2% 97.9%, 4.2% 68.1%, 0 66.3%);
  }

  & .project-ingredient__pie--folate {
    top: calc(234 * var(--rem));
    left: calc(90 * var(--rem));
    width: calc(166 * var(--rem));
    clip-path: polygon(0 49%, 3.9% 44.8%, 44.3% 4.7%, 49.1% 0, 50.3% .5%, 90.7% 40.6%, 99.4% 49.5%, 97.3% 56.2%, 92.2% 67.7%, 84.6% 79.7%, 80.7% 84.4%, 73.5% 91.1%, 67.5% 95.3%, 62% 97.9%, 53.9% 100%, 45.5% 100%, 38.6% 98.4%, 34.3% 96.9%, 28% 93.2%, 21.7% 88%, 15.1% 80.7%, 7.8% 69.8%, 3.9% 62%, 0 52.1%);
  }

  & .project-ingredient__dot {
    position: absolute;
    width: calc(12 * var(--rem));
    height: calc(12 * var(--rem));
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 calc(20 * var(--rem)) rgb(0 0 0 / .5);
    pointer-events: none;
  }

  & .project-ingredient__dot--acerola {
    top: calc(194 * var(--rem));
    left: calc(122 * var(--rem));
  }

  & .project-ingredient__dot--tetrasod {
    top: calc(194 * var(--rem));
    left: calc(218 * var(--rem));
  }

  & .project-ingredient__dot--folate {
    top: calc(281 * var(--rem));
    left: calc(167 * var(--rem));
  }

  & .project-ingredient__label {
    position: absolute;
    white-space: nowrap;
    pointer-events: none;
  }

  & .project-ingredient__label--acerola {
    top: calc(80 * var(--rem));
    left: calc(19 * var(--rem));
  }

  & .project-ingredient__label--tetrasod {
    top: calc(80 * var(--rem));
    left: calc(218 * var(--rem));
  }

  & .project-ingredient__label--folate {
    top: calc(287 * var(--rem));
    left: calc(21 * var(--rem));
  }

  & .project-ingredient__label-en {
    margin-left: calc(2 * var(--rem));
    font-size: calc(10 * var(--rem));
    font-weight: 500;
    color: rgb(219 96 16 / .5);
  }

  & .project-ingredient__label-num {
    font-size: calc(12 * var(--rem));
    letter-spacing: .05em;
  }

  & .project-ingredient__label-name {
    margin-top: calc(9 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 600;
    color: var(--color-accent);
  }

  & .project-ingredient__label-text {
    margin-top: calc(5 * var(--rem));
    font-size: calc(13 * var(--rem));
    font-weight: 500;
  }

  & .project-ingredient__label--tetrasod,
  & .project-ingredient__label--folate {
    & .project-ingredient__label-name {
      margin-top: calc(8 * var(--rem));
      font-size: calc(15 * var(--rem));
    }
  }

  & .project-ingredient__label--tetrasod .project-ingredient__label-text {
    margin-top: calc(6 * var(--rem));
  }

  & .project-ingredient__label--folate {
    & .project-ingredient__label-en {
      margin-left: 0;
    }

    & .project-ingredient__label-text {
      margin-top: calc(7 * var(--rem));
    }
  }

  & .project-ingredient__summary {
    position: absolute;
    top: calc(367 * var(--rem));
    left: calc(24 * var(--rem));
    width: calc(300 * var(--rem));
    height: calc(106 * var(--rem));
    padding-top: calc(16 * var(--rem));
    border-radius: calc(10 * var(--rem));
    background-color: #fdffd1;
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-accent);
    text-align: center;
    white-space: nowrap;
  }

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

  & .section-price {
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--rem));
    width: calc(350 * var(--rem));
    margin: calc(30 * var(--rem)) auto 0;
  }

  & .section-price--product {
    margin-top: calc(20 * var(--rem));
  }

  & .section-price__item {
    border-radius: calc(10 * var(--rem));
    background-color: rgb(255 255 255 / .7);
    box-shadow: 0 0 calc(20 * var(--rem)) rgb(0 0 0 / .05);
  }

  & .section-price__link {
    display: flex;
    align-items: center;
    height: calc(70 * var(--rem));
    padding: 0 calc(17 * var(--rem)) 0 calc(15 * var(--rem));
  }

  & .section-price__label {
    font-size: calc(14 * var(--rem));
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
  }

  & .section-price__label-lead {
    font-size: calc(12 * var(--rem));
    letter-spacing: .05em;
  }

  & .section-price__item:first-child .section-price__label-lead {
    color: var(--color-accent);
  }

  & .section-price__label-num {
    font-size: calc(16 * var(--rem));
    letter-spacing: .05em;
  }

  & .section-price__label-deal {
    font-size: calc(14 * var(--rem));
    color: var(--color-red);
    letter-spacing: .05em;
  }

  & .section-price__price {
    margin-left: auto;
    font-size: calc(20 * var(--rem));
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
  }

  & .section-price__tax {
    margin-left: calc(4 * var(--rem));
    font-size: calc(10 * var(--rem));
    letter-spacing: 0;
  }

  & .section-price__buy {
    margin-left: calc(8 * var(--rem));
    padding: calc(6 * var(--rem)) calc(18 * var(--rem));
    border-radius: calc(100 * var(--rem));
    background-color: var(--color-accent);
    font-size: calc(14 * var(--rem));
    font-weight: 600;
    color: #fff;
    letter-spacing: .05em;
  }

  & .section-price__item--best {
    & .section-price__price {
      color: var(--color-red);
    }

    & .section-price__buy {
      background-color: var(--color-red);
    }
  }

  & .project-comments {
    width: calc(350 * var(--rem));
    margin: calc(60 * var(--rem)) auto 0;
    padding: calc(35 * var(--rem)) 0 calc(30 * var(--rem));
    border-radius: calc(10 * var(--rem));
    background-color: var(--color-bg-card);
  }

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

  & .project-comments__person {
    position: relative;
    display: flex;
    align-items: flex-start;
  }

  & .project-comments__avatar {
    flex-shrink: 0;
    width: calc(110 * var(--rem));
    margin-left: calc(25 * var(--rem));

    & img {
      border-radius: 50%;
      box-shadow: 0 0 0 calc(3 * var(--rem)) var(--color-bg), 0 0 calc(4 * var(--rem)) calc(3 * var(--rem)) rgb(0 0 0 / .05);
    }
  }

  & .project-comments__bubble {
    position: absolute;
    top: 0;
    left: calc(100 * var(--rem));
    padding: calc(6 * var(--rem)) calc(10 * var(--rem));
    border-radius: calc(10 * var(--rem));
    background-color: #feffe7;
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .project-comments__bubble--second {
    top: calc(23 * var(--rem));
    left: calc(124 * var(--rem));
  }

  & .project-comments__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: calc(16 * var(--rem));
  }

  & .project-comments__name {
    margin-top: calc(59 * var(--rem));
    font-size: calc(13 * var(--rem));
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
  }

  & .project-comments__name-main {
    font-size: calc(16 * var(--rem));
    letter-spacing: .05em;
  }

  & .project-comments__button {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(4 * var(--rem));
    min-width: calc(90 * var(--rem));
    margin-top: calc(3 * var(--rem));
    padding-top: calc(5 * var(--rem));
    border-bottom: 1px solid currentColor;
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    white-space: nowrap;

    &::after {
      position: absolute;
      inset: calc(-12 * var(--rem)) calc(-16 * var(--rem));
      content: "";
    }

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

  & .project-comments__button-icon {
    width: calc(10 * var(--rem));
    height: calc(10 * var(--rem));
    background: url(../img/261016/icon-plus-profile.svg) center / 100% 100% no-repeat, url(../img/261016/icon-minus-profile.svg) center / 0 0 no-repeat;
  }

  & .project-comments__profile.is-open .project-comments__button-icon {
    background-image: url(../img/261016/icon-minus-profile.svg);
  }

  & .project-comments__bio {
    margin-top: calc(4 * var(--rem));
    visibility: hidden;
    transition: max-height .4s var(--transition-timing), visibility 0s .4s;
  }

  & .project-comments__profile.is-open .project-comments__bio {
    visibility: visible;
    transition-delay: 0s;
  }

  & .project-comments__bio-text {
    margin: calc(6 * var(--rem))  calc(25 * var(--rem)) 0 calc(25 * var(--rem));
    font-size: calc(11 * var(--rem));
    line-height: 1.6364;
    /* white-space: nowrap; */
    background: #FAF4D3;
    padding: calc(9 * var(--rem));
  }

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

  & .project-comments__body {
    position: relative;
    width: calc(304 * var(--rem));
    max-height: calc(200 * var(--rem));
    margin-left: calc(25 * var(--rem));

    &::after {
      position: absolute;
      top: calc(150 * var(--rem));
      left: 0;
      width: calc(300 * var(--rem));
      height: calc(50 * var(--rem));
      background: linear-gradient(rgb(255 250 220 / .5), var(--color-bg-card));
      transition: opacity .4s var(--transition-timing);
      pointer-events: none;
      content: "";
    }
  }

  & .project-comments__main.is-open .project-comments__body::after {
    opacity: 0;
  }

  & .project-comments__text {
    font-size: calc(14 * var(--rem));
    line-height: 1.7857;
    /* white-space: nowrap; */
  }

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

  & .project-staff__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(350 * var(--rem));
    margin: calc(25 * var(--rem)) auto 0;
  }

  & .project-staff__person {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--rem));
  }

  & .project-staff__avatar {
    width: calc(60 * var(--rem));

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

  & .project-staff__info {
    font-size: calc(11 * var(--rem));
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
  }

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

  & .project-staff__info-name {
    font-size: calc(14 * var(--rem));
    letter-spacing: .05em;
    padding-top: calc(4 * var(--rem));
    display: block;
  }

  & .project-staff__profile-link {
    position: relative;
    display: flex;
    align-items: center;
    width: calc(120 * var(--rem));
    height: calc(26 * var(--rem));
    margin-top: calc(20 * var(--rem));
    padding-left: calc(19 * var(--rem));
    border: 1px solid var(--color-text);
    border-radius: calc(100 * var(--rem));
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    white-space: nowrap;

    &::after {
      position: absolute;
      top: calc(8 * var(--rem));
      left: calc(101 * var(--rem));
      width: calc(8 * var(--rem));
      height: calc(8 * var(--rem));
      background: url(../img/261016/icon-chevron-profile.svg) center / 100% 100% no-repeat;
      content: "";
    }
  }

  & .project-staff__photo {
    width: calc(180 * var(--rem));

    & img {
      border-radius: calc(8 * var(--rem));
    }
  }

  & .project-staff__text {
    width: calc(350 * var(--rem));
    margin: calc(15 * var(--rem)) auto 0;
    font-size: calc(14 * var(--rem));
    line-height: 1.7857;
    /* white-space: nowrap; */
  }

  & .project-staff__more {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(10 * var(--rem));
    padding-right: calc(21 * var(--rem));
  }

  & .project-staff__more-link {
    display: flex;
    align-items: center;
    gap: calc(4 * var(--rem));
    padding-bottom: calc(2 * var(--rem));
    border-bottom: 1px solid var(--color-accent);
    font-size: calc(12 * var(--rem));
    font-weight: 600;
    color: var(--color-accent);
    white-space: nowrap;

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

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

  & .project-review__score {
    width: calc(350 * var(--rem));
    margin: calc(25 * var(--rem)) auto 0;
    padding: calc(15 * var(--rem)) 0 calc(20 * var(--rem));
    border-radius: calc(10 * var(--rem));
    background-color: var(--color-bg-card);
    text-align: center;
  }

  & .project-review__rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(14 * var(--rem));
  }

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

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

  & .project-review__rating-num {
    font-size: calc(30 * var(--rem));
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: .05em;
  }

  & .project-review__count {
    margin-top: calc(15 * var(--rem));
    font-size: calc(14 * var(--rem));
    white-space: nowrap;
  }

  & .project-review__date {
    margin-top: calc(8 * var(--rem));
    font-size: calc(11 * var(--rem));
    white-space: nowrap;
  }

  & .project-review__note {
    width: calc(350 * var(--rem));
    margin: calc(15 * var(--rem)) auto 0;
    font-size: calc(11 * var(--rem));
    line-height: 1.6;
    white-space: nowrap;
  }

  & .project-review__card {
    position: relative;
    width: calc(310 * var(--rem));
    margin: calc(16 * var(--rem)) 0 0 calc(30 * var(--rem));
    padding: calc(14 * var(--rem)) calc(18 * var(--rem)) calc(14 * var(--rem)) calc(14 * var(--rem));
    border: 1px solid #ededa3;
    border-radius: calc(8 * var(--rem)) calc(8 * var(--rem)) calc(7 * var(--rem)) calc(8 * var(--rem));
    background-color: #ffffdf;

    &::before,
    &::after {
      position: absolute;
      top: 100%;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      content: "";
    }

    &::before {
      left: calc(119 * var(--rem));
      width: calc(14 * var(--rem));
      height: calc(15 * var(--rem));
      background-color: #ededa3;
    }

    &::after {
      left: calc(120 * var(--rem));
      width: calc(12 * var(--rem));
      height: calc(13 * var(--rem));
      background-color: #ffffdf;
    }
  }

  & .project-review__card--second {
    margin: calc(20 * var(--rem)) 0 0 calc(50 * var(--rem));
  }

  & .project-review__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  & .project-review__card-stars {
    display: flex;
    gap: calc(2 * var(--rem));

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

  & .project-review__card-name {
    font-size: calc(12 * var(--rem));
    white-space: nowrap;
  }

  & .project-review__card-honorific {
    font-size: calc(10 * var(--rem));
    letter-spacing: .05em;
  }

  & .project-review__card-title {
    margin-top: calc(5 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 600;
    line-height: 1.5714;
    white-space: nowrap;
  }

  & .project-review__card-text {
    margin-top: calc(5 * var(--rem));
    font-size: calc(13 * var(--rem));
    line-height: 1.6154;
    /* white-space: nowrap; */
  }

  & .project-product {
    margin-top: calc(30 * var(--rem));
    text-align: center;
  }

  & .project-product__image {
    position: relative;
    width: calc(160 * var(--rem));
    margin-inline: auto;

    &::before {
      position: absolute;
      top: calc(235 * var(--rem));
      left: calc(27 * var(--rem));
      z-index: 0;
      width: calc(160 * var(--rem));
      height: calc(14 * var(--rem));
      border-radius: 50%;
      background-color: rgb(0 0 0 / .06);
      filter: blur(calc(5 * var(--rem)));
      content: "";
    }

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

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

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

  & .project-preorder,
  & .project-limited {
    margin-top: calc(60 * var(--rem));
  }

  & .section-slider {
    position: relative;
    margin-top: calc(25 * var(--rem));
  }

  & .section-slider__slide {
    width: calc(290 * var(--rem));
    height: calc(390 * var(--rem));
    margin-inline: calc(15 * var(--rem) / 2);
    padding: calc(20 * var(--rem)) calc(20 * var(--rem)) 0;
    border-radius: calc(10 * var(--rem));
    background-color: rgb(255 255 255 / .5);
    box-shadow: 0 0 calc(20 * var(--rem)) rgb(0 0 0 / .05);
    margin-bottom: calc(20 * var(--rem));
  }

  & .section-slider__catch {
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
    color: var(--color-accent);
    text-align: center;
    white-space: nowrap;
  }

  & .section-slider__visual {
    position: relative;
    width: calc(250 * var(--rem));
    background-color: #fffff3;
  }

  & .section-slider__image {
    display: block;
  }

  & .section-slider__band {
    width: calc(250 * var(--rem));
    padding: calc(4 * var(--rem)) calc(5 * var(--rem));
    background-color: #fff7dc;
    font-size: calc(12 * var(--rem));
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
  }

  & .section-slider__info {
    display: block;
  }

  & .section-slider__info--band {
    margin-top: calc(10 * var(--rem));
  }

  & .section-slider__brand {
    display: block;
    font-size: calc(13 * var(--rem));
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
  }

  & .section-slider__name {
    display: block;
    margin-top: calc(2 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 1.4;
    white-space: nowrap;
  }

  & .section-slider__price {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: calc(10 * var(--rem));
  }

  & .section-slider__yen {
    margin-top: calc(4 * var(--rem));
    font-size: calc(18 * var(--rem));
    font-weight: 600;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .section-slider__tax {
    margin-left: calc(3 * var(--rem));
    font-size: calc(11 * var(--rem));
    font-weight: 400;
    letter-spacing: .05em;
  }

  & .section-slider__buy {
    padding: calc(6 * var(--rem)) calc(18 * var(--rem));
    border-radius: calc(100 * var(--rem));
    background-color: var(--color-accent);
    font-size: calc(14 * var(--rem));
    font-weight: 600;
    color: #fff;
    letter-spacing: .05em;
  }

  & .section-slider__note {
    margin-top: calc(10 * var(--rem));
    font-size: calc(10 * var(--rem));
    line-height: 1.4;
    white-space: nowrap;
  }

  & .section-slider__arrow {
    position: absolute;
    top: calc(178 * var(--rem));
    z-index: var(--z-base);
    width: calc(34 * var(--rem));
    height: calc(34 * var(--rem));
    background: url(../img/261016/icon-arrow-next.svg) center / 100% 100% no-repeat;

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

  & .section-slider__arrow--prev {
    left: calc(26 * var(--rem));
    rotate: 180deg;
  }

  & .section-slider__arrow--next {
    right: calc(26 * var(--rem));
  }

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

    & .swiper-pagination-bullet {
      position: relative;
      width: calc(8 * var(--rem));
      height: calc(8 * var(--rem));
      margin: 0;
      background-color: var(--color-accent);
      opacity: .2;
      cursor: pointer;
    }

    & .swiper-pagination-bullet-active {
      opacity: 1;
    }

    & .swiper-pagination-bullet::after {
      position: absolute;
      inset: calc(-8 * var(--rem));
      content: "";
    }
  }

  & .project-campaign {
    margin-top: calc(60 * var(--rem));
    padding: calc(50 * var(--rem)) 0;
    background-color: #fcfcd4;
  }

  & .section-campaign {
    text-align: center;
  }

  & .section-campaign--modal {
    padding: calc(60 * var(--rem)) 0 calc(50 * var(--rem));
  }

  & .section-campaign__period {
    width: calc(350 * var(--rem));
    margin: calc(24 * var(--rem)) auto 0;
    padding: calc(9 * var(--rem)) 0;
    border-block: 1px solid var(--color-text);
    font-size: calc(16 * var(--rem));
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
  }

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

  & .section-campaign__card {
    width: calc(350 * var(--rem));
    margin: calc(24 * var(--rem)) auto 0;
    padding: calc(25 * var(--rem)) 0 calc(28 * var(--rem));
    border: 1px solid var(--color-accent);
    border-radius: calc(10 * var(--rem));
    background-color: #ffffeb;
  }

  & .section-campaign__card--gift {
    margin-top: calc(15 * var(--rem));
    padding-top: calc(24 * var(--rem));
    padding-bottom: calc(27 * var(--rem));
  }

  & .section-campaign__label {
    width: fit-content;
    margin-inline: auto;
    padding: calc(2 * var(--rem)) calc(8 * var(--rem));
    border: 1px solid var(--color-accent);
    border-radius: calc(100 * var(--rem));
    font-size: calc(11 * var(--rem));
    font-weight: 600;
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .section-campaign__label-num {
    font-size: calc(14 * var(--rem));
    letter-spacing: .05em;
  }

  & .section-campaign__title {
    margin-top: calc(10 * var(--rem));
    font-size: calc(20 * var(--rem));
    font-weight: 600;
    color: var(--color-accent);
    white-space: nowrap;
    text-align: center;
    line-height: 1.4;
  }

  & .section-campaign__icon {
    width: calc(86 * var(--rem));
    margin: calc(14 * var(--rem)) auto 0;
  }
 & .campaign3 .section-campaign__icon {
    width: calc(200 * var(--rem));
    margin-bottom: calc(15 * var(--rem));
}
  & .section-campaign__text {
    font-size: calc(14 * var(--rem));
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    text-align: center;
  }

  & .section-campaign__text--point {
    margin: calc(8 * var(--rem)) auto calc(15 * var(--rem));
  }

  & .section-campaign__text--gift {
    margin-top: calc(10 * var(--rem));
  }

  & .section-campaign__text--gift-second {
    margin: calc(10 * var(--rem)) auto calc(15 * var(--rem));
  }

  & .section-campaign__text-em {
    font-size: calc(16 * var(--rem));
    font-weight: 600;
    letter-spacing: .05em;
  }

  & .section-campaign__text-small {
    font-size: calc(14 * var(--rem));
    letter-spacing: .05em;
  }

  & .section-campaign__text-tax {
    font-size: calc(11 * var(--rem));
    letter-spacing: .05em;
  }

  & .section-campaign__note {
    margin-top: calc(5 * var(--rem));
    font-size: calc(11 * var(--rem));
    line-height: 1.4545;
    white-space: nowrap;
    text-align: center;
  }

  & .section-campaign__gift {
    position: relative;
    width: calc(120 * var(--rem));
    margin: calc(50 * var(--rem)) auto 0;
  }

  & .section-campaign__gift--second {
    margin-top: calc(50 * var(--rem));
  }

  & .section-campaign__start {
    position: absolute;
    top: calc(-25 * var(--rem));
    left: calc(22 * var(--rem));
    font-size: calc(12 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-green);
    white-space: nowrap;
  }

  & .section-campaign__start-date {
    font-size: calc(14 * var(--rem));
    letter-spacing: .05em;
  }

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

  & .project-allitems__button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(350 * var(--rem));
    height: calc(70 * var(--rem));
    margin-inline: auto;
    padding-top: calc(13 * var(--rem));
    border: 1px solid #86674f;
    border-radius: calc(100 * var(--rem));
    background-color: rgb(255 255 255 / .3);
  }

  & .project-allitems__logo {
    width: calc(97 * var(--rem));
  }

  & .project-allitems__text {
    margin-top: calc(10 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    white-space: nowrap;
  }

  & .project-allitems__icon {
    position: absolute;
    top: calc(26 * var(--rem));
    right: calc(26 * var(--rem));
    width: calc(16 * var(--rem));
  }

  & .section-ingredient-detail {
    padding: calc(30 * var(--rem)) calc(25 * var(--rem)) calc(29 * var(--rem));
  }

  & .section-ingredient-detail__image {
    width: calc(150 * var(--rem));
    margin-inline: auto;
  }

  & .section-ingredient-detail__name {
    margin-top: calc(15 * var(--rem));
    font-size: calc(17 * var(--rem));
    font-weight: 600;
    color: var(--color-accent);
    text-align: center;
    white-space: nowrap;
  }

  & .section-ingredient-detail__text {
    margin-top: calc(10 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 1.7857;
    /* white-space: nowrap; */
  }

  & .project-float {
    position: fixed;
    right: calc(10 * var(--rem));
    bottom: calc(10 * var(--rem));
    z-index: var(--z-base);
    width: calc(90 * var(--rem));
    height: calc(90 * var(--rem));
    border-radius: 50%;
    background-color: rgb(250 250 173 / .9);
    box-shadow: 0 0 calc(20 * var(--rem)) rgb(0 0 0 / .05);
    color: var(--color-accent);
    

    &::before {
      position: absolute;
      inset: calc(4 * var(--rem));
      border: 1px solid #f29253;
      border-radius: 50%;
      content: "";
    }

    @media (min-width: 769px) {
      display: none;
    }
  }

  & .project-float__text {
    position: absolute;
    top: calc(24 * var(--rem));
    left: 0;
    right: 0;
    font-family: var(--font-display);
    font-size: calc(13 * var(--rem));
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-float__icon {
    position: absolute;
    top: calc(62 * var(--rem));
    left: calc(38 * var(--rem));
    width: calc(14 * var(--rem));
    height: calc(14 * var(--rem));
    background: url(../img/261016/icon-plus-rail.svg) center / 100% 100% no-repeat;
  }
}

.lp_contents {
  & .project-rail-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  & .project-rail-intro__logo {
    width: calc(135 * var(--rem-pc));
  }

  & .project-rail-intro__lead {
    margin-top: calc(40 * var(--rem-pc));
    font-size: calc(17 * var(--rem-pc));
    font-weight: 700;
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .project-rail-intro__catch {
    margin-top: calc(12 * var(--rem-pc));
    font-size: calc(30 * var(--rem-pc));
    font-weight: 700;
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .project-rail-intro__kern--0 {
    letter-spacing: 0;
  }

  & .project-rail-intro__kern--4 {
    letter-spacing: .04em;
  }

  & .project-rail-intro__kern--8 {
    letter-spacing: .08em;
  }

  & .project-rail-intro__kern--11 {
    letter-spacing: .11em;
  }

  & .project-rail-intro__kern--12 {
    letter-spacing: .12em;
  }

  & .project-rail-intro__kern--comma {
    letter-spacing: -.35em;
  }

  & .project-rail-intro__kern--quote {
    font-weight: 600;
    letter-spacing: -.03em;
  }

  & .project-rail-intro__kern--quote-end {
    font-weight: 600;
    letter-spacing: .1em;
  }

  & .project-rail-intro__button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(300 * var(--rem-pc));
    height: calc(60 * var(--rem-pc));
    margin-top: calc(80 * var(--rem-pc));
    padding-top: calc(10 * var(--rem-pc));
    border: 1px solid #86674f;
    border-radius: calc(100 * var(--rem-pc));
    background-color: rgb(255 255 255 / .3);
  }

  & .project-rail-intro__button-logo {
    width: calc(97 * var(--rem-pc));
  }

  & .project-rail-intro__button-text {
    margin-top: calc(8 * var(--rem-pc));
    font-size: calc(12 * var(--rem-pc));
    font-weight: 500;
    white-space: nowrap;
  }

  & .project-rail-intro__button-icon {
    position: absolute;
    top: calc(21 * var(--rem-pc));
    right: calc(18 * var(--rem-pc));
    width: calc(16 * var(--rem-pc));
  }

  & .project-rail-nav {
    width: calc(313 * var(--rem-pc));
  }

  & .project-rail-nav__list {
    width: calc(300 * var(--rem-pc));
    border-top: 1px solid var(--color-line-pc);
  }

  & .project-rail-nav__item {
    border-bottom: 1px solid var(--color-line-pc);
  }

  & .project-rail-nav__link {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(5 * var(--rem-pc));
    padding: calc(15 * var(--rem-pc)) 0 calc(16 * var(--rem-pc)) calc(20 * var(--rem-pc));
    color: var(--color-accent);

    &::before {
      position: absolute;
      top: 50%;
      left: calc(3 * var(--rem-pc));
      width: calc(5 * var(--rem-pc));
      height: calc(10 * var(--rem-pc));
      background-color: var(--color-accent);
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      opacity: 0;
      translate: 0 -50%;
      transition: opacity .3s var(--transition-timing);
      content: "";
    }

    &.is-current::before {
      opacity: 1;
    }
  }

  & .project-rail-nav__en {
    font-family: var(--font-display);
    font-size: calc(18 * var(--rem-pc));
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-rail-nav__ja {
    font-size: calc(12 * var(--rem-pc));
    font-weight: 500;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-rail-nav__button {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(310 * var(--rem-pc));
    height: calc(70 * var(--rem-pc));
    margin: calc(40 * var(--rem-pc)) 0 0 calc(3 * var(--rem-pc));
    border-radius: calc(100 * var(--rem-pc));
    background-color: #fafab3;
    font-family: var(--font-display);
    font-size: calc(18 * var(--rem-pc));
    font-weight: 700;
    color: var(--color-accent);
    white-space: nowrap;

    &::before {
      position: absolute;
      inset: calc(5 * var(--rem-pc));
      border: 1px solid var(--color-accent);
      border-radius: calc(100 * var(--rem-pc));
      content: "";
    }

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

  & .project-rail-nav__button-icon {
    position: absolute;
    top: calc(27 * var(--rem-pc));
    left: calc(267 * var(--rem-pc));
    width: calc(16 * var(--rem-pc));
  }
}


.share-txt.sp_only {
    background: #ffffe8;
    margin: 0 !important;
    padding-bottom: calc(40* (100vw / 750));
}