@charset "UTF-8";
/* 1440カンプ →  1200*/
:root {
  --scale: 0.0833333333vw;
  --max: 1;
}
@media screen and (max-width: 767px) {
  :root {
    --scale: 0.1633986928vw;
    --scale02: 0.2659574468vw; /* 376用 */
    --max: 10;
  }
}

:root {
  --scale: 0.1302083333vw;
  --max: 1;
  --scale02: 0.1302083333vw; /* sp時に376base */
}
@media screen and (max-width: 767px) {
  :root {
    --scale: 0.1633986928vw;
    --scale02: 0.2659574468vw; /* 376用 */
    --max: 10;
  }
}

.inner {
  margin-inline: auto;
  width: clamp(0px, calc(580 * var(--scale)), calc(580px * var(--max)));
}
@media screen and (max-width: 767px) {
  .inner {
    width: clamp(0px, calc(580 * var(--scale)), calc(580px * var(--max)));
  }
}

/*------------------------------
pack
------------------------------*/
.pack {
  margin: 0 auto;
}
@media (min-width: 768px) {
  .pack {
    width: clamp(0px, calc(612 * var(--scale)), calc(612px * var(--max)));
  }
}
@media (max-width: 767px) {
  .pack {
    overflow: clip;
  }
}

/*------------------------------
fv
------------------------------*/
@media (max-width: 767px) {
  .fv {
    margin-top: calc(clamp(0px, calc(3 * var(--scale)), calc(3px * var(--max))) * -1);
  }
}

/*------------------------------
cta
------------------------------*/
.cta {
  background: #f5a554;
  padding: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max))) clamp(0px, calc(5 * var(--scale)), calc(5px * var(--max))) clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  position: relative;
}
.cta--hero .cta__name {
  font-size: clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max)));
}
.cta--hero .cta__name ruby {
  font-size: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
}
.cta--hero .cta__info {
  font-size: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
}
.cta--detail {
  margin-bottom: clamp(0px, calc(120 * var(--scale)), calc(120px * var(--max)));
  padding-bottom: clamp(0px, calc(26 * var(--scale)), calc(26px * var(--max)));
}
.cta--detail .cta__name {
  font-size: clamp(0px, calc(29 * var(--scale)), calc(29px * var(--max)));
  letter-spacing: 0.05em;
}
.cta--detail .cta__name ruby {
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  letter-spacing: 0.3em;
}
.cta--detail .cta__info {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
}
.cta--detail .cta__product {
  transform: translateX(9%);
}
.cta--detail .cta__lead {
  padding: 0 3.8em;
}
.cta--detail .cta__lead::before {
  width: 2.6em;
  transform: translateY(-50%) rotate(50deg);
}
.cta--detail .cta__lead::after {
  width: 2.6em;
  transform: translateY(-50%) rotate(-50deg);
}
.cta--compact {
  margin-top: clamp(0px, calc(90 * var(--scale)), calc(90px * var(--max)));
  padding: clamp(0px, calc(5 * var(--scale)), calc(5px * var(--max))) 0;
}
@media (max-width: 767px) {
  .cta--detail {
    margin-bottom: 10%;
  }
}

.cta__badge {
  position: absolute;
  background: url(../img/pack/cta01.png) no-repeat center center/100%;
  aspect-ratio: 647/450;
  font-size: clamp(0px, calc(22 * var(--scale)), calc(22px * var(--max)));
  transform: translate(-50%, -67%);
  left: 75%;
  top: 0%;
  width: 53%;
}
.cta__badge > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -63%) rotate(12.3deg);
  width: 100%;
}
.cta__badge strong {
  font-weight: 500;
  letter-spacing: 0.075em;
  position: relative;
}
.cta__badge strong::before {
  content: "";
  position: absolute;
  background: #f5a554;
  transform: translate(-50%, 100%);
  width: 109%;
  height: clamp(0px, calc(3 * var(--scale)), calc(3px * var(--max)));
  border-radius: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  left: 50%;
  bottom: 0%;
}
.cta__badge span {
  font-weight: 300;
  font-size: clamp(0px, calc(19 * var(--scale)), calc(19px * var(--max)));
  letter-spacing: 0.01em;
  margin-top: 0.5em;
}

.cta__content { /* common */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cta__product { /* common */
  width: 48%;
}

.cta__body {
  width: 50%;
}

.cta__lead { /* common */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 500;
  color: #fff;
  text-align: center;
  padding: 0 2em;
  position: relative;
  letter-spacing: 0.01em;
}
.cta__lead::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(45deg);
  background: #fff;
  width: 2em;
  height: 1px;
}
.cta__lead::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(-45deg);
  background: #fff;
  width: 2em;
  height: 1px;
}

