@charset "UTF-8";
/*==================================================
  すこやか素肌 全ページ共通
  01. 変数
  02. 共通レイアウト
  03. 共通パーツ
==================================================*/
/*==================================================
  01. 変数
==================================================*/
:root {
  --color-pink: #eb6d87;
  --color-pink-light: #f9e3ea;
  --color-blue: #6dc7ea;
  --color-yellow-light: #fff7b5;
  --color-pink-deep: #dd5880;
  --color-blue-pale: #e0f3f4;
  --color-brown: #543b31;
  --color-text: #000;
  --color-black: #000;
  --color-white: #fff;
  --color-gray: #ccc;
  --font-rounded: "Zen Maru Gothic", sans-serif;
}
@media screen and (width > 750px) {
  :root {
    --gutter-inline: 30px;
  }
}
@media screen and (width <= 750px) {
  :root {
    --gutter-inline: 16px;
  }
}

/*==================================================
  02. 共通レイアウト
==================================================*/
.swiper {
  overflow: hidden;
  max-width: 100%;
}
.swiper .swiper-wrapper {
  display: flex;
  width: 100%;
}
.swiper .swiper-slide {
  flex-shrink: 0;
  width: 100%;
}
.swiper .swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 2px;
  padding-block: 10px;
}
.swiper .swiper-pagination .swiper-pagination-bullet {
  position: relative;
  background-color: revert;
  aspect-ratio: 1/1;
  width: 20px;
  height: 20px;
  padding: 4px;
}
.swiper .swiper-pagination .swiper-pagination-bullet::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-gray);
  border-radius: 999px;
}
.swiper .swiper-pagination .swiper-pagination-bullet-active::after {
  background-color: var(--color-pink);
}

.product-contents-body {
  container-type: inline-size;
  max-width: 750px;
  margin-inline: auto;
  color: var(--color-text);
  text-align: center;
}
.product-contents-body img {
  max-width: 100%;
  height: auto;
}

.p-brandNavi .p-brandNavi__header {
  background-color: var(--color-pink);
}

.p-brandNavi__close {
  color: var(--color-pink);
}
.p-brandNavi__close::after {
  background-color: var(--color-pink);
}
@media (any-hover: hover) {
  .p-brandNavi__close:hover {
    background-color: var(--color-pink);
  }
}

/*==================================================
  03. 共通パーツ
==================================================*/
@media screen and (width > 750px) {
  .only_sp {
    display: none;
  }
}

.mgt30 {
  margin-block-start: 30px;
}

.mgt40 {
  margin-block-start: 40px;
}

.mgb30 {
  margin-block-end: 30px;
}

.mg50 {
  margin-block: 50px;
}

.t-right {
  text-align: end;
}

.t-remark {
  margin-block: 40px;
  padding-inline-end: var(--gutter-inline);
  color: var(--color-brown);
  line-height: 1.5;
}

/* ===== mv ===== */
.mv {
  padding-block-start: 20px;
}
.mv h1 {
  color: var(--color-pink);
  font-family: var(--font-rounded);
  font-weight: bold;
  line-height: 1.6;
}
.mv .img img {
  width: 100%;
}

/* ===== cnt01 お悩み導入(TOP・化粧水・クリーム・目もとクリーム共通) ===== */
.question-image {
  width: 82.8787878788cqw;
  margin-inline: auto;
}

.banner-swiper .swiper-slide {
  width: 70.1515151515cqw;
  max-width: 463px;
}
.banner-swiper .swiper-slide img {
  width: 100%;
}

.lead-image img {
  width: 100%;
}

.question-image img,
.circle-text img,
.box-slide .arrow img,
.water-drop-icon1 img,
.water-drop img {
  width: 100%;
}

.circle-text {
  width: 83.4848484848cqw;
  margin-inline: auto;
}

/* ===== ポイント見出し(Point1・成分アイコン等) ===== */
.point-img {
  width: 26.5151515152cqw;
  margin-inline: auto;
}
.point-img img {
  width: 100%;
}

