@charset "UTF-8";
/* =========================
変数 
============================*/
main {
  --s-val: 10px;
  --pdg-inline-common: calc(var(--s-val) * 7);
  --base-color: #000;
  --color-neutral-pink: #ece0df;
  --color-pink-brown: #b38686;
  --color-salmon-pink: #f0b0aa;
  --color-rose-brown: #8f6163;
  --color-rose-brown2: #836163;
  --color-muted-pink: #c28686;
  --color-bg-pink: #e7dedd;
  --color-green-olive: #b1b74e;
  --color-green-soft: #d7daa4;
  --color-green-pale: #d8daa6;
  --color-gray: #f2f2f2;
  --color-gray-deep: #555555;
  --header-line-gray: #999;
}

/* レスポンシブ */
@media screen and (max-width: 1330px) {
  main {
    --s-val: 10px;
  }
}
@media screen and (max-width: 780px) {
  main {
    --s-val: 1.45vw;
  }
}
@media screen and (max-width: 540px) {
  main {
    --s-val: 1.5vw;
  }
}
/* =========================
共通 
============================*/
main {
  overflow: hidden;
}
main img {
  display: block;
  width: 100%;
}

/* =========================
fv 
============================*/
.fv {
  position: relative;
}
.fv::before {
  content: "";
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#121925), to(#0F161F)) left top/50% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#151F29), to(#1A222B)) right top/50% 100% no-repeat;
  background: linear-gradient(to bottom, #121925, #0F161F) left top/50% 100% no-repeat, linear-gradient(to bottom, #151F29, #1A222B) right top/50% 100% no-repeat;
  background-color: #151F29;
  background-repeat: no-repeat;
  background-size: 50% 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.fv__item {
  max-width: 780px;
  width: 100%;
  margin-inline: auto;
  position: relative;
}
.fv__item-text {
  width: 91%;
  position: absolute;
  bottom: -7%;
  left: 50%;
  -webkit-transform: translateX(-49%);
          transform: translateX(-49%);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .fv__item-text {
    width: 90%;
    bottom: -7%;
  }
}
/* =========================
cta
============================*/
.cta {
  margin-bottom: -1px;
  color: #fff;
  position: relative;
}
.cta::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#586C81), color-stop(50%, #515662), color-stop(75%, #52505C), to(#4B4147)) left/50% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#4D454C), color-stop(50%, #3C373D), color-stop(60%, #323033), color-stop(75%, #262123), to(#171310)) right/50% 100% no-repeat;
  background: linear-gradient(to bottom, #586C81 0%, #515662 50%, #52505C 75%, #4B4147 100%) left/50% 100% no-repeat, linear-gradient(to bottom, #4D454C 0%, #3C373D 50%, #323033 60%, #262123 75%, #171310 100%) right/50% 100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.cta__block {
  max-width: 780px;
  margin-inline: auto;
  padding: calc(var(--s-val) * 6.5) 0 calc(var(--s-val) * 8);
  position: relative;
}
.cta__block::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 780/1399;
  background: url(../images/cta_bg01.webp) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -9;
}
.cta__block::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#494247), color-stop(10%, #4B4147), color-stop(50%, #332E30), color-stop(80%, #1E1A19), to(#171310));
  background: linear-gradient(to right, #494247 0%, #4B4147 10%, #332E30 50%, #1E1A19 80%, #171310 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.cta__detail {
  padding: calc(var(--s-val) * 5) calc(var(--s-val) * 4) 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3%;
}
.cta__img {
  width: 42%;
}
.cta__img img {
  max-width: 200px;
  margin-inline: auto 9%;
}
.cta__text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.cta__badge {
  font-size: calc(var(--s-val) * 2.3);
  font-weight: 600;
  text-align: center;
  line-height: 1em;
}
.cta__brand {
  letter-spacing: 0.21em;
}
.cta__name {
  font-size: calc(var(--s-val) * 3.5);
  line-height: 1.2em;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.1em;
}
.cta__price {
  -webkit-margin-before: calc(var(--s-val) * 3);
          margin-block-start: calc(var(--s-val) * 3);
  font-size: calc(var(--s-val) * 1.7);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0;
}
.cta__price-main {
  font-size: calc(var(--s-val) * 3.3);
  font-weight: 500;
  letter-spacing: 0.07em;
}
.cta__tax {
  font-size: calc(var(--s-val) * 2);
  font-weight: 500;
  letter-spacing: 0.3em;
  margin-inline: calc(var(--s-val) * -0.5);
}
.cta__price-gram {
  display: inline-block;
  font-size: calc(var(--s-val) * 3.6);
  font-weight: 500;
  letter-spacing: 0.07em;
}
.cta__figure {
  -webkit-margin-before: calc(var(--s-val) * 4.5);
          margin-block-start: calc(var(--s-val) * 4.5);
  padding-inline: var(--pdg-inline-common);
}
.cta__btn-wrap {
  -webkit-margin-before: calc(var(--s-val) * 5);
          margin-block-start: calc(var(--s-val) * 5);
  padding-inline: var(--pdg-inline-common);
}
.cta__link {
  display: block;
  font-size: calc(var(--s-val) * 3.3);
  font-weight: 600;
  text-align: center;
  line-height: 1.6em;
  padding: calc(var(--s-val) * 3.5) calc(var(--s-val) * 3) calc(var(--s-val) * 3.3);
}
.cta__btn:not(:first-of-type) {
  -webkit-margin-before: calc(var(--s-val) * 1.9);
          margin-block-start: calc(var(--s-val) * 1.9);
}
.cta__btn--subsc .cta__link {
  background-color: #000;
}
.cta__btn--subsc .cta__link span {
  padding: calc(var(--s-val) * 0.2) calc(var(--s-val) * 2);
  margin-right: calc(var(--s-val) * 4);
  letter-spacing: 0.09em;
  color: #000;
  background-color: #fff;
}
.cta__btn--regular .cta__link {
  border: 2px solid currentColor;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.cta__btn--regular .cta__link:hover {
  background-color: #e5dede;
}
.cta__accordion-wrap {
  -webkit-margin-before: calc(var(--s-val) * 4);
          margin-block-start: calc(var(--s-val) * 4);
  padding-inline: var(--pdg-inline-common);
}
.cta__accordion {
  font-size: calc(var(--s-val) * 3.3);
  font-weight: 600;
  line-height: 1.5em;
  letter-spacing: 0.05em;
}
.cta__accordion:not(:first-of-type) {
  -webkit-margin-before: calc(var(--s-val) * 2);
          margin-block-start: calc(var(--s-val) * 2);
}
.cta__accordion-title {
  text-align: center;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  padding: calc(var(--s-val) * 2.7) 0 calc(var(--s-val) * 2.7);
  position: relative;
}
.cta .plus-icon-wrap {
  position: absolute;
  top: 50%;
  right: calc(var(--s-val) * 3);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.cta .plus-icon {
  --color-plus: currentColor;
  --h-plus: calc(var(--s-val) * 0.2);
}
.cta__accordion-detail {
  margin-inline: calc(var(--s-val) * 2);
  padding-block: calc(var(--s-val) * 3);
}
.cta__accordion--usage .cta__accordion-detail {
  margin-inline: calc(var(--s-val) * 6);
  padding-block: calc(var(--s-val) * 5) 0;
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .cta__detail {
    padding: calc(var(--s-val) * 3.6) calc(var(--s-val) * 6) 0 calc(var(--s-val) * 8);
  }
  .cta__img {
    width: 31%;
  }
  .cta__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .cta__name {
    font-size: calc(var(--s-val) * 3.3);
  }
  .cta__price {
    font-size: calc(var(--s-val) * 1.6);
  }
  .cta__price-main {
    font-size: calc(var(--s-val) * 3.3);
    letter-spacing: 0.05em;
  }
  .cta__price-gram {
    font-size: calc(var(--s-val) * 3.3);
    letter-spacing: 0.05em;
  }
  .cta__btn:not(:first-of-type) {
    -webkit-margin-before: calc(var(--s-val) * 2.3);
            margin-block-start: calc(var(--s-val) * 2.3);
  }
  .cta__link {
    font-size: calc(var(--s-val) * 3.2);
    padding: calc(var(--s-val) * 2.6) calc(var(--s-val) * 3) calc(var(--s-val) * 2);
  }
  .cta__btn--subsc .cta__link span {
    font-size: calc(var(--s-val) * 3);
    padding: calc(var(--s-val) * 0.2) calc(var(--s-val) * 1);
    margin-right: calc(var(--s-val) * 2);
  }
  .cta__btn--regular .cta__link {
    border: 1px solid currentColor;
  }
  .cta__accordion {
    font-size: calc(var(--s-val) * 3.2);
  }
  .cta__accordion-title {
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    padding-block: calc(var(--s-val) * 3);
  }
}
/* =========================
intro
============================*/
.intro {
  position: relative;
  margin-bottom: -1px;
}
.intro::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#0A0605), color-stop(50%, #020202), color-stop(75%, #19161A), to(#131215)) left/50% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#1E191B), color-stop(45%, #2B282E), color-stop(75%, #2D2C31), color-stop(80%, #2D2C33), to(#27242C)) right/50% 100% no-repeat;
  background: linear-gradient(to bottom, #0A0605 0%, #020202 50%, #19161A 75%, #131215 100%) left/50% 100% no-repeat, linear-gradient(to bottom, #1E191B 0%, #2B282E 45%, #2D2C31 75%, #2D2C33 80%, #27242C 100%) right/50% 100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.intro__block {
  max-width: 780px;
  padding: calc(var(--s-val) * 9.5) var(--pdg-inline-common) calc(var(--s-val) * 8);
  margin-inline: auto;
  position: relative;
}
.intro__block::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../images/intro_bg01.webp) no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -9;
}
.intro__block::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#4F424B), to(#4E6C80));
  background: linear-gradient(to right, #4F424B, #4E6C80);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.intro__text {
  width: 97%;
}
.intro__figure {
  -webkit-margin-before: calc(var(--s-val) * 5);
          margin-block-start: calc(var(--s-val) * 5);
}
.intro__note {
  -webkit-margin-before: calc(var(--s-val) * 6.5);
          margin-block-start: calc(var(--s-val) * 6.5);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .intro__block {
    padding: calc(var(--s-val) * 7) var(--pdg-inline-common) calc(var(--s-val) * 8);
  }
}
/* =========================
idea
============================*/
.idea {
  position: relative;
}
.idea::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#010101), color-stop(55%, #010101), to(#1B1F24));
  background: linear-gradient(to bottom, #010101 0%, #010101 55%, #1B1F24 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.idea__block {
  max-width: 780px;
  margin-inline: auto;
}
.idea__figure {
  -webkit-margin-before: calc(var(--s-val) * 5);
          margin-block-start: calc(var(--s-val) * 5);
}
.idea__note {
  -webkit-margin-before: calc(var(--s-val) * 6.5);
          margin-block-start: calc(var(--s-val) * 6.5);
}

/* レスポンシブ ============= */
/* =========================
barrier
============================*/
.barrier {
  position: relative;
}
.barrier::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#0A0605), color-stop(50%, #020202), color-stop(75%, #19161A), to(#131215)) left/50% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#212124), color-stop(15%, #1A1519), color-stop(45%, #2B282E), color-stop(65%, #2a2b2d), to(#384450)) right/50% 100% no-repeat;
  background: linear-gradient(to bottom, #0A0605 0%, #020202 50%, #19161A 75%, #131215 100%) left/50% 100% no-repeat, linear-gradient(to bottom, #212124 0%, #1A1519 15%, #2B282E 45%, #2a2b2d 65%, #384450 100%) right/50% 100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.barrier__block {
  max-width: 780px;
  padding: calc(var(--s-val) * 6.5) var(--pdg-inline-common) calc(var(--s-val) * 5.5);
  margin-inline: auto;
  position: relative;
}
.barrier__block::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../images/barrier_bg01.webp) no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -9;
}
.barrier__block::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#4F424B), to(#4E6C80));
  background: linear-gradient(to right, #4F424B, #4E6C80);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.barrier__figure {
  -webkit-margin-before: calc(var(--s-val) * 5);
          margin-block-start: calc(var(--s-val) * 5);
}
.barrier__note {
  -webkit-margin-before: calc(var(--s-val) * 6.5);
          margin-block-start: calc(var(--s-val) * 6.5);
}