.cta__catch {
  margin-top: 0.7em;
  font-size: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
  font-weight: 500;
  color: #fff;
  text-align: center;
  letter-spacing: 0.01em;
  width: calc(100% + 0.5em);
}
.cta__catch em {
  background-image: radial-gradient(circle at center, #fff 20%, transparent 20%); /* 点の色とサイズ調整 */
  background-position: top left; /* 点の位置 */
  background-repeat: repeat-x; /* 横方向に繰り返し */
  background-size: 1em 0.3em;
  padding-top: 0.1em;
}

.cta__name {
  margin-top: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  font-size: var(--name-fz);
  font-size: clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max)));
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.cta__name ruby {
  display: block;
  font-size: var(--ruby);
  letter-spacing: 1em;
  text-indent: 1em;
}
.cta__name span {
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  display: block;
  margin-top: -0.1em;
}

.cta__info {
  font-size: var(--info-fz);
  font-weight: 400;
  line-height: 1.6666666667;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
  margin-top: 0.4em;
}

.cta__button { /* common */
  margin-top: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  text-align: center;
}
.cta__button span {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  background: #fff;
  display: inline-block;
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 500;
  padding: 0.8em 1.2em;
  white-space: nowrap;
  position: relative;
  padding: 0.8em 3.7em;
}
.cta__button span::before, .cta__button span::after {
  content: "〉〉〉";
  position: absolute;
  transform: translate(0%, -50%);
  top: 50%;
}
.cta__button span::before {
  left: 1em;
}
.cta__button span::after {
  right: 1em;
  transform: translate(0%, -50%) scale(-1, 1);
}
@media (max-width: 767px) {
  .cta__button span {
    font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  }
}

.cta__ingredients {
  margin-top: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}
.cta__ingredients::before {
  content: "";
  position: absolute;
  background: #fff;
  transform: translate(-50%, 0%);
  width: 86%;
  height: clamp(0px, calc(1 * var(--scale)), calc(1px * var(--max)));
  left: 50%;
  bottom: -0.15em;
}

.cta__free {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0px, calc(5 * var(--scale)), calc(5px * var(--max)));
}
.cta__free li {
  width: calc(25% - clamp(0px, calc(5 * var(--scale)), calc(5px * var(--max))) * 3 / 4);
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 500;
  line-height: 1.5714285714;
  text-align: center;
  background: #fff;
  border-radius: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  letter-spacing: -0.1em;
  color: #f5a554;
  padding: 0.4em 0;
}
.cta__free .narrow {
  letter-spacing: -0.1em;
  font-feature-settings: "palt";
  white-space: nowrap;
}

.cta__component {
  font-size: clamp(0px, calc(8 * var(--scale)), calc(8px * var(--max)));
  background: #fff;
  padding: 1em;
  border-radius: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  margin-bottom: 1em;
}
@media (max-width: 767px) {
  .cta__component {
    font-size: clamp(0px, calc(8 * var(--scale02)), calc(8px * var(--max)));
  }
}

.cta__links {
  width: 85%;
  margin: 0 auto;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 3%;
  border-radius: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  margin: 2% auto;
}
.cta__links a {
  width: 30%;
}

/*------------------------------
problem
------------------------------*/
.problem {
  background: #6dc6ce;
  padding: clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max))) 0 clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  position: relative;
}
.problem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 115%);
  background: url(../img/pack/problem-en.png) no-repeat center center/contain;
  width: 44%;
  aspect-ratio: 540/80;
  mix-blend-mode: multiply;
}

.problem__heading {
  font-size: clamp(0px, calc(31 * var(--scale)), calc(31px * var(--max)));
  font-weight: 700;
  letter-spacing: 0.075em;
  color: #fff;
  text-align: center;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 0.3em 0;
  position: relative;
}

.problem__content {
  background: url(../img/pack/problem-bg.webp) no-repeat center center/cover;
  margin-top: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  padding: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) 0 clamp(0px, calc(90 * var(--scale)), calc(90px * var(--max)));
  z-index: 10;
  position: relative;
}

.problem__list {
  padding-left: 5%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max))) 0;
}
.problem__list li {
  font-size: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
  font-weight: 350;
  position: relative;
  padding-left: 2.7em;
}
.problem__list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-70%);
  background: url(../img/pack/icon_check.png) no-repeat center center/contain;
  width: 2.1em;
  aspect-ratio: 92/82;
}