/* ===== 3つのうるおい成分カード ===== */
.box-slide {
  padding-block-end: 20px;
}
.box-slide .item_box {
  width: 90.9090909091cqw;
  margin-block-start: 30px;
  margin-inline: auto;
  background-color: var(--color-white);
  border: 5px solid var(--color-blue);
  border-radius: 50px;
}
.box-slide .bg-ttl {
  display: flex;
  justify-content: center;
  margin-block-start: -5px;
  padding: 20px;
  background: url("/sukoyakasuhada/images/common/bg-h3-box-slide.png") repeat top center;
  border-start-start-radius: 42px;
  border-start-end-radius: 42px;
}
.box-slide .bg-ttl h3 {
  color: var(--color-white);
  font-weight: bold;
  line-height: 1.1;
}
.box-slide .item_box-cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -moz-column-gap: 3.0303030303cqw;
       column-gap: 3.0303030303cqw;
  padding-block: 20px;
  padding-inline: 4.5454545455cqw;
  text-align: start;
}
.box-slide .cont-img {
  container-type: inline-size;
  position: relative;
  flex-shrink: 0;
  width: 33.3333333333cqw;
  max-width: 220px;
}
.box-slide .cont-img img {
  width: 100%;
}
.box-slide .arrow {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 34.5454545455cqw;
  translate: -42% -89%;
}

.water-drop-icon1,
.water-drop {
  position: absolute;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
  .water-drop-icon1,
  .water-drop {
    animation: none;
  }
}

.water-drop-icon1 {
  width: 10cqw;
}
.water-drop-icon1.w1 {
  inset-block-start: 35cqw;
  inset-inline-start: 24.5454545455cqw;
  animation-name: waterDropFadeInLeft;
  animation-duration: 1s;
  animation-delay: 0.4s;
}
.water-drop-icon1.w2 {
  inset-block-start: 62.2727272727cqw;
  inset-inline-start: 13.1818181818cqw;
  animation-name: waterDropFadeInLeft;
  animation-duration: 1.2s;
  animation-delay: 0.4s;
}
.water-drop-icon1.w3 {
  inset-block-start: 81.3636363636cqw;
  inset-inline-start: 26.8181818182cqw;
  animation-name: waterDropFadeInLeft;
  animation-duration: 1.1s;
  animation-delay: 0.6s;
}
.water-drop-icon1.w4 {
  inset-block-start: 78.6363636364cqw;
  inset-inline-start: 67.7272727273cqw;
  animation-name: waterDropFadeInRight;
  animation-duration: 1s;
  animation-delay: 0.2s;
}
.water-drop-icon1.w5 {
  inset-block-start: 42.7272727273cqw;
  inset-inline-start: 70.9090909091cqw;
  animation-name: waterDropFadeInRight;
  animation-duration: 1.2s;
  animation-delay: 0.4s;
}
.water-drop-icon1.w6 {
  inset-block-start: 27.7272727273cqw;
  inset-inline-start: 57.2727272727cqw;
  animation-name: waterDropFadeInRight;
  animation-duration: 1.1s;
  animation-delay: 0.6s;
}

.water-drop {
  animation-name: waterDropBounceIn;
}
.water-drop.w1 {
  inset-block-start: 35.9090909091cqw;
  inset-inline-start: 33.1818181818cqw;
  width: 10cqw;
  animation-duration: 2s;
  animation-delay: 0.4s;
}
.water-drop.w3 {
  inset-block-start: 54.5454545455cqw;
  inset-inline-start: 11.8181818182cqw;
  width: 10.9090909091cqw;
  animation-duration: 2.2s;
  animation-delay: 0.6s;
}
.water-drop.w4 {
  inset-block-start: 83.6363636364cqw;
  inset-inline-start: 29.0909090909cqw;
  width: 10.4545454545cqw;
  animation-duration: 2s;
  animation-delay: 0.2s;
}
.water-drop.w7 {
  inset-block-start: 84.0909090909cqw;
  inset-inline-start: 60.9090909091cqw;
  width: 8.6363636364cqw;
  animation-duration: 2.3s;
  animation-delay: 0.2s;
}
.water-drop.w9 {
  inset-block-start: 53.6363636364cqw;
  inset-inline-start: 73.6363636364cqw;
  width: 10.4545454545cqw;
  animation-duration: 2.4s;
  animation-delay: 0.6s;
}
.water-drop.w10 {
  inset-block-start: 38.1818181818cqw;
  inset-inline-start: 56.3636363636cqw;
  width: 9.0909090909cqw;
  animation-duration: 2.2s;
  animation-delay: 0.2s;
}

