@charset "UTF-8";
/* ==========================================================
   共通LP基盤スタイル（他製品と共通のFV/アコーディオン等の仕組み）
   ========================================================== */
body.is-load .l-lp {
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
  opacity: 1;
}
body .l-lp {
  will-change: opacity;
  opacity: 0;
}
.l-lp {
  --lp_jp:
    "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",
    "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック",
    "MS PGothic", "メイリオ", "Meiryo", sans-serif;
  --lp_en: "IBM Plex Mono", monospace;
}
.l-lp__wrap {
  position: relative;
}
.l-lp__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.l-lp__bg__wrap {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: var(--svh);
}
.l-lp__main {
  position: relative;
  width: clamp(375px, 32%, 500px);
  margin-left: auto;
  margin-right: clamp(270px, 18%, 260px);
  padding-top: var(--headerHeight);
}
.l-lp__main img {
  width: 100%;
  height: auto;
  display: block;
}
.l-lp__bg__wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  flex-wrap: nowrap;
  padding-top: var(--headerHeight);
}
.l-lp__bg__left {
  flex: 1;
  position: relative;
}
.l-lp__bg__center {
  width: clamp(375px, 32%, 500px);
  pointer-events: initial;
  -webkit-user-select: initial;
  -moz-user-select: initial;
  user-select: initial;
}
.l-lp__bg__right {
  width: clamp(270px, 18%, 260px);
  position: relative;
  container-type: inline-size;
  background-color: #fafafa;
}
.l-lp__slide,
.l-lp__slide ul {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.l-lp__slide ul li {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  z-index: 0;
  will-change: opacity;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
.l-lp__slide ul li.is-active {
  opacity: 1;
  z-index: 10;
}
.l-lp__product {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  min-height: 540px;
}
.l-lp__product__title {
  text-align: center;
  font-size: 5.5cqi;
}
.l-lp__product__title > span .en {
  display: block;
  font-family: var(--lp_en);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: 0.6em;
  color: #000;
}
.l-lp__product__title > span .jp {
  display: block;
  font-family: var(--lp_jp);
  letter-spacing: 0.015em;
  line-height: 1.6666;
  font-size: 0.65em;
  color: #221613;
}
.l-lp__product__image {
  display: block;
  width: 100%;
}
.l-lp__product .l-lp__links {
  width: 58%;
  margin-left: auto;
  margin-right: auto;
}
.l-lp__product .l-lp__links li {
  margin-bottom: 6.5%;
}
.l-lp__links li a {
  display: block;
  border: 1px solid #4c4f4e;
  fill: #4c4f4e;
  background-color: transparent;
  transition:
    background-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms,
    fill 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
.l-lp__links li a > span {
  aspect-ratio: 4;
  display: block;
  position: relative;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.l-lp__links li a > span > span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-indent: -9999px;
  overflow: hidden;
}
.l-lp__links svg {
  display: block;
  width: 100%;
  height: 100%;
}
.l-lp__faq {
  container-type: inline-size;
  width: 87.5%;
  margin-left: auto;
  margin-right: auto;
}
.l-lp__faq li + li {
  margin-top: 3.5%;
}
.l-lp__faq .js-accordion__head {
  font-family: var(--lp_jp);
  font-size: 3cqi;
  letter-spacing: 0.1em;
  line-height: 1.6;
  background-color: #fff;
  color: #221613;
  fill: #221613;
  padding: 1.2em;
}
.l-lp__faq .js-accordion__head.is-active > span:before {
  opacity: 0;
  transform: translate(0) rotate(0);
}
.l-lp__faq .js-accordion__head.is-active > span > span:before,
.l-lp__faq .js-accordion__head.is-active > span > span:after {
  opacity: 1;
}
.l-lp__faq .js-accordion__head.is-active > span > span:before {
  transform: translate(0) rotate(45deg);
}
.l-lp__faq .js-accordion__head.is-active > span > span:after {
  transform: translate(0) rotate(-45deg);
}
.l-lp__faq .js-accordion__head > span {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  gap: 1em;
  position: relative;
  flex-wrap: nowrap;
  padding-right: 2em;
}
.l-lp__faq .js-accordion__head > span:before {
  content: "";
  width: 0.7em;
  aspect-ratio: 1;
  position: absolute;
  top: 0.275em;
  right: 0.49em;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
  transform: translate(0) rotate(45deg);
  will-change: opacity, transform;
  opacity: 1;
  transition:
    opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms,
    transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
.l-lp__faq .js-accordion__head > span > svg {
  width: 2em;
  height: 2em;
  display: block;
  position: relative;
  margin-top: -0.2em;
}
.l-lp__faq .js-accordion__head > span > span {
  display: block;
  flex: 1;
}
.l-lp__faq .js-accordion__head > span > span:before,
.l-lp__faq .js-accordion__head > span > span:after {
  will-change: opacity, transform;
  opacity: 0;
  transition:
    opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms,
    transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
.l-lp__faq .js-accordion__head > span > span:before {
  content: "";
  width: 1.2em;
  position: absolute;
  background-color: #000;
  height: 1px;
  top: 0.725em;
  right: 0.2em;
  transform: translate(0) rotate(90deg);
  box-sizing: border-box;
}
.l-lp__faq .js-accordion__head > span > span:after {
  content: "";
  width: 1.2em;
  position: absolute;
  background-color: #000;
  height: 1px;
  top: 0.725em;
  right: 0.2em;
  transform: translate(0) rotate(0);
  box-sizing: border-box;
}
.l-lp__faq .js-accordion__body {
  font-family: var(--lp_jp);
  font-size: 3cqi;
  letter-spacing: 0.06em;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #000;
  fill: #221613;
}
.l-lp__faq .js-accordion__body > span {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  gap: 1em;
  position: relative;
  flex-wrap: nowrap;
  padding: 1.2em 3.2em 1.2em 1.2em;
}
.l-lp__faq .js-accordion__body > span > svg {
  width: 2em;
  height: 2em;
  display: block;
  position: relative;
  margin-top: -0.2em;
}
.l-lp__faq .js-accordion__body > span > span {
  display: block;
  flex: 1;
}
.l-lp__faq .js-accordion__body > span > span .tdu {
  text-decoration: underline;
}
.l-lp__sign {
  width: 20%;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%);
  fill: #000;
  cursor: pointer;
}
.l-lp__sign.is-totop .l-lp__sign__scroll {
  opacity: 0;
}
.l-lp__sign.is-totop .l-lp__sign__totop {
  opacity: 1;
}
.l-lp__sign__wrap {
  aspect-ratio: 1;
  display: block;
  position: relative;
}
.l-lp__sign__wrap > span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  will-change: opacity;
  transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
.l-lp__sign__wrap > span svg {
  width: 100%;
  height: 100%;
  display: block;
}
.l-lp__sign__wrap > span > span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-indent: -9999px;
  overflow: hidden;
}
.l-lp__sign__scroll {
  opacity: 1;
}
.l-lp__sign__totop {
  opacity: 0;
}
.l-lp__main section img {
  opacity: 0;
  will-change: opacity;
  transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
.l-lp__main section img.is-sa {
  opacity: 1;
}
.l-lp__main .l-lp__section h1,
.l-lp__main .l-lp__section h2,
.l-lp__main .l-lp__section h3,
.l-lp__main .l-lp__section h4 {
  display: block;
}
.l-lp__main .l-lp__section__links .l-lp__links {
  grid-template-columns: repeat(2, 1fr);
  display: grid;
  width: 81.25%;
  margin-left: auto;
  margin-right: auto;
  gap: 16% 4%;
}
.l-lp__main .l-lp__section__details ul {
  width: 87.5%;
  margin-left: auto;
  margin-right: auto;
}
.l-lp__main .l-lp__section__details ul li + li {
  margin-top: 3.5%;
}
.l-lp__main .l-lp__section__details ul li a {
  display: block;
  background-color: #fff;
}
.l-lp__main .l-lp__section__details ul li a img {
  will-change: opacity;
  transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
.l-lp__main .l-lp__section__reviews ul,
.l-lp__main .l-lp__section__voice ul {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.l-lp__main .l-lp__section__reviews ul li + li,
.l-lp__main .l-lp__section__voice ul li + li {
  margin-top: 2%;
}
.l-lp__main .l-lp__section__set__foot {
  padding-bottom: 10%;
}
.l-lp__main .l-lp__section__set__foot div {
  width: 87.5%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #b4d6c6;
  padding-bottom: 9%;
}
.l-lp__main .l-lp__section__set__foot div a {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 71.4%;
  background-color: #000;
  margin-top: 11%;
  transition: background-color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
.l-lp__main .l-lp__section__product {
  background-color: #f4f4f4;
  padding-bottom: 10%;
}
.l-lp__main .l-lp__section__product__body ul li:has(.is-attention) + li {
  margin-top: 0%;
}
.l-lp__main .l-lp__section__product__body ul li + li {
  margin-top: 7%;
}
.l-lp__main .l-lp__section__product__body ul li a {
  display: block;
  position: relative;
}
.l-lp__main .l-lp__section__product__body ul li a img {
  position: relative;
  z-index: 0;
}
.l-lp__main .l-lp__section__product__body ul li a img.is-button {
  position: absolute;
  bottom: 0;
  left: 51%;
  z-index: 1;
  cursor: pointer;
  width: 28.125%;
  display: block;
  background-color: gray;
  transition: background-color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
.l-lp__main .l-lp__section__faq {
  background-color: #e3e3e3;
}
.l-lp__main .l-lp__section__faq__body {
  padding-bottom: 10%;
}
.l-lp__main.is-psd .l-lp__section__links#LinksHead .l-lp__section__links__body {
  padding-top: 12%;
}
.l-lp__main.is-psd .l-lp__section__links#LinksHead .l-lp__section__links__foot {
  padding-top: 11%;
  padding-bottom: 15%;
}
.l-lp__main.is-psd .l-lp__section__links#LinksFoot .l-lp__section__links__foot {
  padding-top: 10%;
  padding-bottom: 15%;
}
.l-lp__main.is-psd .l-lp__section__subscription__wrap {
  width: 87.5%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10%;
  padding-bottom: 9%;
}
.l-lp__main.is-psd .l-lp__section__subscription .js-accordion__head {
  position: relative;
  background-color: #b4d6c6;
  cursor: pointer;
  transition: background-color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
.l-lp__main.is-psd .l-lp__section__subscription .js-accordion__head img.is-open {
  position: relative;
  z-index: 1;
  opacity: 1;
}
.l-lp__main.is-psd .l-lp__section__subscription .js-accordion__head img.is-close {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
}
.l-lp__main.is-psd .l-lp__section__subscription .js-accordion__body > div {
  border: 1px solid #b4d6c6;
  border-top: none;
  padding-bottom: 10%;
}
.l-lp__main.is-psd .l-lp__section__subscription .js-accordion__body > div a {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 71.4%;
  background-color: #000;
  margin-top: 12%;
  transition: background-color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
.l-lp__main.is-psd .l-lp__section__details__body {
  position: relative;
  z-index: 5;
  margin-top: -6.5%;
}
.l-lp__main.is-psd .l-lp__section__details__body:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 89%;
  z-index: 0;
  background-color: #d6e7e2;
}
.l-lp__main.is-psd .l-lp__section__details ul {
  position: relative;
  z-index: 10;
}
.l-lp__main.is-psd .l-lp__section__nir__body,
.l-lp__main.is-psd .l-lp__section__dpl__body {
  width: 93.8%;
  margin-left: auto;
  background-color: #efefef;
}
.l-lp__main.is-psd .l-lp__section__nir__body .js-video,
.l-lp__main.is-psd .l-lp__section__dpl__body .js-video {
  aspect-ratio: 1.7777777778;
  width: 100%;
}
.l-lp__main.is-psd .l-lp__section__nir__body .js-video__player,
.l-lp__main.is-psd .l-lp__section__dpl__body .js-video__player {
  width: 100%;
  height: 100%;
}
.l-lp__main.is-psd .l-lp__section__nir__body .js-video__player video,
.l-lp__main.is-psd .l-lp__section__dpl__body .js-video__player video {
  width: 100%;
  height: 100%;
  display: block;
}
.l-lp__main.is-sab .l-lp__section__links#LinksHead .l-lp__section__links__body {
  padding-top: 12%;
}
.l-lp__main.is-sab .l-lp__section__links#LinksHead .l-lp__section__links__foot {
  padding-top: 11%;
  padding-bottom: 15%;
}
.l-lp__main.is-sab .l-lp__section__links#LinksFoot .l-lp__section__links__foot {
  padding-top: 10%;
  padding-bottom: 15%;
}
.l-lp__main.is-sab .l-lp__section__subscription__foot {
  padding-top: 7%;
  padding-bottom: 11.5%;
}
.l-lp__main.is-sab .l-lp__section__subscription__foot ul {
  width: 79.69%;
  margin-left: auto;
  margin-right: auto;
}
.l-lp__main.is-sab .l-lp__section__subscription__foot ul li + li {
  margin-top: 6%;
}
.l-lp__main.is-sab .l-lp__section__subscription__foot ul li a {
  display: block;
  background-color: #000;
  transition: background-color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
.l-lp__main.is-sab .l-lp__section__details__body {
  background-color: #d6e7e2;
}
.l-lp__main.is-ssp .l-lp__section__links#LinksHead .l-lp__section__links__body {
  padding-top: 12%;
}
.l-lp__main.is-ssp .l-lp__section__links#LinksHead .l-lp__section__links__foot {
  padding-top: 11%;
  padding-bottom: 15%;
}
.l-lp__main.is-ssp .l-lp__section__links#LinksBody .l-lp__section__links__body {
  padding-top: 12%;
}
.l-lp__main.is-ssp .l-lp__section__links#LinksBody .l-lp__section__links__foot {
  padding-top: 11%;
  padding-bottom: 15%;
}
.l-lp__main.is-ssp .l-lp__section__links#LinksFoot .l-lp__section__links__body {
  padding-top: 9%;
}
.l-lp__main.is-ssp .l-lp__section__links#LinksFoot .l-lp__section__links__foot {
  padding-top: 11%;
  padding-bottom: 15%;
}
.l-lp__main.is-ssp .l-lp__section__subscription__foot {
  width: 79.69%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7.5%;
  padding-bottom: 9%;
}
.l-lp__main.is-ssp .l-lp__section__subscription__foot a {
  display: block;
  background-color: #000;
  transition: background-color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
.l-lp__main.is-ssp .l-lp__section__details__body {
  background-color: #d6e7e2;
}
.js-accordion__head {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.js-accordion__body {
  height: 0;
  overflow: hidden;
  transition: height 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
@media only screen and (min-width: 1000px) {
  .l-lp__links li a:hover {
    background-color: #4c4f4e;
    fill: #fafafa;
  }
  .l-lp__main .l-lp__section__details ul li a:hover img {
    opacity: 0.6;
  }
  .l-lp__main .l-lp__section__set__foot div a:hover {
    background-color: gray;
  }
  .l-lp__main .l-lp__section__product__body ul li a img.is-button:hover {
    background-color: #000;
  }
  .l-lp__main.is-psd .l-lp__section__subscription .js-accordion__head:hover {
    background-color: #e6e6e6;
  }
  .l-lp__main.is-psd .l-lp__section__subscription .js-accordion__body > div a:hover {
    background-color: gray;
  }
  .l-lp__main.is-sab .l-lp__section__subscription__foot ul li a:hover,
  .l-lp__main.is-ssp .l-lp__section__subscription__foot a:hover {
    background-color: gray;
  }
}
@media only screen and (max-width: 1000px) {
  .l-lp__main {
    width: 60vw;
    margin-left: 0;
    margin-right: auto;
  }
  .l-lp__bg__left,
  .l-lp__bg__center {
    display: none;
  }
  .l-lp__bg__right {
    width: 40vw;
    margin-left: auto;
  }
}
@media only screen and (max-height: 700px) {
  .l-lp__product {
    align-items: flex-start;
    padding-top: 2rem;
  }
}
@media only screen and (max-width: 680px) {
  .l-lp__bg {
    display: none;
  }
  .l-lp__main {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
  }
  .l-lp__bg__wrap {
    display: block;
  }
  .l-lp__bg__center {
    width: 100%;
  }
}

/* ==========================================================
   商品固有スタイル（MEDICAL ESTOROGY SCALP SERUM / ADCMS000A）
   ========================================================== */

:root {
  --s-val: 10px;
  --font-yugo:
    "游ゴシック体", "Yu Gothic", YuGothic, "游ゴシック", "游ゴシック Medium", "Yu Gothic Medium",
    "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
}

@media only screen and (max-width: 680px) {
  :root {
    --s-val: 2vw;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-yugo);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

ul,
ol {
  list-style: none;
}

/* ==========================================================
   LPレイアウト
   ========================================================== */

.lp-wrap {
  position: relative;
}

/* -- 追従背景（ヒーロー） -- */

.lp-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lp-bg__wrap {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-wrap: nowrap;
}

.lp-bg__left {
  flex: 1;
  position: relative;
}

.lp-bg__center {
  width: clamp(375px, 32%, 500px);
}

.lp-bg__right {
  width: clamp(270px, 18%, 260px);
  position: relative;
  background-color: #fafafa;
  container-type: inline-size;
}

.lp-slide,
.lp-slide ul {
  position: absolute;
  inset: 0;
}

.lp-slide ul li {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.lp-slide ul li.is-active {
  opacity: 1;
  z-index: 1;
}

.lp-product {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 540px;
}

.lp-product__wrap {
  width: 100%;
}

.lp-product__image {
  width: 100%;
}

.lp-product .lp-links {
  width: 58%;
  margin: 6% auto 0;
}

.lp-product .lp-links li {
  margin-bottom: 6.5%;
}

.lp-sign {
  width: 20%;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  text-align: center;
  font-size: calc(var(--s-val) * 0.5);
  letter-spacing: 0.1em;
}

.lp-sign__wrap > span {
  display: block;
  transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.lp-sign__totop {
  opacity: 0;
  margin-top: -1.2em;
}

.lp-sign.is-totop .lp-sign__scroll {
  opacity: 0;
}

.lp-sign.is-totop .lp-sign__totop {
  opacity: 1;
}

/* -- スクロールするメインカラム -- */

.lp-main {
  position: relative;
  z-index: 1;
  width: clamp(375px, 32%, 500px);
  margin-left: auto;
  margin-right: clamp(270px, 18%, 260px);
}

.lp-main img {
  width: 100%;
  height: auto;
}

/* ショップリンクのグリッド（ヒーローのパネル／リンクバンドで使用） */

.lp-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16% 4%;
}

.lp-links li a {
  display: block;
  border: 1px solid #4c4f4e;
  background-color: transparent;
  transition:
    background-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
    color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.lp-links li a span {
  display: block;
  text-align: center;
  padding: 0.8em 0;
  font-size: calc(var(--s-val) * 0.6);
  letter-spacing: 0.05em;
}

/* 価格・購入ボックス */

.lp-price_box {
  padding: calc(var(--s-val) * 6.25) calc(var(--s-val) * 3);
}

.lp-price {
  padding: 0 0 calc(var(--s-val) * 4.5);
}

.lp-price_box--sub .lp-price {
  padding-bottom: calc(var(--s-val) * 1.5);
}

.lp-price__official a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  text-align: center;
  background-color: #000;
  color: #fff;
  padding: calc(var(--s-val) * 0.7) 0;
  font-size: calc(var(--s-val) * 1.4);
  letter-spacing: 0.05em;
  transition: background-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.lp-price__btn {
  display: flex;
  justify-content: space-between;
  gap: 2%;
  margin-top: calc(var(--s-val) * 2.4);
}

.lp-price__btn a {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s-val) * 0.5);
  background-color: #666666;
  color: #fff;
  padding: calc(var(--s-val) * 1) calc(var(--s-val) * 0);
  font-size: calc(var(--s-val) * 1.1);
  text-align: center;
  font-weight: bold;
}

.lp-price__btn a:has(.lp-price__btn-icon--rakuten),
.lp-price__btn a:has(.lp-price__btn-icon--amazon) {
  flex-grow: 1.2;
}

.lp-price__btn a:has(.lp-price__btn-icon--yahoo) {
  flex-grow: 0.7;
}

.lp-price__official a img {
  width: calc(var(--s-val) * 2.2);
}

.lp-price__btn img.lp-price__btn-icon--rakuten {
  width: calc(var(--s-val) * 1.4);
}

.lp-price__btn img.lp-price__btn-icon--amazon {
  width: calc(var(--s-val) * 1.8);
}

.lp-price__btn img.lp-price__btn-icon--yahoo {
  width: calc(var(--s-val) * 2);
}

/* ステップタイムライン（DAY1/DAY2/DAY3形式） */

.lp-step_box {
  background-image: url(../img/step-bg.webp);
  background-size: cover;
}

.lp-step__shadow {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
  padding: calc(var(--s-val) * 5) calc(var(--s-val) * 2.917) 0;
}

.lp-step {
  background-color: #fff;
  padding: calc(var(--s-val) * 3.5) calc(var(--s-val) * 7) calc(var(--s-val) * 7.5);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 50% 100%, 0 96%);
}

.lp-step__title {
  width: 77%;
  margin: 0 auto calc(var(--s-val) * 4);
}

.lp-step__list {
  position: relative;
  margin-left: 0px;
  padding-left: 1.6em;
}

.lp-step__list::before {
  content: "";
  position: absolute;
  top: 14.8px;
  bottom: 0;
  left: 0;
  width: 1px;
  background-color: #000;
}

.lp-step__item + .lp-step__item {
  margin-top: calc(var(--s-val) * 3);
}

.lp-step_photo {
  width: 83%;
  margin: 0 auto;
}

.lp-step__day {
  position: relative;
  font-size: calc(var(--s-val) * 2.2);
  letter-spacing: 0.03em;
  font-family: var(--font-ibmplex);
  line-height: 1;
  margin-bottom: calc(var(--s-val) * 2);
}

.lp-step__day::before {
  content: "";
  position: absolute;
  top: 0.4em;
  left: -29.6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #000;
}

.lp-step__movie {
  background-color: #ccc;
  width: 84%;
  margin: 0 auto;
}

.lp-step__movie video,
.lp-step__movie img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.lp-step_detail {
  padding-left: calc(var(--s-val) * 0.5);
}

.lp-step__text {
  margin-top: 5%;
  font-size: calc(var(--s-val) * 1.3);
  line-height: 1.7;
  letter-spacing: 0.03em;
  width: 90%;
  margin: calc(var(--s-val) * 1) auto 0;
}

/* lp-05 */

.lp-05__box {
  background-color: rgba(180, 217, 200, 0.6);
  padding: calc(var(--s-val) * 5) calc(var(--s-val) * 2.5);
}

.lp-05__title-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--s-val) * 1.5);
  cursor: pointer;
  width: 90%;
  margin: 0 auto;
}