.problem__conclusion {
  margin-top: 12%;
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 400;
  line-height: 1.875;
  text-align: center;
}
.problem__conclusion strong {
  color: #f5a554;
  display: block;
  font-size: clamp(0px, calc(54 * var(--scale)), calc(54px * var(--max)));
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: -0.4em;
}

/*------------------------------
step
------------------------------*/
.step {
  position: relative;
  padding-bottom: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
}
.step::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background: #6dc6ce;
  width: 100%;
  -webkit-clip-path: polygon(0 0%, 100% 41%, 100% 100%, 0 100%);
          clip-path: polygon(0 0%, 100% 41%, 100% 100%, 0 100%);
  width: 100%;
  aspect-ratio: 612/288;
}
.step > * {
  position: relative;
  z-index: 10;
}

.step__header {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 48%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 48%);
  background: #6dc6ce;
  aspect-ratio: 612/200;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max))) 0 clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max)));
  position: relative;
}
.step__header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background: url(../img/pack/step-en.png) no-repeat center center/contain;
  transform: translate(-5%, 35%);
  width: clamp(0px, calc(240 * var(--scale)), calc(240px * var(--max)));
  aspect-ratio: 487/172;
  mix-blend-mode: multiply;
}

.step__heading {
  font-size: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  font-weight: 700;
  color: #fff;
  transform: rotate(10.2deg);
  text-align: right;
  padding-bottom: 0.35em;
  position: relative;
  letter-spacing: 0.05em;
}
.step__heading::after {
  content: "";
  position: absolute;
  background: #f5a554;
  aspect-ratio: 1/1;
  transform: translate(-50%, 0%);
  height: clamp(0px, calc(1 * var(--scale)), calc(1px * var(--max)));
  width: 120%;
  left: 50%;
  bottom: 0%;
}
.step__heading strong {
  font-size: clamp(0px, calc(83 * var(--scale)), calc(83px * var(--max)));
}

.step__content {
  margin-top: calc(clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) * -1);
}

.step__list {
  display: flex;
  flex-direction: column;
  gap: clamp(0px, calc(22 * var(--scale)), calc(22px * var(--max))) 0;
  position: relative;
  z-index: 10;
}

.step__item {
  position: relative;
}
.step__item:last-child .step__item-description::before {
  content: "";
  position: absolute;
  background: #fff;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  filter: blur(12px);
}
.step__item:last-child .step__item-description span {
  position: relative;
  z-index: 10;
}

.step__item-title {
  width: clamp(0px, calc(340 * var(--scale)), calc(340px * var(--max)));
  font-size: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max)));
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #6dc6ce;
  padding: 0 clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max))) 0.2em;
  padding-right: 0;
  background: linear-gradient(transparent 80%, rgba(109, 198, 206, 0.5) 80%);
}
.step__item-title strong {
  display: inline-block;
  font-size: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  color: #787a7d;
  margin-left: 0.9em;
}

.step__item-description {
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 400;
  line-height: 1.3333333333;
  margin-top: 0.9em;
  padding-left: 4.2em;
  position: relative;
}

.step__estimated-time {
  position: absolute;
  top: 0;
  right: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  width: clamp(0px, calc(170 * var(--scale)), calc(170px * var(--max)));
}

.step__item-note {
  display: block;
  font-size: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
}

.step__visual {
  position: relative;
  margin-top: calc(clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max))) * -1);
}

.step__visual-image {
  width: 96%;
  margin: 0 auto;
}

.step__visual-note {
  position: absolute;
  top: 3.5em;
  right: 1.5em;
  font-size: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
  line-height: 2.1333333333;
}

.step__message {
  margin-top: 0.2em;
  font-size: clamp(0px, calc(25 * var(--scale)), calc(25px * var(--max)));
  line-height: 1.45;
  font-weight: 400;
  color: #fff;
  text-align: center;
}
.step__message strong {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-size: clamp(0px, calc(38 * var(--scale)), calc(38px * var(--max)));
  font-weight: 700;
  letter-spacing: 0.1em;
  position: relative;
}
.step__message strong::after {
  content: "";
  position: absolute;
  bottom: 0.1em;
  left: 50%;
  transform: translateX(-50%);
  background: url(../img/pack/img_wave.png) no-repeat center center/contain;
  width: 90%;
  aspect-ratio: 824/17;
}
.step__message strong span {
  position: relative;
  z-index: 10;
}