/* レスポンシブ ============= */
/* =========================
voice
============================*/
.voice {
  background: url(../images/gridbg01.png) repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.voice::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#5C4F69), color-stop(50%, #594F60), to(#564E56)) left/50% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#574F57), color-stop(25%, #504850), color-stop(35%, #4A4249), color-stop(50%, #3E363D), color-stop(75%, #241F21), to(#171310)) right/50% 100% no-repeat;
  background: linear-gradient(to bottom, #5C4F69 0%, #594F60 50%, #564E56 100%) left/50% 100% no-repeat, linear-gradient(to bottom, #574F57 0%, #504850 25%, #4A4249 35%, #3E363D 50%, #241F21 75%, #171310 100%) right/50% 100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.voice__block {
  max-width: 780px;
  margin-inline: auto;
  padding: calc(var(--s-val) * 5.5) var(--pdg-inline-common) calc(var(--s-val) * 8.5);
  position: relative;
}
.voice__block::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 778/1186;
  background: url(../images/voice_bg01.webp) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -9;
}
.voice__block::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#564E56), color-stop(20%, #524A51), color-stop(50%, #383035), color-stop(75%, #211D1C), to(#171310));
  background: linear-gradient(to right, #564E56 0%, #524A51 20%, #383035 50%, #211D1C 75%, #171310 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.voice__01, .voice__02, .voice__03 {
  -webkit-box-shadow: calc(var(--s-val) * 0.2) calc(var(--s-val) * 0.2) calc(var(--s-val) * 0.4) rgba(30, 35, 27, 0.3);
          box-shadow: calc(var(--s-val) * 0.2) calc(var(--s-val) * 0.2) calc(var(--s-val) * 0.4) rgba(30, 35, 27, 0.3);
  -webkit-margin-before: calc(var(--s-val) * 3.3);
          margin-block-start: calc(var(--s-val) * 3.3);
}
.voice__01 {
  -webkit-margin-before: calc(var(--s-val) * 5.5);
          margin-block-start: calc(var(--s-val) * 5.5);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .voice__block {
    padding: calc(var(--s-val) * 5) var(--pdg-inline-common) calc(var(--s-val) * 7);
  }
  .voice__01 {
    -webkit-margin-before: calc(var(--s-val) * 5);
            margin-block-start: calc(var(--s-val) * 5);
  }
}
/* =========================
lead-nav
============================*/
.lead-nav {
  background: -webkit-gradient(linear, left top, left bottom, from(#231F17), color-stop(15%, #262221), color-stop(50%, #241F1F), to(#110F0D)) left/50% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#514D4C), color-stop(20%, #5B5655), color-stop(50%, #5C5555), color-stop(70%, #595554), to(#4A4645)) right/50% 100% no-repeat;
  background: linear-gradient(to bottom, #231F17 0%, #262221 15%, #241F1F 50%, #110F0D 100%) left/50% 100% no-repeat, linear-gradient(to bottom, #514D4C 0% 0%, #5B5655 20%, #5C5555 50% 50%, #595554 70%, #4A4645 100%) right/50% 100% no-repeat;
  position: relative;
}
.lead-nav__block {
  max-width: 780px;
  width: 100%;
  aspect-ratio: 1560/1500;
  margin-inline: auto;
  position: relative;
  background: url(../images/lead-nav_bg01.webp) no-repeat;
  background-size: contain;
  background-position: right;
}
.lead-nav__text-wrap {
  max-width: 780px;
  width: 100%;
  height: 100%;
  padding: calc(var(--s-val) * 7.5) 0 0;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.lead-nav__heading {
  padding-inline: var(--pdg-inline-common);
}
.lead-nav__heading-text {
  width: calc(var(--s-val) * 41);
}
.lead-nav__btn-wrap {
  -webkit-margin-before: calc(var(--s-val) * 7);
          margin-block-start: calc(var(--s-val) * 7);
  padding-inline: var(--pdg-inline-common);
}
.lead-nav__btn-wrap a {
  display: block;
  width: calc(var(--s-val) * 39);
}
.lead-nav__btn-wrap a:not(:first-of-type) {
  -webkit-margin-before: calc(var(--s-val) * 2.8);
          margin-block-start: calc(var(--s-val) * 2.8);
}
.lead-nav__note {
  width: calc(var(--s-val) * 71);
  margin: calc(var(--s-val) * 5.5) auto 0;
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .lead-nav__text-wrap {
    padding: calc(var(--s-val) * 5.5) 0 0;
  }
  .lead-nav__heading-text {
    width: 71%;
  }
  .lead-nav__btn-wrap a {
    width: 67%;
  }
  .lead-nav__btn-wrap a:not(:first-of-type) {
    -webkit-margin-before: calc(var(--s-val) * 2);
            margin-block-start: calc(var(--s-val) * 2);
  }
  .lead-nav__note {
    width: 90%;
    margin: calc(var(--s-val) * 3.6) auto 0;
  }
}
/* =========================
skin
============================*/
.skin {
  position: relative;
  margin-bottom: -1px;
}
.skin::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#59697D), color-stop(5%, #586A7B), color-stop(15%, #546272), color-stop(35%, #525967), color-stop(50%, #4E5661), color-stop(75%, #4F4E57), color-stop(85%, #4F4751), color-stop(90%, #4A3F48), to(#463B41)) left/50% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#4C434D), color-stop(15%, #4E4851), color-stop(20%, #4F4D59), color-stop(35%, #525461), color-stop(50%, #4F525F), color-stop(60%, #484C54), color-stop(70%, #3D3C41), color-stop(75%, #313035), color-stop(80%, #262324), color-stop(90%, #171310), color-stop(95%, #16120F), to(#16120F)) right/50% 100% no-repeat;
  background: linear-gradient(to bottom, #59697D 0%, #586A7B 5%, #546272 15%, #525967 35%, #4E5661 50%, #4F4E57 75%, #4F4751 85%, #4A3F48 90%, #463B41 100%) left/50% 100% no-repeat, linear-gradient(to bottom, #4C434D 0%, #4E4851 15%, #4F4D59 20%, #525461 35%, #4F525F 50%, #484C54 60%, #3D3C41 70%, #313035 75%, #262324 80%, #171310 90%, #16120F 95%, #16120F 100%) right/50% 100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.skin__block {
  max-width: 780px;
  padding: calc(var(--s-val) * 7.5) var(--pdg-inline-common) calc(var(--s-val) * 4);
  margin-inline: auto;
  position: relative;
}
.skin__block::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 780/3310;
  background: url(../images/skin_bg01.webp) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -9;
}
.skin__block::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#463B41), color-stop(30%, #3E3136), color-stop(50%, #30272A), color-stop(70%, #221918), to(#16120F));
  background: linear-gradient(to right, #463B41 0%, #3E3136 30%, #30272A 50%, #221918 70%, #16120F 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.skin__figure01 {
  -webkit-margin-before: calc(var(--s-val) * 9);
          margin-block-start: calc(var(--s-val) * 9);
}
.skin__figure02 {
  -webkit-margin-before: calc(var(--s-val) * 7.5);
          margin-block-start: calc(var(--s-val) * 7.5);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .skin__block {
    padding: calc(var(--s-val) * 6.5) var(--pdg-inline-common) calc(var(--s-val) * 3);
  }
  .skin__figure01 {
    -webkit-margin-before: calc(var(--s-val) * 7.5);
            margin-block-start: calc(var(--s-val) * 7.5);
  }
  .skin__figure02 {
    -webkit-margin-before: calc(var(--s-val) * 6.5);
            margin-block-start: calc(var(--s-val) * 6.5);
  }
}
/* =========================
balance
============================*/
.balance {
  position: relative;
}
.balance::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#59697A), color-stop(15%, #546272), color-stop(35%, #535A68), color-stop(50%, #505561), color-stop(75%, #4F4F5A), color-stop(90%, #4C434D), to(#473A41)) left/50% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#4D454E), color-stop(5%, #4c434d), color-stop(15%, #4E4851), color-stop(25%, #50505C), color-stop(35%, #505561), color-stop(50%, #515360), color-stop(65%, #484853), color-stop(75%, #39383F), color-stop(90%, #1B1414), to(#17110F)) right/50% 100% no-repeat;
  background: linear-gradient(to bottom, #59697A 0%, #546272 15%, #535A68 35%, #505561 50%, #4F4F5A 75%, #4C434D 90%, #473A41 100%) left/50% 100% no-repeat, linear-gradient(to bottom, #4D454E 0%, #4c434d 5%, #4E4851 15%, #50505C 25%, #505561 35%, #515360 50%, #484853 65%, #39383F 75%, #1B1414 90%, #17110F 100%) right/50% 100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.balance__block {
  max-width: 780px;
  padding: calc(var(--s-val) * 7.5) var(--pdg-inline-common) calc(var(--s-val) * 7);
  margin-inline: auto;
  position: relative;
}
.balance__block::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 780/3380;
  background: url(../images/balance_bg01.webp) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -9;
}
.balance__block::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#473A41), color-stop(15%, #43393F), color-stop(50%, #30272A), color-stop(75%, #1E1816), to(#17110F));
  background: linear-gradient(to right, #473A41 0%, #43393F 15%, #30272A 50%, #1E1816 75%, #17110F 100% 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .balance__block {
    padding: calc(var(--s-val) * 6) var(--pdg-inline-common) calc(var(--s-val) * 6);
  }
}
/* =========================
aging
============================*/
.aging__figure02 {
  -webkit-margin-before: calc(var(--s-val) * 6);
          margin-block-start: calc(var(--s-val) * 6);
}

/* レスポンシブ ============= */
/* =========================
flora
============================*/
.flora {
  -webkit-margin-before: calc(var(--s-val) * 7.8);
          margin-block-start: calc(var(--s-val) * 7.8);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .flora {
    -webkit-margin-before: calc(var(--s-val) * 7);
            margin-block-start: calc(var(--s-val) * 7);
  }
}
/* =========================
structure
============================*/
.structure {
  margin-block: -2px;
  position: relative;
}
.structure::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#4F5460), color-stop(50%, #4E515E), to(#4F4C56)) left/50% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#4F5460), color-stop(50%, #4F525F), to(#403E46)) right/50% 100% no-repeat;
  background: linear-gradient(to bottom, #4F5460 0%, #4E515E 50%, #4F4C56 100%) left/50% 100% no-repeat, linear-gradient(to bottom, #4F5460 0%, #4F525F 50%, #403E46 100%) right/50% 100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.structure__block {
  max-width: 780px;
  margin-inline: auto;
}
.structure__accordion-wrap {
  padding: 0 calc(var(--s-val) * 7);
  position: relative;
}
.structure__accordion-wrap::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#50505C), to(#4F4C56)) left/50% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#50505C), to(#3F3C44)) right/50% 100% no-repeat;
  background: linear-gradient(to bottom, #50505C 0%, #4F4C56 100%) left/50% 100% no-repeat, linear-gradient(to bottom, #50505C 0%, #3F3C44 100%) right/50% 100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.structure__accordion {
  background: url(../images/gridbg02.png) repeat;
  background-size: cover;
  background-position: center;
  font-size: calc(var(--s-val) * 3.3);
  font-weight: 600;
  line-height: 1.5em;
  letter-spacing: 0.05em;
}
.structure__accordion-title {
  margin-inline: calc(var(--s-val) * 3) calc(var(--s-val) * 2);
  padding: calc(var(--s-val) * 4) calc(var(--s-val) * 5) calc(var(--s-val) * 4) 0;
  position: relative;
}
.structure .plus-icon-wrap {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.structure .plus-icon {
  --color-plus: #8b979b;
}
.structure__accordion-detail {
  margin-inline: calc(var(--s-val) * 3);
  padding-block: calc(var(--s-val) * 3) calc(var(--s-val) * 3.5);
}
.structure__accordion-img img:nth-of-type(2) {
  -webkit-margin-before: calc(var(--s-val) * 2);
          margin-block-start: calc(var(--s-val) * 2);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .structure__accordion {
    font-size: calc(var(--s-val) * 3);
  }
  .structure__accordion-title {
    padding: calc(var(--s-val) * 3.5) calc(var(--s-val) * 5) calc(var(--s-val) * 3.5) 0;
  }
}
/* =========================
elastin
============================*/
.elastin {
  position: relative;
}
.elastin::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#4F4C56), color-stop(35%, #504854), color-stop(50%, #4E414A), color-stop(75%, #443339), to(#3C282D)) left/50% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#3F3C44), color-stop(35%, #1D1818), color-stop(50%, #19100F), color-stop(75%, #190B09), to(#1F110F)) right/50% 100% no-repeat;
  background: linear-gradient(to bottom, #4F4C56 0%, #504854 35%, #4E414A 50%, #443339 75%, #3C282D 100%) left/50% 100% no-repeat, linear-gradient(to bottom, #3F3C44 0%, #1D1818 35%, #19100F 50%, #190B09 75%, #1F110F 100%) right/50% 100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.elastin__block {
  max-width: 780px;
  margin-inline: auto;
}
.elastin__biotics-ttl {
  margin-block: -2px;
  width: 100%;
  position: relative;
}
.elastin__biotics-ttl::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1560/910;
  background: url(../images/beauty_img11_bg01.webp) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5;
}
.elastin__biotics-ttl::after {
  content: "";
  display: block;
  width: calc(var(--s-val) * 32);
  aspect-ratio: 1280/1324;
  background: url(../images/beauty_img11_bg02.webp) no-repeat;
  background-size: contain;
  position: absolute;
  top: calc(var(--s-val) * 2);
  right: calc(var(--s-val) * -4.3);
  z-index: -1;
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .elastin__biotics-ttl::after {
    width: calc(var(--s-val) * 27);
    right: calc(var(--s-val) * -3.4);
  }
}
/* =========================
howto-drink
============================*/
.howto-drink {
  background-color: #C8C8C9;
}
.howto-drink__block {
  max-width: 780px;
  padding: calc(var(--s-val) * 6) var(--pdg-inline-common) calc(var(--s-val) * 9);
  margin-inline: auto;
}
.howto-drink__lead {
  width: 93%;
  margin-inline: auto;
}

/* レスポンシブ ============= */
/* =========================
instagram
============================*/
.instagram {
  background-color: #fff;
}
.instagram__block {
  max-width: 780px;
  padding: calc(var(--s-val) * 7) var(--pdg-inline-common) 0;
  margin-inline: auto;
}
.instagram__lead {
  -webkit-margin-before: calc(var(--s-val) * 3.3);
          margin-block-start: calc(var(--s-val) * 3.3);
  font-size: calc(var(--s-val) * 2.6);
  font-weight: 600;
  line-height: 1.7em;
  text-align: center;
  color: #5E5E5E;
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .instagram__block {
    padding: calc(var(--s-val) * 3) var(--pdg-inline-common) 0;
  }
  .instagram__lead {
    font-size: calc(var(--s-val) * 2.1);
    -webkit-margin-before: calc(var(--s-val) * 2);
            margin-block-start: calc(var(--s-val) * 2);
  }
}
/* =========================
よくある質問
============================*/
.faq {
  position: relative;
}
.faq::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.faq__block {
  max-width: 780px;
  margin-inline: auto;
  padding: calc(var(--s-val) * 8) var(--pdg-inline-common) calc(var(--s-val) * 3);
}
.faq__title {
  font-size: calc(var(--s-val) * 4.8);
  font-weight: bold;
  line-height: 1.2em;
  text-align: center;
}

.qa {
  -webkit-margin-before: calc(var(--s-val) * 4.2);
          margin-block-start: calc(var(--s-val) * 4.2);
}
.qa__item {
  font-size: calc(var(--s-val) * 1.8);
  font-weight: 600;
  line-height: 1.5em;
  letter-spacing: 0.05em;
  text-align: justify;
  border-top: 2px solid var(--color-rose-brown);
  position: relative;
}
.qa__item:last-of-type {
  border-bottom: 2px solid var(--color-rose-brown);
}
.qa__item::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #Fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.qa__title {
  margin-inline: 0 calc(var(--s-val) * 2);
  padding: calc(var(--s-val) * 2) calc(var(--s-val) * 5) calc(var(--s-val) * 2) 0;
  position: relative;
}
.qa .plus-icon-wrap {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.qa .plus-icon {
  --w-plus: calc(var(--s-val) * 1.7);
  --h-plus: calc(var(--s-val) * 0.2);
}
.qa__detail {
  padding-block: 0 calc(var(--s-val) * 2);
  line-height: 1.2em;
  letter-spacing: normal;
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .faq__title {
    font-size: calc(var(--s-val) * 4.3);
    letter-spacing: normal;
  }
  .qa {
    -webkit-margin-before: calc(var(--s-val) * 3.5);
            margin-block-start: calc(var(--s-val) * 3.5);
  }
  .qa__item {
    font-size: calc(var(--s-val) * 1.6);
    border-top: 1px solid var(--color-rose-brown);
    position: relative;
  }
  .qa__item:last-of-type {
    border-bottom: 1px solid var(--color-rose-brown);
  }
  .qa__title {
    margin-inline: 0 calc(var(--s-val) * 1);
    padding: calc(var(--s-val) * 2) calc(var(--s-val) * 2) calc(var(--s-val) * 2) 0;
  }
}