.lp-05__title-head img.lp-05__title-img {
  width: 93%;
}

.lp-05__title-arrow {
  flex-shrink: 0;
  width: calc(var(--s-val) * 1.5);
  height: calc(var(--s-val) * 1.5);
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.js-accordion__head.is-active .lp-05__title-arrow {
  transform: rotate(-135deg);
}

.js-accordion__body {
  height: 0;
  overflow: hidden;
  transition: height 0.4s ease;
}

.lp-05__inner-img {
  margin-top: calc(var(--s-val) * 5);
}

/* 購入比較表（単品購入 vs 定期購入、1st/2nd/3rdタイムライン） */

.lp-compare__box {
  padding-bottom: calc(var(--s-val) * 6);
}

.lp-compare {
  padding: calc(var(--s-val) * 2) calc(var(--s-val) * 3) 0;
  background-color: #fff;
}

.lp-compare__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  text-align: center;
  gap: calc(var(--s-val) * 2.5);
  width: 80%;
  margin: 0 auto;
}

.lp-compare__btn a {
  font-size: calc(var(--s-val) * 1.6);
  width: 100%;
  background-color: #000;
  padding: calc(var(--s-val) * 1.5) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--s-val) * 2);
  position: relative;
}

.lp-compare__btn a::after {
  content: "";
  width: calc(var(--s-val) * 0.8);
  height: calc(var(--s-val) * 0.8);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) rotate(-45deg);
  position: absolute;
  top: 50%;
  right: calc(var(--s-val) * 2);
}