/*------------------------------
smooth
------------------------------*/
.smooth {
  margin-top: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
}

.smooth__content {
  position: relative;
  margin-top: 6.6%;
  position: relative;
  z-index: 10;
}
.smooth__content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-17%, 15%);
  background: url(../img/pack/smooth-bg.png) no-repeat center center/contain;
  width: clamp(0px, calc(470 * var(--scale)), calc(470px * var(--max)));
  aspect-ratio: 944/936;
  z-index: -1;
}

.smooth__image {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-15.1%, -10%);
  width: 70%;
}

.smooth__body {
  width: clamp(0px, calc(303 * var(--scale)), calc(303px * var(--max)));
  margin-left: auto;
  position: relative;
  z-index: 10;
}
.smooth__body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 15%);
  background: url(../img/pack/smooth-bg.png) no-repeat center center/contain;
  width: clamp(0px, calc(470 * var(--scale)), calc(470px * var(--max)));
  aspect-ratio: 944/936;
  z-index: -1;
  display: none;
}

.smooth__lead {
  font-size: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
  line-height: 1.9;
  letter-spacing: 0.01em;
}
.smooth__lead em {
  background-image: radial-gradient(circle at center, orange 20%, transparent 20%); /* 点の色とサイズ調整 */
  background-position: top left; /* 点の位置 */
  background-repeat: repeat-x; /* 横方向に繰り返し */
  background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
  padding-top: 0.1em; /* 縦方向の位置調整 */
}

.smooth__list {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: clamp(0px, calc(13 * var(--scale)), calc(13px * var(--max))) 0;
  margin: 5% 0 10%;
  padding-left: 4%;
}
.smooth__list li {
  font-size: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  font-weight: 700;
  color: #6dc6ce;
  background: #fff;
  padding: 0.5em 1.4em;
  letter-spacing: 0.075em;
}

.smooth__text {
  display: inline;
  font-size: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  font-weight: 400;
  line-height: 1.9130434783;
  border-bottom: 1px solid #f5a554;
}
.smooth__text strong {
  font-size: clamp(0px, calc(28 * var(--scale)), calc(28px * var(--max)));
  font-weight: 700;
}

/*------------------------------
fit
------------------------------*/
.fit {
  background: rgba(109, 198, 206, 0.15);
  padding: clamp(0px, calc(70 * var(--scale)), calc(70px * var(--max))) 0 clamp(0px, calc(75 * var(--scale)), calc(75px * var(--max)));
  position: relative;
}

.fit__header {
  position: relative;
  z-index: 10;
}

.fit__heading {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: clamp(0px, calc(42 * var(--scale)), calc(42px * var(--max)));
  font-weight: 500;
  line-height: 1.2619047619;
  color: #fff;
  padding: 0.9em 0.7em;
  border-radius: 0 0.5em 0.5em 0;
  background: #6dc6ce;
  position: relative;
}
.fit__heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(5%, -35%);
  background: url(../img/pack/fit-en.png) no-repeat center center/contain;
  width: 4.7em;
  aspect-ratio: 431/163;
}

.fit__product-image {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(0px, calc(343 * var(--scale)), calc(343px * var(--max)));
  transform: translate(1%, 11%);
}

.fit__body {
  margin-top: clamp(0px, calc(65 * var(--scale)), calc(65px * var(--max)));
  position: relative;
}

.fit__lead {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
  font-weight: 400;
  background: rgba(109, 198, 206, 0.35);
  margin-left: 1.5em;
  line-height: 1.6;
  padding: 0.5em 1em;
  position: relative;
}
.fit__lead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-25%, -50%);
  background: url(../img/pack/img-kakko.png) no-repeat center center/contain;
  width: 3.81em;
  aspect-ratio: 165/64;
}
.fit__lead::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(25%, 50%) rotate(180deg);
  background: url(../img/pack/img-kakko.png) no-repeat center center/contain;
  width: 3.81em;
  aspect-ratio: 165/64;
}

