@charset "UTF-8";

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

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

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

.p-feature {
  --base-font-color: #5e4a3e;
  --color-accent: #ff6524;
  --color-bg: #f8f2e6;
  --color-rail: #f9ecd2;
  --color-nav: #f5ebcf;
  --color-white: #fff;
  --color-overlay: color-mix(in srgb, var(--base-font-color) 85%, transparent);
  --color-divider: color-mix(in srgb, var(--base-font-color) 30%, transparent);

  --lp-font-ja: noto-sans-cjk-jp, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --lp-font-en: poppins, noto-sans-cjk-jp, "Noto Sans JP", sans-serif;
  --lp-font-display: spalla, poppins, noto-sans-cjk-jp, serif;

  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);
  --letter-spacing: .075em;
  --size-en-shift: .18em;

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

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

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

  & :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, a, button, figure, figcaption, span, sup, b) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: var(--letter-spacing);
  }

  & ul,
  & li {
    list-style: none;
  }

  & :where(img) {
    display: block;
    width: 100%;
    height: auto;
  }

  & sup {
    top: 0;
    font-size: .6em;
    vertical-align: super;
  }

  & :where(a, a:before, a:after, a img, button) {
    --duration: .3s;
    --timing: ease-in-out;
    transition: opacity var(--duration) var(--timing), color var(--duration) var(--timing), background-color var(--duration) var(--timing), border-color var(--duration) var(--timing);
  }

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

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

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

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

  & :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 {
  & .u-d-lg {
    @media (max-width: 768px) {
      display: none !important;
    }
  }

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

  & .u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.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: none;
    padding-block: calc(30 * var(--rem, 1px));
    background: rgb(0 0 0 / .7);

    &.is-open {
      display: block;
    }
  }

  & .modal_outside {
    width: 100%;
    max-width: calc(670 * var(--rem, 1px));
    height: 100%;
    margin-inline: auto;
    background: #fff;
    overflow: hidden;
  }

  & .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;
    }
  }
}

.lp_contents {
  & .ani-zoom {
    transition: scale 2s ease;
  }
}