.lp-compare__btn a span {
  font-size: calc(var(--s-val) * 1.3);
  color: #fceeb3;
}

/* POINTリスト（Movie2） */

.lp-07__box {
  background-color: #d6e7e2;
  padding: calc(var(--s-val) * 5) calc(var(--s-val) * 3);
}

.lp-07__title {
  width: 95%;
  margin: 0 auto calc(var(--s-val) * 1.5);
}

.lp-07__box ul {
  display: flex;
  flex-direction: column;
  gap: calc(var(--s-val) * 1.5);
}

.lp-07__box li {
  background-color: #fff;
}

/*　LP09　*/

.lp-09__box {
  padding: calc(var(--s-val) * 4.5) calc(var(--s-val) * 4) calc(var(--s-val) * 8.5);
}

.lp-09__box img {
  margin-bottom: calc(var(--s-val) * 3);
}

.lp-09__box video {
  margin-bottom: calc(var(--s-val) * 2);
  padding: 0 calc(var(--s-val) * 2);
}

.lp-09__box p {
  font-size: calc(var(--s-val) * 1);
  text-align: right;
  width: 95%;
}

/*　LP010　*/

.lp-10__box {
  padding-bottom: calc(var(--s-val) * 4);
}

/*　LP010　*/

.lp-15__box {
  padding-bottom: calc(var(--s-val) * 3);
}