@keyframes waterDropFadeInLeft {
  0% {
    opacity: 0;
    translate: -20px;
  }
  100% {
    opacity: 1;
    translate: none;
  }
}
@keyframes waterDropFadeInRight {
  0% {
    opacity: 0;
    translate: 20px;
  }
  100% {
    opacity: 1;
    translate: none;
  }
}
@keyframes waterDropBounceIn {
  0% {
    opacity: 0;
    scale: 0.3;
  }
  50% {
    opacity: 1;
    scale: 1.05;
  }
  70% {
    scale: 0.9;
  }
  100% {
    scale: 1;
  }
}
/* ===== 詳細ボタン ===== */
.btn-pink {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-block-start: 20px;
  margin-inline: auto;
  padding-block: 4px;
  padding-inline: 24px;
  color: var(--color-white);
  font-family: var(--font-rounded);
  font-weight: bold;
  line-height: 1.7;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-pink);
  border-radius: 999px;
}
@media screen and (width > 750px) {
  .btn-pink {
    max-width: 310px;
  }
}
@media screen and (width <= 750px) {
  .btn-pink {
    max-width: 79.4871794872cqw;
  }
}
.btn-pink::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 24px;
  width: 8px;
  height: 9px;
  margin-block: auto;
  background-color: var(--color-white);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  transition: translate 0.3s;
}
@media (any-hover: hover) {
  .btn-pink:hover::after {
    translate: 4px;
  }
}

/* ===== 口コミ ===== */
.review-wrap {
  margin-block-start: 20px;
  text-align: start;
}

/* ===== カート ===== */
.p-product__cart {
  text-align: start;
}

/*==================================================
  04. テキスト化パーツ(画像テキストをデバイステキストにした箇所)
  Figma は SP デザイン(幅390px)のみ。文字サイズはレスポンシブ変数(--font-size-setXX)を使い、
  cqw にしない(画像・装飾だけ cqw / cqw-sp で追従させる)
==================================================*/
.zigzag-underline {
  background: url("/sukoyakasuhada/assets/images/common/underline-zigzag.svg") repeat-x left top 1.34em/auto 3px;
}

.point-heading.point-heading--decorationYellow, .point-heading.point-heading--decorationBlue, .question-title {
  --heading-decoration-gap: 24px;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media screen and (width > 750px) {
  .point-heading.point-heading--decorationYellow, .point-heading.point-heading--decorationBlue, .question-title {
    --heading-decoration-width: 32px;
  }
}
@media screen and (width <= 750px) {
  .point-heading.point-heading--decorationYellow, .point-heading.point-heading--decorationBlue, .question-title {
    --heading-decoration-width: 24px;
  }
}
.point-heading.point-heading--decorationYellow::before, .point-heading.point-heading--decorationBlue::before, .question-title::before, .point-heading.point-heading--decorationYellow::after, .point-heading.point-heading--decorationBlue::after, .question-title::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  width: var(--heading-decoration-width);
  aspect-ratio: 44/146;
  translate: 0 -50%;
  background: var(--heading-decoration-image) no-repeat center/100% auto;
}
.point-heading.point-heading--decorationYellow::before, .point-heading.point-heading--decorationBlue::before, .question-title::before {
  inset-inline-start: max(-1 * (var(--heading-decoration-gap) + var(--heading-decoration-width)), 50% - 50cqw + 5px);
}
.point-heading.point-heading--decorationYellow::after, .point-heading.point-heading--decorationBlue::after, .question-title::after {
  inset-inline-end: max(-1 * (var(--heading-decoration-gap) + var(--heading-decoration-width)), 50% - 50cqw + 5px);
  scale: -1 1;
}

/* ===== mv 製品名・価格(製品ページ。写真の下にテキストで置く) ===== */
.mv__caption {
  display: grid;
  row-gap: 8px;
  color: var(--color-brown);
  font-family: var(--font-rounded);
  font-weight: bold;
}
@media screen and (width > 750px) {
  .mv__caption {
    padding-block-start: 24px;
  }
}
@media screen and (width <= 750px) {
  .mv__caption {
    padding-block-start: 16px;
  }
}

.mv .mv__name {
  color: var(--color-brown);
  line-height: 1.2;
}

.mv__price {
  line-height: 1.3;
}

/* ===== お悩み導入(TOP・化粧水・クリーム・目もとクリーム共通) ===== */
.question-title {
  --heading-decoration-gap: 18px;
  --heading-decoration-image: url("/sukoyakasuhada/assets/images/common/heading-decoration-yellow.png");
  margin-block: 20px;
  padding-block: 10px;
  color: var(--color-brown);
  font-family: var(--font-rounded);
  font-weight: bold;
  line-height: 1.6;
}

.question-title__emphasis {
  font-size: var(--font-size-set28);
  line-height: 1.4;
}

