@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;
  position: relative;
}
main::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #e4e4c8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
main img {
  display: block;
  width: 100%;
}

/* =========================
fv 
============================*/
.fv {
  position: relative;
}
.fv::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #F8F8F8;
  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: 90%;
  position: absolute;
  bottom: -7%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .fv__item-text {
    width: 90%;
    bottom: -7%;
  }
}
/* =========================
cta
============================*/
.cta {
  max-width: 780px;
  padding: calc(var(--s-val) * 8.5) var(--pdg-inline-common) calc(var(--s-val) * 6.4);
  margin-inline: auto;
}
.cta__detail {
  width: 83%;
  margin-inline: auto;
  padding: calc(var(--s-val) * 2) 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10%;
}
.cta__img {
  width: 50%;
}
.cta__text {
  max-width: 208px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.cta__badge {
  font-size: calc(var(--s-val) * 2.5);
  font-weight: 600;
  text-align: center;
  line-height: 1em;
}
.cta__brand {
  letter-spacing: 0.15em;
}
.cta__name {
  font-size: calc(var(--s-val) * 4);
  line-height: 1.2em;
  font-weight: 600;
  text-align: center;
}
.cta__price {
  -webkit-margin-before: calc(var(--s-val) * 1);
          margin-block-start: calc(var(--s-val) * 1);
  font-size: calc(var(--s-val) * 2);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0;
}
.cta__price-main {
  font-size: calc(var(--s-val) * 3.6);
  font-weight: 500;
  letter-spacing: 0.07em;
}
.cta__price-gram {
  display: inline-block;
  font-size: calc(var(--s-val) * 3.6);
  font-weight: 500;
  letter-spacing: 0.07em;
}
.cta__logo-wrap {
  max-width: 100px;
  margin: calc(var(--s-val) * 1) auto 0;
}
.cta__figure {
  -webkit-margin-before: calc(var(--s-val) * 3);
          margin-block-start: calc(var(--s-val) * 3);
}
.cta__btn-wrap {
  -webkit-margin-before: calc(var(--s-val) * 4);
          margin-block-start: calc(var(--s-val) * 4);
}
.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.4) calc(var(--s-val) * 2);
}
.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 {
  padding: 0;
}
.cta__btn--regular .cta__link {
  color: #818200;
  border: 2px solid currentColor;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.cta__btn--regular .cta__link:hover {
  background-color: #ebebda;
}
.cta__accordion-wrap {
  -webkit-margin-before: calc(var(--s-val) * 4);
          margin-block-start: calc(var(--s-val) * 4);
}
.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;
  color: #818200;
  border-top: 2px solid #818200;
  border-bottom: 2px solid #818200;
  padding: calc(var(--s-val) * 3.3) 0;
  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: #818200;
  --h-plus: calc(var(--s-val) * 0.2);
}
.cta__accordion-detail {
  margin-inline: calc(var(--s-val) * 0.7);
  padding-block: calc(var(--s-val) * 2.6);
}
.cta__accordion-detail--how {
  margin-inline: 0 calc(var(--s-val) * 1.5);
  padding-block: calc(var(--s-val) * 4.5) calc(var(--s-val) * 0.6);
}
.cta__accordion-img--ingredients img:not(:first-of-type) {
  -webkit-margin-before: calc(var(--s-val) * 3.5);
          margin-block-start: calc(var(--s-val) * 3.5);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .cta {
    padding: calc(var(--s-val) * 7) var(--pdg-inline-common) calc(var(--s-val) * 5);
  }
  .cta__badge {
    font-size: calc(var(--s-val) * 2);
  }
  .cta__name {
    font-size: calc(var(--s-val) * 3.2);
  }
  .cta__logo-wrap {
    width: calc(var(--s-val) * 9);
  }
  .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-wrap {
    -webkit-margin-before: calc(var(--s-val) * 3);
            margin-block-start: calc(var(--s-val) * 3);
  }
  .cta__btn:not(:first-of-type) {
    -webkit-margin-before: calc(var(--s-val) * 1.5);
            margin-block-start: calc(var(--s-val) * 1.5);
  }
  .cta__link {
    font-size: calc(var(--s-val) * 3.2);
    padding: calc(var(--s-val) * 2.5);
  }
  .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-wrap {
    -webkit-margin-before: calc(var(--s-val) * 3.3);
            margin-block-start: calc(var(--s-val) * 3.3);
  }
  .cta__accordion {
    font-size: calc(var(--s-val) * 3.2);
  }
  .cta__accordion-title {
    border-top: 1px solid #818200;
    border-bottom: 1px solid #818200;
    padding-block: calc(var(--s-val) * 2.3);
  }
  .cta__accordion-detail {
    margin-inline: calc(var(--s-val) * 0.5);
    padding-block: calc(var(--s-val) * 2.2) calc(var(--s-val) * 1);
  }
  .cta__accordion-detail--how {
    margin-inline: 0 calc(var(--s-val) * 1);
    padding-block: calc(var(--s-val) * 3.8) calc(var(--s-val) * 0.5);
  }
}
/* =========================
intro
============================*/
.intro {
  position: relative;
}
.intro::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.intro__block {
  max-width: 780px;
  padding: calc(var(--s-val) * 9) var(--pdg-inline-common) calc(var(--s-val) * 14);
  margin-inline: auto;
  position: relative;
}
.intro__block::before {
  content: "";
  display: block;
  width: calc(var(--s-val) * 35);
  aspect-ratio: 1149/1419;
  background: url(../images/intro_bg01.webp) no-repeat;
  background-size: contain;
  position: absolute;
  top: calc(var(--s-val) * 27);
  right: calc(var(--s-val) * -5.3);
  z-index: -9;
}
.intro__text {
  width: 87%;
}
.intro__figure {
  -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.9) var(--pdg-inline-common) calc(var(--s-val) * 11.8);
    overflow: hidden;
  }
  .intro__block::before {
    width: calc(var(--s-val) * 30);
    top: calc(var(--s-val) * 22.5);
    right: calc(var(--s-val) * -3.8);
  }
  .intro__figure {
    -webkit-margin-before: calc(var(--s-val) * 5.4);
            margin-block-start: calc(var(--s-val) * 5.4);
  }
}
/* =========================
voice
============================*/
.voice {
  background: url(../images/gridbg01.jpg) repeat;
  background-size: cover;
  background-position: center;
}
.voice__block {
  max-width: 780px;
  margin-inline: auto;
  padding: calc(var(--s-val) * 4.3) var(--pdg-inline-common) calc(var(--s-val) * 8.4);
}
.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) * 6);
          margin-block-start: calc(var(--s-val) * 6);
}
.voice__01 {
  -webkit-margin-before: calc(var(--s-val) * 6.6);
          margin-block-start: calc(var(--s-val) * 6.6);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .voice__block {
    padding: calc(var(--s-val) * 3.7) var(--pdg-inline-common) calc(var(--s-val) * 7.7);
  }
  .voice__01, .voice__02, .voice__03 {
    -webkit-margin-before: calc(var(--s-val) * 5);
            margin-block-start: calc(var(--s-val) * 5);
  }
  .voice__01 {
    -webkit-margin-before: calc(var(--s-val) * 5.1);
            margin-block-start: calc(var(--s-val) * 5.1);
  }
  .voice__review-text {
    width: calc(var(--s-val) * 14);
  }
}
/* =========================
design
============================*/
.design {
  background: -webkit-gradient(linear, left top, left bottom, from(#F5F4F7), color-stop(50%, #F5F3F3), to(#F3EEF0)) left/50% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#F3F0F1), color-stop(50%, #F4EFF1), to(#f1edee)) right/50% 100% no-repeat;
  background: linear-gradient(to bottom, #F5F4F7 0%, #F5F3F3 50%, #F3EEF0 100%) left/50% 100% no-repeat, linear-gradient(to bottom, #F3F0F1 0%, #F4EFF1 50%, #f1edee 100%) right/50% 100% no-repeat;
  position: relative;
}
.design__block {
  max-width: 780px;
  margin-inline: auto;
  position: relative;
}
.design__text-wrap {
  width: 100%;
  height: 100%;
  padding: calc(var(--s-val) * 9.2) var(--pdg-inline-common) calc(var(--s-val) * 6);
  position: absolute;
  top: 0;
  left: 0;
}
.design__text {
  width: calc(var(--s-val) * 28.5);
}
.design__btn-wrap {
  -webkit-margin-before: calc(var(--s-val) * 7);
          margin-block-start: calc(var(--s-val) * 7);
  width: calc(var(--s-val) * 41);
}
.design__btn-wrap a {
  display: block;
}
.design__btn-wrap a:not(:first-of-type) {
  -webkit-margin-before: calc(var(--s-val) * 2);
          margin-block-start: calc(var(--s-val) * 2);
}
.design__note {
  width: 79%;
  -webkit-margin-before: calc(var(--s-val) * 6.5);
          margin-block-start: calc(var(--s-val) * 6.5);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .design__text-wrap {
    padding: calc(var(--s-val) * 8.2) var(--pdg-inline-common) calc(var(--s-val) * 6);
  }
  .design__text {
    width: calc(var(--s-val) * 24);
  }
  .design__btn-wrap {
    -webkit-margin-before: calc(var(--s-val) * 6);
            margin-block-start: calc(var(--s-val) * 6);
    width: calc(var(--s-val) * 34);
  }
}
/* =========================
trust
============================*/
.trust {
  position: relative;
}
.trust::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.trust__block {
  max-width: 780px;
  padding: calc(var(--s-val) * 10.6) var(--pdg-inline-common) calc(var(--s-val) * 10);
  margin-inline: auto;
}
.trust__text {
  width: 93%;
}
.trust__figure {
  -webkit-margin-before: calc(var(--s-val) * 8);
          margin-block-start: calc(var(--s-val) * 8);
}
.trust__commitment {
  width: 89%;
  -webkit-margin-before: calc(var(--s-val) * 6.6);
          margin-block-start: calc(var(--s-val) * 6.6);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .trust__block {
    padding: calc(var(--s-val) * 9.5) var(--pdg-inline-common) calc(var(--s-val) * 8.5);
  }
  .trust__text {
    width: 96%;
  }
  .trust__figure {
    -webkit-margin-before: calc(var(--s-val) * 8.5);
            margin-block-start: calc(var(--s-val) * 8.5);
  }
  .trust__commitment {
    width: 92%;
    -webkit-margin-before: calc(var(--s-val) * 5.7);
            margin-block-start: calc(var(--s-val) * 5.7);
  }
}
/* =========================
nutrients
============================*/
.nutrients {
  position: relative;
}
.nutrients::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.nutrients__block {
  max-width: 780px;
  padding: calc(var(--s-val) * 9.1) var(--pdg-inline-common) calc(var(--s-val) * 5.5);
  margin-inline: auto;
  position: relative;
}
.nutrients__block::before {
  content: "";
  display: block;
  width: calc(100% - var(--pdg-inline-common) * 2);
  border-top: 2px dotted #251e1c;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -9;
}
.nutrients__figure01 {
  -webkit-margin-before: calc(var(--s-val) * 8);
          margin-block-start: calc(var(--s-val) * 8);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .nutrients__block {
    padding: calc(var(--s-val) * 8) var(--pdg-inline-common) calc(var(--s-val) * 4.8);
  }
  .nutrients__figure01 {
    -webkit-margin-before: calc(var(--s-val) * 7);
            margin-block-start: calc(var(--s-val) * 7);
  }
}
/* =========================
arrange
============================*/
.arrange {
  position: relative;
}
.arrange::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.arrange__block {
  max-width: 780px;
  padding: calc(var(--s-val) * 10) var(--pdg-inline-common) calc(var(--s-val) * 6);
  margin-inline: auto;
  position: relative;
}
.arrange__block::before {
  content: "";
  display: block;
  width: calc(100% - var(--pdg-inline-common) * 2);
  border-top: 2px dotted #251e1c;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -9;
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .arrange__block {
    padding: calc(var(--s-val) * 8.3) var(--pdg-inline-common) calc(var(--s-val) * 5.5);
  }
}
/* =========================
merit
============================*/
.merit {
  background: url(../images/merit_bg01.webp) no-repeat;
  background-size: cover;
  background-position: center;
}
.merit__block {
  max-width: 780px;
  padding: calc(var(--s-val) * 6) var(--pdg-inline-common) calc(var(--s-val) * 3);
  margin-inline: auto;
}
.merit__note {
  width: 97%;
  -webkit-margin-before: calc(var(--s-val) * 2);
          margin-block-start: calc(var(--s-val) * 2);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .merit__block {
    padding: calc(var(--s-val) * 5.2) var(--pdg-inline-common) calc(var(--s-val) * 2);
  }
}
/* =========================
howto-drink
============================*/
.howto-drink {
  position: relative;
}
.howto-drink__block {
  max-width: 780px;
  padding: calc(var(--s-val) * 8.5) var(--pdg-inline-common) calc(var(--s-val) * 8.2);
  margin-inline: auto;
}
.howto-drink__lead {
  width: 98%;
  margin-inline: 0 auto;
}
.howto-drink__arrange {
  -webkit-margin-before: calc(var(--s-val) * 6.3);
          margin-block-start: calc(var(--s-val) * 6.3);
}
.howto-drink__list {
  width: 73.5%;
  -webkit-margin-before: calc(var(--s-val) * 3.2);
          margin-block-start: calc(var(--s-val) * 3.2);
}
.howto-drink__microwave {
  -webkit-margin-before: calc(var(--s-val) * 7);
          margin-block-start: calc(var(--s-val) * 7);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .howto-drink__block {
    padding: calc(var(--s-val) * 7.1) var(--pdg-inline-common) calc(var(--s-val) * 6.8);
  }
  .howto-drink__arrange {
    -webkit-margin-before: calc(var(--s-val) * 5.6);
            margin-block-start: calc(var(--s-val) * 5.6);
  }
  .howto-drink__list {
    margin: calc(var(--s-val) * 2.5) 0 0;
  }
  .howto-drink__microwave {
    margin: calc(var(--s-val) * 6) 0 0;
  }
}
/* =========================
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) * 5);
          margin-block-start: calc(var(--s-val) * 5);
}
.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) * 2);
  --h-plus: calc(var(--s-val) * 0.2);
}
.qa__detail {
  padding-block: 0 calc(var(--s-val) * 2);
}

/* レスポンシブ ============= */
@media screen and (max-width: 780px) {
  .faq__title {
    font-size: calc(var(--s-val) * 4.4);
  }
  .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 {
    padding: calc(var(--s-val) * 2) calc(var(--s-val) * 2) calc(var(--s-val) * 2) 0;
  }
}