/* お客様窓口（lp-16） */

.lp-16__box {
  background-color: #ededed;
  padding: calc(var(--s-val) * 3) calc(var(--s-val) * 3) calc(var(--s-val) * 4);
}

.lp-16__inner-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s-val) * 2);
  font-size: calc(var(--s-val) * 2.3);
  text-align: center;
  background-color: #b4d9c8;
  padding: calc(var(--s-val) * 1.5) 0;
  line-height: 1;
  font-weight: bold;
  cursor: pointer;
}

.lp-16__inner-title-arrow {
  flex-shrink: 0;
  width: calc(var(--s-val) * 1.3);
  height: calc(var(--s-val) * 1.3);
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.js-accordion__head.is-active .lp-16__inner-title-arrow {
  transform: rotate(-135deg);
}

.lp-16__inner {
  background-color: #fff;
}

.lp-16__inner-content {
  padding: calc(var(--s-val) * 3.5) calc(var(--s-val) * 2);
}

.lp-16__text {
  background-color: #fff;
  padding-top: calc(var(--s-val) * 3);
  margin-bottom: calc(var(--s-val) * 4);
}

.lp-16__title {
  width: 90%;
  margin: 0 auto calc(var(--s-val) * 3);
}

.lp-16__contact-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-size: calc(var(--s-val) * 1.4);
  text-align: center;
  background: #000;
  color: #fff;
  margin-bottom: calc(var(--s-val) * 3);
  padding: calc(var(--s-val) * 1);
  position: relative;
}