html.js .lp_contents {
  & .component-campaign--accordion .component-campaign__perks {
    max-height: calc(374 * var(--rem));

    &::after {
      content: "";
      position: absolute;
      right: 1px;
      bottom: 0;
      left: 1px;
      height: calc(152 * var(--rem));
      background: linear-gradient(to bottom, rgb(255 255 255 / 0), var(--color-white));
      pointer-events: none;
      transition: opacity .4s var(--transition-timing);
    }
  }

  & .component-campaign--accordion.is-open .component-campaign__perks::after {
    opacity: 0;
  }

  & .component-campaign__toggle {
    display: flex;
  }

  & .ani-zoom {
    scale: 1.1;

    &.is-active {
      scale: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .lp_contents .ani-zoom {
    scale: 1;
    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;
  }

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

@media (min-width: 769px) {
  .lp_contents {
    background: var(--color-rail);
  }
}

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

  & .project-rail-nav {
    display: grid;
    justify-items: center;
    width: calc(294 * var(--rem-pc));
    white-space: nowrap;
  }

  & .project-rail-nav__title {
    font-family: var(--lp-font-display);
    font-size: calc(30 * var(--rem-pc));
    line-height: 1.4;
    color: var(--color-accent);
  }

  & .project-rail-nav__sub {
    margin-top: calc(-2 * var(--rem-pc));
    font-size: calc(12 * var(--rem-pc));
    line-height: 1.4;
  }

  & .project-rail-nav__list {
    display: grid;
    row-gap: calc(15 * var(--rem-pc));
    justify-items: center;
    margin-top: calc(22 * var(--rem-pc));
  }

  & .project-rail-nav__link {
    display: grid;
    justify-items: center;
  }

  & .project-rail-nav__num {
    display: flex;
    align-items: center;
    column-gap: calc(2 * var(--rem-pc));
    font-family: var(--lp-font-display);
    font-size: calc(16 * var(--rem-pc));
    line-height: calc(18 * var(--rem-pc));
    letter-spacing: .075em;
    color: var(--color-accent);

    &::after {
      content: "";
      width: calc(10 * var(--rem-pc));
      height: calc(6 * var(--rem-pc));
      background: currentColor;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
  }

  & .project-rail-nav__text {
    margin-top: calc(2 * var(--rem-pc));
    font-size: calc(14 * var(--rem-pc));
    line-height: 1.75;
    letter-spacing: 0;
  }

  & .project-rail-nav__campaign {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    width: calc(254 * var(--rem-pc));
    height: calc(75 * var(--rem-pc));
    margin-top: calc(51 * var(--rem-pc));
    padding-top: calc(10 * var(--rem-pc));
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-accent);
  }

  & .project-rail-nav__corner {
    position: absolute;
    top: 0;
    height: auto;

    &.project-rail-nav__corner--tl {
      left: 0;
      width: calc(29 * var(--rem-pc));
    }

    &.project-rail-nav__corner--tr {
      right: 0;
      width: calc(28 * var(--rem-pc));
    }
  }

  & .project-rail-nav__campaign-title {
    font-family: var(--lp-font-display);
    font-size: calc(30 * var(--rem-pc));
    line-height: calc(33 * var(--rem-pc));
    letter-spacing: .075em;
    color: var(--color-accent);
    text-transform: uppercase;
  }

  & .component-period--rail {
    height: calc(30 * var(--rem-pc));
    margin-top: calc(-2 * var(--rem-pc));

    & .component-period__day {
      font-size: calc(18 * var(--rem-pc));
      line-height: calc(30 * var(--rem-pc));
    }

    & .component-period__year,
    & .component-period__time {
      font-size: calc(12 * var(--rem-pc));
    }

    & .component-period__time {
      margin-left: calc(3 * var(--rem-pc));
      line-height: calc(20 * var(--rem-pc));
    }

    & .component-period__sep {
      width: calc(16 * var(--rem-pc));
      margin-left: calc(4 * var(--rem-pc));
    }

    & .component-period__sep + .component-period__day {
      margin-left: calc(4 * var(--rem-pc));
    }
  }
}

.lp_contents {
  & .project-mv__photo {
    overflow: hidden;

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

  & .project-lead {
    margin-top: calc(50 * var(--rem));
    font-size: calc(15 * var(--rem));
    line-height: 2.2;
    text-align: center;
    white-space: nowrap;
  }
}

.lp_contents {
  & .project-campaign {
    display: grid;
    justify-items: center;
    margin-top: calc(45 * var(--rem));
  }

  & .project-campaign--bottom {
    margin-top: calc(60 * var(--rem));
    padding-bottom: calc(60 * var(--rem));
  }

  & .component-campaign {
    position: relative;
    display: grid;
    justify-items: center;
    width: calc(350 * var(--rem));
    padding: calc(30 * var(--rem)) 0 calc(41 * var(--rem));
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-accent);
  }

  & .component-campaign__corner {
    position: absolute;
    height: auto;

    &.component-campaign__corner--tl {
      top: 0;
      left: 0;
      width: calc(35 * var(--rem));
    }

    &.component-campaign__corner--tr {
      top: 0;
      right: 0;
      width: calc(34 * var(--rem));
    }

    &.component-campaign__corner--bl {
      bottom: 0;
      left: 0;
      width: calc(36 * var(--rem));
    }

    &.component-campaign__corner--br {
      bottom: 0;
      right: 0;
      width: calc(35 * var(--rem));
    }
  }

  & .component-campaign__title {
    font-family: var(--lp-font-display);
    font-size: calc(60 * var(--rem));
    line-height: calc(66 * var(--rem));
    color: var(--color-accent);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  & .component-campaign--accordion {
    padding-bottom: calc(40 * var(--rem));
  }

  & .component-campaign__perks {
    position: relative;
    justify-self: stretch;
    max-height: none;
  }

  & .component-campaign__perk {
    display: grid;
    justify-items: center;
    padding: calc(20 * var(--rem)) 0 calc(30 * var(--rem));
    white-space: nowrap;

    & + .component-campaign__perk {
      padding-top: calc(19 * var(--rem));
      border-top: 1px solid var(--color-accent);
    }

    &:last-child {
      padding-bottom: 0;
    }
  }

  & .component-campaign__label {
    display: grid;
    place-items: center;
    width: calc(58 * var(--rem));
    height: calc(23 * var(--rem));
    border-radius: calc(50 * var(--rem));
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-accent);
    font-size: calc(12 * var(--rem));
    line-height: 1.5;
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .component-campaign__lead {
    display: flex;
    align-items: center;
    margin-top: calc(15 * var(--rem));
    column-gap: calc(8 * var(--rem));
    font-size: calc(16 * var(--rem));
    line-height: 1.5;
  }

  & .component-campaign__logo {
    width: calc(165 * var(--rem));
  }

  & .component-campaign__lead--stack {
    flex-direction: column;
    row-gap: calc(9 * var(--rem));
    padding-top: calc(1 * var(--rem));
  }

  & .component-campaign__offer {
    display: flex;
    align-items: flex-start;
    height: calc(45 * var(--rem));
  }

  & .component-campaign__offer--present {
    margin-top: calc(1 * var(--rem));
  }

  & .component-campaign__plus {
    width: calc(12 * var(--rem));
    height: calc(12 * var(--rem));
    margin-top: calc(14 * var(--rem));
    background:
      linear-gradient(var(--color-accent), var(--color-accent)) center / calc(2 * var(--rem)) 100% no-repeat,
      linear-gradient(var(--color-accent), var(--color-accent)) center / 100% calc(2 * var(--rem)) no-repeat;
  }

  & .component-campaign__num,
  & .component-campaign__unit {
    font-family: var(--lp-font-en);
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--color-accent);
  }

  & .component-campaign__num {
    margin-left: calc(1 * var(--rem));
    font-size: calc(30 * var(--rem));

    &:first-child {
      margin-left: 0;
    }
  }

  & .component-campaign__unit {
    margin-top: calc(5 * var(--rem));
    margin-left: calc(1 * var(--rem));
    font-size: calc(25 * var(--rem));
  }

  & .component-campaign__unit--off {
    margin-left: calc(2 * var(--rem));
  }

  & .component-campaign__word {
    margin-top: calc(10 * var(--rem));
    margin-left: calc(4 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .075em;
  }

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

  & .component-campaign__toggle {
    position: relative;
    display: none;
    align-items: center;
    column-gap: calc(6 * var(--rem));
    height: calc(20 * var(--rem));
    margin-top: calc(20 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(12 * var(--rem));
    line-height: calc(20 * var(--rem));
    letter-spacing: .05em;
    color: var(--color-accent);
    white-space: nowrap;

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

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

  & .component-campaign__close {
    display: none;
  }

  & .component-campaign__icon {
    width: calc(12 * var(--rem));
    height: calc(12 * var(--rem));
    background:
      linear-gradient(var(--color-accent), var(--color-accent)) center / 1px 100% no-repeat,
      linear-gradient(var(--color-accent), var(--color-accent)) center / 100% 1px no-repeat;
  }

  & .component-campaign.is-open {
    & .component-campaign__toggle {
      margin-top: calc(11 * var(--rem));
    }

    & .component-campaign__more {
      display: none;
    }

    & .component-campaign__close {
      display: block;
    }

    & .component-campaign__icon {
      background: linear-gradient(var(--color-accent), var(--color-accent)) center / 100% 1px no-repeat;
    }
  }
}

.lp_contents {
  & .component-period {
    display: flex;
    justify-content: center;
    align-items: baseline;
    height: calc(30 * var(--rem));
    font-family: var(--lp-font-en);
    letter-spacing: .05em;
    color: var(--color-accent);
    white-space: nowrap;

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

  & .component-period__day {
    font-size: calc(18 * var(--rem));
    line-height: calc(30 * var(--rem));
  }

  & .component-period__year,
  & .component-period__time {
    font-size: calc(12 * var(--rem));
  }

  & .component-period__time {
    margin-left: calc(3 * var(--rem));
    line-height: calc(20 * var(--rem));
  }

  & .component-period__sep {
    align-self: center;
    width: calc(16 * var(--rem));
    height: 1px;
    margin-left: calc(4 * var(--rem));
    background: currentColor;
  }

  & .component-period__sep + .component-period__day {
    margin-left: calc(4 * var(--rem));
  }

  & .component-period--coupon {
    color: var(--base-font-color);
  }
}

.lp_contents {
  & .component-button {
    display: grid;
    place-items: center;
    width: calc(165 * var(--rem));
    height: calc(40 * var(--rem));
    border-radius: calc(130 * var(--rem));
    background: var(--color-accent);
    font-size: calc(14 * var(--rem));
    line-height: calc(17 * var(--rem));
    color: var(--color-white);
    white-space: nowrap;
  }

  & .component-buy {
    display: grid;
    place-items: center;
    width: calc(165 * var(--rem));
    height: calc(42 * var(--rem));
    border-radius: calc(130 * var(--rem));
    background: var(--color-accent);
    font-family: var(--lp-font-en);
    font-size: calc(16 * var(--rem));
    line-height: calc(26 * var(--rem));
    color: var(--color-white);
    white-space: nowrap;
    padding-top: calc(var(--size-en-shift) * 2);
  }

  & .component-buy--wide {
    width: calc(200 * var(--rem));
    height: calc(45 * var(--rem));
    border-radius: calc(130 * var(--rem));
  }

  & .component-price {
    font-family: var(--lp-font-en);
    font-size: calc(14 * var(--rem));
    line-height: calc(23 * var(--rem));
    white-space: nowrap;
  }

  & .component-price__tax {
    font-size: calc(10 * var(--rem));
    line-height: 1;
    letter-spacing: .075em;
  }

  & .component-code {
    display: flex;
    width: calc(270 * var(--rem));
    height: calc(42 * var(--rem));
  }

  & .component-code__value {
    display: grid;
    place-items: center;
    width: calc(190 * var(--rem));
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-accent);
    font-family: var(--lp-font-en);
    font-size: calc(18 * var(--rem));
    line-height: calc(30 * var(--rem));
    letter-spacing: .05em;
    color: var(--color-accent);
    white-space: nowrap;
    padding-top: calc(var(--size-en-shift) * 2);
  }

  & .component-code__copy {
    width: calc(80 * var(--rem));
    background: var(--color-accent);
    font-family: var(--lp-font-en);
    font-size: calc(13 * var(--rem));
    line-height: calc(21 * var(--rem));
    letter-spacing: .05em;
    color: var(--color-white);
    white-space: nowrap;
    padding-top: calc(var(--size-en-shift) * 2);
  }

  & .component-code--wide {
    width: calc(310 * var(--rem));

    & .component-code__value {
      width: calc(218 * var(--rem));
    }

    & .component-code__copy {
      width: calc(92 * var(--rem));
    }
  }

  & .component-point {
    position: absolute;
    top: calc(305 * var(--rem));
    right: calc(20 * var(--rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(65 * var(--rem));
    height: calc(65 * var(--rem));
    padding-top: calc(17 * var(--rem));
    border-radius: 50%;
    background: var(--color-accent);
    font-family: var(--lp-font-en);
    font-size: calc(12 * var(--rem));
    line-height: calc(20 * var(--rem));
    color: var(--color-white);
    white-space: nowrap;
  }

  & .component-point__icon {
    width: calc(11 * var(--rem));
    height: calc(11 * var(--rem));
    margin-top: calc(2 * var(--rem));
    background:
      linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat,
      linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
  }
}

.lp_contents {
  & .project-trouble {
    margin-top: calc(60 * var(--rem));
  }

  & .project-trouble__title {
    position: relative;
    height: calc(84 * var(--rem));
    padding-top: calc(20 * var(--rem));
    background: var(--color-accent);
    font-size: calc(22 * var(--rem));
    line-height: 2;
    color: var(--color-white);
    text-align: center;
    white-space: nowrap;

    &::after {
      content: "";
      position: absolute;
      top: calc(14 * var(--rem));
      left: calc(305 * var(--rem));
      width: calc(38 * var(--rem));
      height: calc(52 * var(--rem));
      background: url(../img/concern-icon.svg) no-repeat center / 100% 100%;
    }
  }

  & .project-trouble__body {
    display: grid;
    justify-items: center;
    padding: calc(50 * var(--rem)) 0 calc(51 * var(--rem));
    background: var(--color-white);
  }

  & .project-trouble__bubble {
    position: relative;
    z-index: var(--z-base);
    width: calc(272 * var(--rem));
    height: calc(54 * var(--rem));
    padding-top: calc(8 * var(--rem));
    background: url(../img/concern-bubble.svg) no-repeat center / 100% 100%;
    font-size: calc(14 * var(--rem));
    line-height: 2;
    color: var(--color-white);
    text-align: center;
    white-space: nowrap;
  }

  & .project-trouble__diagram {
    width: calc(390 * var(--rem));
    margin-top: calc(-35 * var(--rem));
  }

  & .project-trouble__text {
    margin-top: calc(25 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 1.75;
    text-align: center;
    white-space: nowrap;
  }
}

.lp_contents {
  & .project-salon {
    position: relative;
    display: grid;
    justify-items: center;
    padding-block: calc(60 * var(--rem));
  }

  & .project-salon__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & .project-salon__card {
    position: relative;
    display: grid;
    justify-items: center;
    width: calc(350 * var(--rem));
    padding-bottom: calc(35 * var(--rem));
    background: rgb(255 255 255 / .8);
    -webkit-backdrop-filter: blur(calc(15 * var(--rem)));
    backdrop-filter: blur(calc(15 * var(--rem)));
  }

  & .project-salon__badge {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(150 * var(--rem));
    height: calc(30 * var(--rem));
    margin-top: calc(-15 * var(--rem));
    border-radius: calc(30 * var(--rem));
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-accent);
    font-family: var(--lp-font-en);
    font-size: calc(12 * var(--rem));
    line-height: calc(20 * var(--rem));
    letter-spacing: 0;
    color: var(--color-accent);
    white-space: nowrap;
    padding-top: calc(var(--size-en-shift) * 2);

    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      width: 1px;
      height: calc(19 * var(--rem));
      translate: -50% 0;
      background: var(--color-white);
    }
  }

  & .project-salon__logo {
    width: calc(242 * var(--rem));
    margin-top: calc(39 * var(--rem));
  }

  & .project-salon__origin {
    margin-top: calc(7 * var(--rem));
    font-size: calc(12 * var(--rem));
    line-height: 2;
    white-space: nowrap;
  }

  & .project-salon__text {
    margin-top: calc(20 * var(--rem));
    font-size: calc(13 * var(--rem));
    line-height: 1.75;
    text-align: center;
    white-space: nowrap;
  }

  & .project-salon__buttons {
    display: grid;
    row-gap: calc(5 * var(--rem));
    margin-top: calc(26 * var(--rem));
  }

  & .project-salon__button {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(310 * var(--rem));
    height: calc(62 * var(--rem));
    background: var(--color-accent);
    font-size: calc(15 * var(--rem));
    line-height: 1.75;
    letter-spacing: .075em;
    color: var(--color-white);
    white-space: nowrap;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      right: calc(25 * var(--rem));
      width: calc(15 * var(--rem));
      height: calc(15 * var(--rem));
      background:
        linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat,
        linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
    }
  }
}

.lp_contents {
  & .project-concerns {
    display: grid;
    justify-items: center;
    padding-block: calc(60 * var(--rem));
  }

  & .project-concerns__title {
    font-size: calc(22 * var(--rem));
    line-height: 2;
    white-space: nowrap;
  }

  & .project-concerns__en {
    margin-top: calc(7 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(13 * var(--rem));
    line-height: calc(21 * var(--rem));
    color: var(--color-accent);
  }

  & .project-concerns__list {
    display: grid;
    grid-template-columns: repeat(2, calc(167 * var(--rem)));
    column-gap: calc(16 * var(--rem));
    margin-top: calc(30 * var(--rem));
  }

  & .project-concerns__item {
    width: calc(167 * var(--rem));
    height: calc(167 * var(--rem));
    border-radius: 50%;
    background: rgb(255 255 255 / .4);
    box-shadow: inset 0 0 0 1px var(--color-accent);
  }

  & .project-concerns__item--01 {
    grid-column: 1 / -1;
    justify-self: center;
  }

  & .project-concerns__item--02,
  & .project-concerns__item--03 {
    margin-top: calc(-7 * var(--rem));
  }

  & .project-concerns__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding-top: calc(25 * var(--rem));
    border-radius: 50%;

    &::after {
      content: "";
      width: calc(9 * var(--rem));
      height: calc(35 * var(--rem));
      margin-top: calc(13 * var(--rem));
      background: url(../img/concern-arrow.svg) no-repeat center / 100% 100%;
    }
  }

  & .project-concerns__num {
    font-family: var(--lp-font-display);
    font-size: calc(18 * var(--rem));
    line-height: calc(20 * var(--rem));
    letter-spacing: 0;
    color: var(--color-accent);
  }

  & .project-concerns__text {
    margin-top: calc(8 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 1.75;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
  }
}

.lp_contents {
  & .project-concern {
    display: grid;
    justify-items: center;
  }

  & .component-concern,
  & .component-series,
  & .project-kit {
    justify-self: stretch;
  }

  & .project-concern--02,
  & .project-concern--03 {
    margin-top: calc(62 * var(--rem));
  }

  & .component-concern {
    padding-block: calc(30 * var(--rem));
    background: var(--color-accent);
    color: var(--color-white);
    white-space: nowrap;
  }

  & .component-concern__label {
    display: flex;
    align-items: flex-start;
    padding-left: calc(19 * var(--rem));
  }

  & .component-concern__en {
    margin-top: calc(8 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(13 * var(--rem));
    line-height: calc(21 * var(--rem));
  }

  & .component-concern__num {
    margin-left: calc(6 * var(--rem));
    font-family: var(--lp-font-display);
    font-size: calc(25 * var(--rem));
    line-height: calc(28 * var(--rem));
    letter-spacing: 0;
  }

  & .component-concern__title {
    margin-top: calc(9 * var(--rem));
    padding-left: calc(21 * var(--rem));
    font-size: calc(20 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
  }

  & .component-concern__sub {
    margin-top: calc(15 * var(--rem));
    padding: calc(14 * var(--rem)) calc(20 * var(--rem)) 0;
    border-top: 1px solid var(--color-white);
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
  }

  & .component-series {
    display: grid;
    justify-items: center;
    padding: calc(35 * var(--rem)) 0 calc(20 * var(--rem));
    border-bottom: 1px solid var(--color-accent);
  }

  & .component-series__title {
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    line-height: 1.75;
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .component-series__tags {
    display: flex;
    column-gap: calc(6 * var(--rem));
    margin-top: calc(17 * var(--rem));
  }

  & .project-concern--02 .component-series__tags {
    margin-top: calc(16 * var(--rem));
  }

  & .component-series__tag {
    display: grid;
    place-items: center;
    height: calc(27 * var(--rem));
    padding-inline: calc(12 * var(--rem));
    border-radius: calc(30 * var(--rem));
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-accent);
    font-size: calc(15 * var(--rem));
    line-height: 1.75;
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .component-products {
    display: grid;
    grid-template-columns: repeat(2, calc(165 * var(--rem)));
    justify-content: center;
    column-gap: calc(20 * var(--rem));
    margin-top: calc(24 * var(--rem));
  }

  & .component-product {
    display: grid;
    justify-items: center;
    align-content: start;
  }

  & .component-product__link {
    display: grid;
    justify-items: center;
  }

  & .component-product__image {
    width: calc(165 * var(--rem));
  }

  & .component-product__name {
    margin-top: calc(10 * var(--rem));
    font-size: calc(12 * var(--rem));
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }

  & .project-concern--02 .component-product__name,
  & .project-bath__products .component-product__name {
    margin-top: calc(13 * var(--rem));
  }

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

  & .component-product .component-buy {
    margin-top: calc(9 * var(--rem));
  }
}

.lp_contents {
  & .component-must {
    display: grid;
    justify-items: center;
  }

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

  & .component-must__title {
    display: flex;
    align-items: center;
    column-gap: calc(10 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(22 * var(--rem));
    line-height: calc(36 * var(--rem));
    color: var(--color-accent);
    white-space: nowrap;

    &::before,
    &::after {
      content: "";
      width: 1px;
      height: calc(22 * var(--rem));
      margin-inline: calc(5 * var(--rem));
      background: currentColor;
      rotate: -30deg;
    }

    &::after {
      rotate: 30deg;
    }
  }

  & .component-must__tag {
    display: grid;
    place-items: center;
    width: calc(172 * var(--rem));
    height: calc(23 * var(--rem));
    margin-top: calc(7 * var(--rem));
    border-radius: calc(50 * var(--rem));
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-accent);
    font-size: calc(12 * var(--rem));
    line-height: 1.5;
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .component-must__text {
    margin-top: calc(25 * var(--rem));
    font-size: calc(15 * var(--rem));
    line-height: 1.75;
    text-align: center;
    white-space: nowrap;
  }

  & .component-must__visual {
    position: relative;
    width: calc(390 * var(--rem));
    margin-top: calc(24 * var(--rem));
  }

  & .component-must__photo,
  & .project-kit__photo {
    overflow: hidden;

    & a {
      display: block;
    }
  }

  & .component-must__new {
    position: absolute;
    top: calc(27 * var(--rem));
    left: calc(16 * var(--rem));
    display: grid;
    place-items: center;
    width: calc(119 * var(--rem));
    height: calc(110 * var(--rem));
    background: url(../img/repair-new.svg) no-repeat center / 100% 100%;
    font-family: var(--lp-font-display);
    font-size: calc(36 * var(--rem));
    line-height: calc(40 * var(--rem));
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .component-must__credit {
    display: grid;
    justify-items: center;
    margin-top: calc(20 * var(--rem));

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

  & .component-must__name {
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
    white-space: nowrap;
  }

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

.lp_contents {
  & .component-coupon {
    display: grid;
    justify-items: center;
    width: calc(350 * var(--rem));
    padding-bottom: calc(22 * var(--rem));
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-accent);
  }

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

  & .component-coupon__head {
    display: flex;
    width: 100%;
    height: calc(30 * var(--rem));
    white-space: nowrap;
  }

  & .component-coupon__label {
    display: grid;
    place-items: center;
    width: calc(80 * var(--rem));
    background: var(--color-accent);
    font-family: var(--lp-font-display);
    font-size: calc(16 * var(--rem));
    line-height: calc(18 * var(--rem));
    color: var(--color-white);
    text-transform: uppercase;
    white-space: nowrap;
    padding-top: calc(3 * var(--rem));
  }

  & .component-coupon__title {
    display: grid;
    flex: 1;
    place-items: center;
    border-bottom: 1px solid var(--color-accent);
    font-size: calc(15 * var(--rem));
    font-weight: 700;
    line-height: 1.75;
    color: var(--color-accent);
  }

  & .component-coupon .component-period {
    margin-top: calc(18 * var(--rem));
  }

  & .component-coupon .component-code {
    margin-top: calc(1 * var(--rem));
  }

  & .component-coupon--modal {
    width: calc(310 * var(--rem));
    margin-top: calc(35 * var(--rem));
    padding-bottom: calc(25 * var(--rem));

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

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

.lp_contents {
  & .project-kit {
    display: grid;
    justify-items: center;
    margin-top: calc(59 * var(--rem));
    padding: calc(41 * var(--rem)) 0 calc(59 * var(--rem));
    background: rgb(255 255 255 / .6);
  }

  & .project-kit__title {
    font-family: var(--lp-font-en);
    font-size: calc(25 * var(--rem));
    line-height: calc(41 * var(--rem));
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .project-kit__text {
    margin-top: calc(10 * var(--rem));
    font-size: calc(15 * var(--rem));
    line-height: 1.75;
    text-align: center;
    white-space: nowrap;
  }

  & .project-kit__visual {
    position: relative;
    width: calc(310 * var(--rem));
    margin-top: calc(19 * var(--rem));
  }

  & .project-kit__off {
    position: absolute;
    top: calc(-17 * var(--rem));
    left: calc(-17 * var(--rem));
    width: calc(95 * var(--rem));
    height: calc(95 * var(--rem));
    border-radius: 50%;
    background: var(--color-white) url(../img/kit-ring.svg) no-repeat center / 100% 100%;
    color: var(--color-accent);
    white-space: nowrap;

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

  & .project-kit__approx {
    top: calc(12 * var(--rem));
    left: calc(2 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(15 * var(--rem));
    line-height: 1.5;
  }

  & .project-kit__off .project-kit__approx {
    letter-spacing: .075em;
  }

  & .project-kit__rate {
    top: calc(6 * var(--rem));
    left: calc(19 * var(--rem));
    font-family: var(--lp-font-display);
    font-size: calc(40 * var(--rem));
    line-height: 1.5;
  }

  & .project-kit__percent {
    top: calc(22 * var(--rem));
    left: calc(57 * var(--rem));
    font-family: var(--lp-font-display);
    font-size: calc(25 * var(--rem));
    line-height: 1.5;
  }

  & .project-kit__word {
    top: calc(45 * var(--rem));
    left: calc(23 * var(--rem));
    font-family: var(--lp-font-display);
    font-size: calc(30 * var(--rem));
    line-height: 1.5;
  }

  & .project-kit__credit {
    display: grid;
    justify-items: center;
    margin-top: calc(20 * var(--rem));

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

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

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

.lp_contents {
  & .component-review {
    display: grid;
    justify-items: center;
    margin-top: calc(50 * var(--rem));
  }

  & .project-kit + .component-review {
    margin-top: calc(41 * var(--rem));
  }

  & .component-review__title {
    font-family: var(--lp-font-en);
    font-size: calc(25 * var(--rem));
    line-height: calc(41 * var(--rem));
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .component-review__visual {
    position: relative;
    width: calc(350 * var(--rem));
    margin-top: calc(20 * var(--rem));
  }

  & .component-review__staff {
    position: absolute;
    top: calc(265 * var(--rem));
    left: calc(15 * var(--rem));
    display: flex;
    align-items: flex-start;
    height: calc(70 * var(--rem));
    padding: calc(5 * var(--rem)) calc(15 * var(--rem)) 0 calc(5 * var(--rem));
    border-radius: calc(50 * var(--rem));
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-accent);
  }

  & .component-review__avatar {
    width: calc(60 * var(--rem));
    border-radius: 50%;
  }

  & .component-review__name {
    margin-top: calc(3 * var(--rem));
    margin-left: calc(7 * var(--rem));
    font-size: calc(12 * var(--rem));
    line-height: 1.5;
    color: var(--color-accent);
    white-space: nowrap;
  }

  & .component-review__text {
    width: calc(350 * var(--rem));
    margin-top: calc(20 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 1.75;
    white-space: nowrap;
  }
}

.lp_contents {
  & .project-bath__nav {
    display: flex;
    justify-content: center;
    column-gap: calc(15 * var(--rem));
    margin-top: calc(35 * var(--rem));
  }

  & .project-bath__jump {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(160 * var(--rem));
    height: calc(30 * var(--rem));
    border-radius: calc(55 * var(--rem));
    background: var(--color-accent);
    font-family: var(--lp-font-en);
    font-size: calc(15 * var(--rem));
    line-height: calc(25 * var(--rem));
    color: var(--color-white);
    white-space: nowrap;
    padding-top: calc(var(--size-en-shift) * 2);

    &::after {
      content: "";
      position: absolute;
      top: calc(13 * var(--rem));
      right: calc(15 * var(--rem));
      width: calc(8 * var(--rem));
      height: calc(4 * var(--rem));
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4.5'%3E%3Cpath d='M.35.35 4 4 7.65.35' fill='none' stroke='%23fff'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    }
  }

  & .project-bath__lead {
    margin-top: calc(30 * var(--rem));
    font-size: calc(15 * var(--rem));
    line-height: 1.75;
    text-align: center;
    white-space: nowrap;
  }

  & .project-bath__in {
    margin-top: calc(30 * var(--rem));

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

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

  & .project-bath__title {
    display: flex;
    align-items: center;
    column-gap: calc(10 * var(--rem));
    width: calc(390 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(22 * var(--rem));
    line-height: calc(36 * var(--rem));
    color: var(--color-accent);
    white-space: nowrap;

    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 1px;
      background: currentColor;
    }
  }

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

    & .component-product__image {
      display: flex;
      align-items: flex-end;
      height: calc(289 * var(--rem));
    }
  }
}

.lp_contents {
  & .project-follow {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: calc(70 * var(--rem));
    background: var(--color-nav);
    box-shadow: 0 calc(-4 * var(--rem)) calc(15 * var(--rem)) rgb(0 0 0 / .15);
    color: var(--base-font-color);
    white-space: nowrap;
    visibility: hidden;
    translate: 0 calc(100% + 20 * var(--rem));
    transition: translate .4s var(--transition-timing), visibility .4s;

    &.is-visible {
      visibility: visible;
      translate: 0 0;
    }

    &::before {
      content: "";
      position: absolute;
      top: calc(12 * var(--rem));
      left: 50%;
      width: 1px;
      translate: -50% 0;
      height: calc(47 * var(--rem));
      background: var(--color-divider);
    }

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

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

  & .project-follow__title {
    font-family: var(--lp-font-display);
    font-size: calc(25 * var(--rem));
    line-height: 1.4;
  }

  & .project-follow__sub {
    margin-top: calc(-5 * var(--rem));
    font-size: calc(12 * var(--rem));
    line-height: 1.4;
  }

  & .project-follow__badge {
    width: calc(146 * var(--rem));
  }

  & .project-follow__title--campaign {
    margin-top: calc(3 * var(--rem));
    line-height: calc(28 * var(--rem));
    letter-spacing: .05em;
  }
}

.lp_contents {
  & .component-modal {
    place-items: center;
    padding-block: 0;
    background: var(--color-overlay);
    -webkit-backdrop-filter: blur(calc(4 * var(--rem)));
    backdrop-filter: blur(calc(4 * var(--rem)));

    &.is-open {
      display: grid;
    }
  }

  & .component-modal__frame {
    position: relative;
    width: calc(350 * var(--rem));
    max-width: none;
    height: calc(600 * var(--rem));
    max-height: calc(100dvh - 120 * var(--rem));
    margin-inline: 0;
    overflow: visible;
  }

  & .component-modal__close {
    position: absolute;
    top: calc(-38 * var(--rem));
    right: calc(3 * var(--rem));
    width: calc(35 * var(--rem));
    height: calc(35 * var(--rem));

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: calc(5 * var(--rem));
      width: calc(25 * var(--rem));
      height: 1px;
      background: var(--color-white);
      translate: 0 -50%;
      rotate: 45deg;
    }

    &::after {
      rotate: -45deg;
    }
  }

  & .component-modal--product .component-modal__body {
    background: var(--color-bg);
  }

  & .component-modal__head {
    display: grid;
    place-items: center;
    height: calc(72 * var(--rem));
    background: var(--color-accent);
    font-size: calc(18 * var(--rem));
    line-height: 1.75;
    color: var(--color-white);
    white-space: nowrap;
  }

  & .component-modal__head--en {
    font-family: var(--lp-font-en);
    font-size: calc(22 * var(--rem));
  }

  & .component-modal-salon__point {
    position: relative;
    padding: calc(60 * var(--rem)) calc(25 * var(--rem)) 0;
    color: var(--color-white);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgb(0 0 0 / .25);
    }

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

  & .component-modal-salon__point--01 {
    height: calc(257 * var(--rem));
  }

  & .component-modal-salon__point--02 {
    height: calc(302 * var(--rem));
  }

  & .component-modal-salon__point--03 {
    height: calc(328 * var(--rem));
  }

  & .component-modal-salon__point--04 {
    height: calc(211 * var(--rem));
  }

  & .component-modal-salon__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  & .component-modal-salon__label {
    font-family: var(--lp-font-en);
    font-size: calc(22 * var(--rem));
    line-height: calc(36 * var(--rem));
  }

  & .component-modal-salon__text {
    width: calc(300 * var(--rem));
    margin-top: calc(10 * var(--rem));
    font-size: calc(13 * var(--rem));
    line-height: 1.8;
    white-space: nowrap;
  }

  & .component-modal-salon__point--03 .component-modal-salon__text + .component-modal-salon__text {
    margin-top: calc(13 * var(--rem));
  }

  & .component-modal-salon__point--03 .component-modal-salon__text + .component-modal-salon__text + .component-modal-salon__text {
    margin-top: calc(9 * var(--rem));
  }

  & .component-modal-salon__sub {
    margin-top: calc(16 * var(--rem));
    font-size: calc(13 * var(--rem));
    line-height: 2;
    white-space: nowrap;
  }

  & .component-modal-lather {
    display: grid;
    justify-items: center;
    padding-bottom: calc(38 * var(--rem));
  }

  & .component-modal-lather__photo {
    width: 100%;
  }

  & .component-modal-lather .component-modal__head {
    width: 100%;
  }

  & .component-modal-lather__text {
    margin-top: calc(40 * var(--rem));
    font-size: calc(13 * var(--rem));
    line-height: 1.8;
    text-align: center;
    white-space: nowrap;

    & + .component-modal-lather__text {
      margin-top: calc(13 * var(--rem));
    }
  }

  & .component-modal-lather__marker {
    background: linear-gradient(transparent calc(100% - 8 * var(--rem)), var(--color-bg) 0);
  }

  & .component-modal-product {
    display: grid;
    justify-items: center;
    padding-bottom: calc(40 * var(--rem));
  }

  & .component-modal-product .component-modal__head {
    width: 100%;
  }

  & .component-modal-product__point {
    width: calc(350 * var(--rem));
    padding: calc(25 * var(--rem)) calc(20 * var(--rem)) 0;

    & + .component-modal-product__point {
      margin-top: calc(24 * var(--rem));
      padding-top: calc(24 * var(--rem));
      border-top: 1px solid var(--color-accent);
    }
  }

  & .component-modal-product__label {
    font-family: var(--lp-font-en);
    font-size: calc(16 * var(--rem));
    line-height: calc(26 * var(--rem));
    color: var(--color-accent);
  }

  & .component-modal-product__title {
    margin-top: calc(10 * var(--rem));
    font-size: calc(15 * var(--rem));
    font-weight: 700;
    line-height: 1.75;
    /* white-space: nowrap; */
  }

  & .component-modal-product__text {
    margin-top: calc(7 * var(--rem));
    font-size: calc(12 * var(--rem));
    line-height: 1.75;
    /* white-space: nowrap; */
  }

  & .component-modal-product__movie {
    position: relative;
    margin: calc(19 * var(--rem)) calc(-20 * var(--rem)) 0;
    aspect-ratio: 350 / 197;

    & iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
  }

  & .component-voice {
    position: relative;
    width: calc(310 * var(--rem));
    margin-top: calc(33 * var(--rem));
    padding: calc(14 * var(--rem)) calc(20 * var(--rem)) calc(19 * var(--rem));
    box-shadow: inset 0 0 0 1px var(--color-accent);
  }

  & .component-voice__corner {
    position: absolute;
    right: 0;
    width: calc(33 * var(--rem));

    &.component-voice__corner--t {
      top: 0;
    }

    &.component-voice__corner--b {
      bottom: 0;
    }
  }

  & .component-voice__profile {
    display: flex;
    align-items: flex-start;
  }

  & .component-voice__avatar {
    width: calc(70 * var(--rem));
    border-radius: 50%;
  }

  & .component-voice__who {
    display: grid;
    margin-top: calc(12 * var(--rem));
    margin-left: calc(15 * var(--rem));
    white-space: nowrap;
  }

  & .component-voice__name {
    font-size: calc(14 * var(--rem));
    line-height: 1.75;
  }

  & .component-voice__role {
    margin-top: 0;
    font-size: calc(12 * var(--rem));
    line-height: 1.75;
  }

  & .component-voice__text {
    margin: calc(15 * var(--rem)) calc(-20 * var(--rem)) 0;
    padding: calc(19 * var(--rem)) calc(20 * var(--rem)) 0;
    border-top: 1px solid var(--color-accent);
    font-size: calc(12 * var(--rem));
    line-height: 1.75;
    /* white-space: nowrap; */
  }

  & .component-modal-product__credit {
    display: grid;
    width: calc(310 * var(--rem));
    margin-top: calc(35 * var(--rem));
  }

  & .component-modal-product__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(15 * var(--rem));
  }

  & .component-modal-product__name {
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
    white-space: nowrap;
  }

  & .component-modal-product__buy {
    margin-top: calc(19 * var(--rem));
  }

  & .component-modal-product--repair .component-modal-product__buy {
    margin-top: calc(20 * var(--rem));
  }
}


#share {
  bottom: 12% !important;
}