.worry-list {
  display: grid;
  grid-template-columns: repeat(6, 4.233em);
  grid-template-rows: 2.733em 5.8em;
  justify-content: center;
  margin-block-start: 40px;
  color: var(--color-brown);
  font-family: var(--font-rounded);
  font-weight: bold;
  line-height: 1.8;
}
@media screen and (width > 750px) {
  .worry-list {
    font-size: var(--font-size-26);
  }
}
@media screen and (width <= 750px) {
  .worry-list {
    font-size: var(--font-size-set15);
  }
}

.worry-list__item {
  display: grid;
  place-content: center;
  justify-self: center;
  width: 5.8em;
  aspect-ratio: 1/1;
  background-color: color-mix(in srgb, var(--color-pink-deep) 28%, transparent);
  border-radius: 50%;
}
.worry-list__item:nth-child(1) {
  grid-area: 1/1/2/3;
}
.worry-list__item:nth-child(2) {
  grid-area: 1/3/2/5;
}
.worry-list__item:nth-child(3) {
  grid-area: 1/5/2/7;
}
.worry-list__item:nth-child(4) {
  grid-area: 2/2/3/4;
}
.worry-list__item:nth-child(5) {
  grid-area: 2/4/3/6;
}

.worry-list__note {
  display: block;
  font-size: var(--font-size-set12);
  font-weight: bold;
  line-height: 1;
  text-align: end;
}

.lead-text {
  position: relative;
  margin-block-start: 40px;
  padding-block: 24px;
  background-color: var(--color-blue-pale);
  font-family: var(--font-rounded);
  font-weight: bold;
  line-height: 1.8;
}
@media screen and (width > 750px) {
  .lead-text {
    padding-inline: 16px;
    font-size: var(--font-size-24);
  }
}
@media screen and (width <= 750px) {
  .lead-text {
    padding-inline: 40px;
    font-size: var(--font-size-set15);
  }
}
.lead-text::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 16px;
  translate: 0 -50%;
  background: url("/sukoyakasuhada/assets/images/common/wave-line.svg") repeat-x center/auto 100%;
}

.lead-text__emphasis {
  color: var(--color-pink);
  font-size: 1.45em;
  line-height: 1.5;
}
.lead-text__emphasis.lead-text__emphasis--colorBlue {
  color: var(--color-blue);
}

/* ===== Point バッジ(旧 cnt03-h2.png / cnt04-h2.png) ===== */
.point-badge {
  display: grid;
  justify-items: center;
  align-content: start;
  width: 26.5151515152cqw;
  max-width: 175px;
  aspect-ratio: 104/120;
  margin-inline: auto;
  padding-block-start: min(7.4358974359cqw, 49.3px);
  background: url("/sukoyakasuhada/assets/images/index/point-badge.svg") no-repeat center/contain;
  color: var(--color-white);
  font-family: var(--font-rounded);
  font-weight: bold;
  line-height: 1;
}

.point-badge__label {
  font-size: min(5.641025641cqw, 37.4px);
}

.point-badge__number {
  margin-block-start: max(-1.2820512821cqw, -8.5px);
  font-size: min(12.8205128205cqw, 84.9px);
}

/* ===== セクション見出し(Point1 / Point2 / 成分 / 使い方) ===== */
.point-heading {
  color: var(--color-brown);
  font-family: var(--font-rounded);
  font-weight: bold;
  line-height: 1.6;
  -webkit-text-stroke: 6px var(--color-white);
  paint-order: stroke fill;
}
.point-heading.point-heading--large {
  line-height: 1.4;
}
.point-heading.point-heading--decorationYellow {
  --heading-decoration-image: url("/sukoyakasuhada/assets/images/common/heading-decoration-yellow.png");
}
.point-heading.point-heading--decorationBlue {
  --heading-decoration-image: url("/sukoyakasuhada/assets/images/common/heading-decoration-blue.png");
}

.point-heading__emphasis {
  font-size: var(--font-size-set28);
  line-height: 1.4;
}

/* ===== 吹き出し(黄色 / ピンクの角丸枠。下向きの三角は擬似要素) ===== */
.speech-bubble {
  position: relative;
  width: 75.7575757576cqw;
  margin-inline: auto;
  padding-block: 8px;
  border-radius: 10px;
  color: var(--color-brown);
  font-family: var(--font-rounded);
  font-weight: bold;
  line-height: 1.6;
}
.speech-bubble::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  width: 24px;
  height: 9px;
  translate: -50% 99.8%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.speech-bubble.speech-bubble--bgYellow {
  background-color: var(--color-yellow-light);
}
.speech-bubble.speech-bubble--bgYellow::after {
  background-color: var(--color-yellow-light);
}
.speech-bubble.speech-bubble--bgYellow .speech-bubble__emphasis {
  color: var(--color-blue);
}
.speech-bubble.speech-bubble--bgPink {
  background-color: var(--color-pink-light);
}
.speech-bubble.speech-bubble--bgPink::after {
  background-color: var(--color-pink-light);
}
.speech-bubble.speech-bubble--bgPink .speech-bubble__emphasis {
  color: var(--color-pink);
}
.speech-bubble .speech-bubble__emphasis.speech-bubble__emphasis--colorPink {
  color: var(--color-pink);
}