.lp-16__contact-link::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.contact-text {
  text-align: center;
}

.contact-text {
  padding: calc(var(--s-val) * 1.5) calc(var(--s-val) * 2);
  background-color: #eaf4f1;
  border-radius: 5px;
}

.contact-text h2 {
  font-size: calc(var(--s-val) * 2);
  margin-bottom: calc(var(--s-val) * 1);
}

.contact-text a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  font-size: calc(var(--s-val) * 2.4);
  font-weight: bold;
  margin-bottom: calc(var(--s-val) * 1);
}

.contact-text a img {
  width: 1.2em;
  height: auto;
}

.contact-text p {
  font-size: calc(var(--s-val) * 1.3);
}

/* -- レスポンシブ -- */

@media only screen and (min-width: 1000px) {
  a:hover {
    opacity: 0.7;
  }
  .lp-links li a:hover {
    background-color: #4c4f4e;
    color: #fafafa;
  }
  .lp-price__official a:hover {
    background-color: #333;
  }
}

@media only screen and (max-width: 1000px) {
  .lp-main {
    width: 60vw;
    margin-left: 0;
    margin-right: auto;
  }
  .lp-bg__left,
  .lp-bg__center {
    display: none;
  }
  .lp-bg__right {
    width: 40vw;
    margin-left: auto;
  }
}

@media only screen and (max-width: 680px) {
  .lp-bg {
    display: none;
  }
  .lp-main {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}