.fit__text {
  margin-left: 9%;
  margin-top: 6%;
  font-size: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
  font-weight: 400;
  line-height: 1.7619047619;
}
.fit__text p:nth-child(2) {
  margin-top: 8%;
  line-height: 1.65;
}
.fit__text strong {
  letter-spacing: 0.2em;
  display: inline-block;
  background: linear-gradient(transparent 80%, #fff 80%);
  font-size: clamp(0px, calc(28 * var(--scale)), calc(28px * var(--max)));
  font-weight: 700;
  color: #f5a554;
}

.fit__image {
  position: absolute;
  bottom: clamp(0px, calc(127 * var(--scale)), calc(127px * var(--max)));
  right: 0;
  width: clamp(0px, calc(290 * var(--scale)), calc(290px * var(--max)));
}

/*------------------------------
moisture
------------------------------*/
.moisture {
  padding-top: clamp(0px, calc(74 * var(--scale)), calc(74px * var(--max)));
}

.moisture__heading {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-size: clamp(0px, calc(31 * var(--scale)), calc(31px * var(--max)));
  font-weight: 500;
  line-height: 1.1935483871;
  color: #787a7d;
  border-top: 1px solid #f5a554;
  border-bottom: 1px solid #f5a554;
  padding: 0.6em 0;
  position: relative;
}
.moisture__heading::before {
  content: "";
  position: absolute;
  background: url(../img/pack/moisture01.png) no-repeat center center/100%;
  aspect-ratio: 564/68;
  transform: translate(-50%, -110%);
  width: 70%;
  left: 50%;
  top: 0%;
}

.moisture__lead {
  margin-top: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max)));
  font-size: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
}

.moisture__ingredients {
  display: flex;
  gap: 0 clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  margin: 3% auto 0;
  width: 88%;
}

.moisture__ingredient-name {
  margin-top: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  font-size: clamp(0px, calc(11 * var(--scale)), calc(11px * var(--max)));
  line-height: 1.7272727273;
  font-weight: 400;
  text-align: center;
  letter-spacing: -0.025em;
  width: calc(100% + 1em);
  margin-left: 50%;
  transform: translateX(-50%);
}

.moisture__note {
  margin-top: 3.7%;
  margin-bottom: 0.6em;
  font-size: clamp(0px, calc(8 * var(--scale)), calc(8px * var(--max)));
  font-weight: 400;
  margin-right: -1em;
  text-align: right;
}

.moisture__sheet {
  background: #6dc6ce;
  padding: clamp(0px, calc(35 * var(--scale)), calc(35px * var(--max))) 0;
}

.moisture__sheet-content {
  display: flex;
  justify-content: space-between;
  padding-left: 3%;
}

.moisture__sheet-image {
  width: 42.4%;
}

.moisture__sheet-text {
  font-size: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
  color: #fff;
  font-feature-settings: "halt";
  width: 55%;
  font-weight: 400;
  line-height: 1.8;
}
.moisture__sheet-text strong {
  border-bottom: clamp(0px, calc(2 * var(--scale)), calc(2px * var(--max))) solid #f5a554;
}

/*------------------------------
features
------------------------------*/
.features {
  padding-top: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
}

.features__heading {
  width: clamp(0px, calc(500 * var(--scale)), calc(500px * var(--max)));
  margin: 0 auto;
  font-size: clamp(0px, calc(35 * var(--scale)), calc(35px * var(--max)));
  font-weight: 500;
  color: #fff;
  background: url(../img/pack/features-heading.png) no-repeat center center/cover;
  aspect-ratio: 1003/396;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.features__heading span {
  transform: rotate(-7.7deg);
}

.features__content {
  background: url(../img/pack/features-bg.webp) no-repeat center center/cover;
  padding: 6% 0 14%;
}

.features__point {
  width: clamp(0px, calc(540 * var(--scale)), calc(540px * var(--max)));
  margin: 0 auto;
  display: flex;
  gap: 0 clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
}
.features__point li {
  width: calc(25% - clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max))) * 3 / 4);
  font-size: clamp(0px, calc(28 * var(--scale)), calc(28px * var(--max)));
  font-weight: 500;
  color: #6dc6ce;
  border: 1px solid #6dc6ce;
  text-align: center;
  padding: clamp(0px, calc(25 * var(--scale)), calc(25px * var(--max))) 0 0.6em;
  line-height: 1.2;
}
.features__point li strong {
  font-weight: 700;
}

.features__text {
  margin-top: 2.4em;
  font-size: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
  font-weight: 400;
  line-height: 1.7619047619;
  text-align: center;
}
.features__text strong {
  font-size: clamp(0px, calc(45 * var(--scale)), calc(45px * var(--max)));
  font-weight: 700;
  color: #f5a554;
  text-indent: 0.6em;
  display: block;
}
.features__text ruby {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
}
/*# sourceMappingURL=pack.css.map */