.speech-bubble > p {
  line-height: 1.6;
}

.speech-bubble__number {
  font-size: var(--font-size-set34);
  line-height: 1.3;
}

.speech-bubble__large {
  font-size: var(--font-size-set28);
  line-height: 1.4;
}

/* ===== 無色素・無香料・無鉱物油・ノンパラベン(旧 cnt02_img06.png / cnt04-img05.png) ===== */
.feature-list {
  display: grid;
  grid-template-columns: repeat(4, 5em);
  justify-content: center;
  -moz-column-gap: 0.25em;
       column-gap: 0.25em;
  color: var(--color-pink);
  font-family: var(--font-rounded);
  font-weight: bold;
  line-height: 1.1;
}
@media screen and (width > 750px) {
  .feature-list {
    font-size: var(--font-size-28);
  }
}
@media screen and (width <= 750px) {
  .feature-list {
    font-size: var(--font-size-set16);
  }
}

.feature-list__item {
  display: grid;
  place-content: center;
  aspect-ratio: 1/1;
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: 3px 3px 4px color-mix(in srgb, var(--color-black) 15%, transparent);
}

/* ===== 「シリーズ」「製品一覧」の見出し(旧 cnt04_img01.png / cnt05-img-h2.png) ===== */
.section-title {
  display: grid;
  justify-items: center;
  color: var(--color-brown);
  font-family: var(--font-rounded);
  font-weight: bold;
  line-height: 1.4;
}

.section-title__logo {
  width: 127px;
}
.section-title__logo img {
  width: 100%;
}

.section-title__text {
  position: relative;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.3em;
}

.section-title__decoration {
  position: absolute;
  inset-block-start: 0;
}
.section-title__decoration img {
  width: 100%;
}
.section-title__decoration.section-title__decoration--characterPink {
  inset-inline-start: calc(50% - 4.69em);
  width: 2em;
  rotate: -6.4deg;
}
.section-title__decoration.section-title__decoration--characterBlue {
  inset-block-start: 0.17em;
  inset-inline-start: calc(50% + 2.6em);
  width: 2.08em;
  rotate: 7.23deg;
}
.section-title__decoration.section-title__decoration--characterBlueWave {
  inset-block-start: 0.18em;
  inset-inline-start: calc(50% + 2.63em);
  width: 2.08em;
  rotate: 5.13deg;
}
.section-title__decoration.section-title__decoration--starLeftSmall {
  inset-block-start: -0.08em;
  inset-inline-start: calc(50% - 4.94em);
  width: 0.31em;
}
.section-title__decoration.section-title__decoration--starLeftLarge {
  inset-block-start: 0.25em;
  inset-inline-start: calc(50% - 5.57em);
  width: 0.65em;
  scale: -1 1;
}
.section-title__decoration.section-title__decoration--starRight {
  inset-block-start: -0.03em;
  inset-inline-start: calc(50% + 4.71em);
  width: 0.82em;
  rotate: 13deg;
}

/* ===== シリーズの製品名・価格(旧 cnt04_img03.png 等) ===== */
.series-name {
  position: relative;
  isolation: isolate;
  color: var(--color-brown);
  font-family: var(--font-rounded);
  font-weight: bold;
}
.series-name::before, .series-name::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: 0;
  width: 36px;
  height: 48px;
  background-image: url("/sukoyakasuhada/assets/images/common/star.svg"), url("/sukoyakasuhada/assets/images/common/star.svg");
  background-repeat: no-repeat;
}
.series-name::before {
  inset-inline-start: 10px;
  background-position: 18px 9px, 0 18px;
  background-size: 8px 14px, 18px 29px;
}
.series-name::after {
  inset-inline-end: 3px;
  inset-block-start: 24px;
  background-position: 18px 9px, 0 18px;
  background-size: 8px 14px, 18px 29px;
}

.series-name__title {
  line-height: 1.5;
}

.series-name__brand {
  color: var(--color-pink);
}

.series-name__price {
  line-height: 1.6;
}

.series-name__tax {
  line-height: 1.8;
}
/*# sourceMappingURL=style.css.map */