@charset "UTF-8";
/*----- product/(moist|smooth|deep)/milk -----*/
/* ------------------------------------------------
 ミルクページのタイポグラフィ
 Figma（2x）の値を1/2にして適用している。
 このスケールは将来的に全商品詳細ページへ展開する予定のため、
 いまはミルクページ専用のこのファイルに置いて既存ページへ影響させない。
------------------------------------------------ */
#contents {
  /* ----------------------------
   商品名
  ------------------------------*/
}
#contents #main_head > .img {
  position: relative;
}
#contents #main_head > .img .new {
  background-color: #fff;
  -webkit-mask: url(/images/product/common/ico_new.svg) 0 0/contain no-repeat;
          mask: url(/images/product/common/ico_new.svg) 0 0/contain no-repeat;
  width: 18.2666666667%;
  aspect-ratio: 280/230;
  position: absolute;
  left: 4.9333333333%;
  top: 8.3333333333%;
  z-index: 2;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#contents {
  /* ----------------------------
   成分・機能のタグ
  ------------------------------*/
}
#contents .ingredients {
  margin-top: 1.5rem;
}
#contents .ingredients .tags {
  margin-top: 0.4rem;
}
#contents .ingredients .ig + .ig {
  margin-top: 1.5rem;
}
#contents .ingredients .ig h3 {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.025em;
}
#contents {
  /* ----------------------------
   おすすめの使い方（あわせ使い）
  ------------------------------*/
}
#contents #method.howto {
  padding: 5rem 3rem 4.5rem;
}
#contents #method.howto h2 {
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.0543478261em;
  text-align: center;
  margin-bottom: 3rem;
}
#contents #method.howto h2 .small {
  font-size: 0.5652173913em;
  font-weight: 500;
  line-height: 1.54;
  letter-spacing: 0.0961538462em;
  margin-bottom: 0.2692307692em;
  display: block;
}
#contents #method.howto > .img img {
  width: 100%;
  height: auto;
  display: block;
}
#contents #method.howto .steps {
  padding-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.8rem;
}
#contents #method.howto .step {
  width: 100%;
  display: flex;
  align-items: flex-end;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
#contents #method.howto .step .txt {
  flex: 1;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.025em;
}
#contents #method.howto .step .txt strong {
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  margin-bottom: 0.4444444444em;
  display: block;
}
#contents #method.howto .step .txt em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: #BC989A;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
#contents #method.howto .step .item {
  flex: none;
}
#contents #method.howto .step .item img {
  width: auto;
  height: 100%;
  display: block;
}
#contents #method.howto .step.s1 .item {
  height: 6.95rem;
}
#contents #method.howto .step.s2 .item {
  height: 6.05rem;
}
#contents #method.howto .arrow {
  background-color: currentColor;
  -webkit-mask: url(/images/product/common/ico_chevron.svg) center/contain no-repeat;
          mask: url(/images/product/common/ico_chevron.svg) center/contain no-repeat;
  width: 1.5rem;
  aspect-ratio: 30/17;
}

/* ----------------------------
 シリーズ別の色
------------------------------*/
body.color-type2 #contents #method.howto {
  background-color: #DBD8E5;
}
body.color-type2 #contents #method.howto .step .txt em {
  text-decoration-color: #B295A5;
}

body.color-deep #contents #method.howto {
  color: #866d5c;
  background-color: #e5d5bd;
}
body.color-deep #contents #method.howto .step .txt em {
  text-decoration-color: #b0917e;
}