@charset "UTF-8";
/*****************************************************
メディダーマシートマスクページ
*****************************************************/
#sheetmask .or-ul {
  background: linear-gradient(transparent 60%, rgba(248, 153, 29, 0.36) 60%);
}
#sheetmask .slash {
    width: fit-content;
    margin: 0 auto;
    position: relative;
    padding: 0 10px;
}
#sheetmask .slash::before,
#sheetmask .slash::after {
    content: "";
    width: 1px;
    height: 110%;
    background-color: #4C565F;
    position: absolute;
}
#sheetmask .slash::before {
    transform: rotate(-24deg);
    left: 0;
    bottom: 0;
    transform-origin: bottom right;
}
#sheetmask .slash::after {
    transform: rotate(24deg);
    right: 0;
    bottom: 0;
    transform-origin: bottom left;
}
/*============================================================*/
/* kv */
/*============================================================*/
.kv {
  max-width: 2400px;
	width: 100%;
	margin: auto;
  position: relative;
  overflow: hidden;
}
.kv img {
  width: 100%;
  height: auto;
}
@media print, screen and (max-width: 767px) {
	.kv {
		min-width: auto;
	}
}

/*============================================================*/
/* コンテンツ背景 */
/*============================================================*/
#sheetmask .blbg {
  padding-inline: min(5vw, 30px);
  padding-block: min(10vw, 100px);
  background: linear-gradient(90deg, #F6E9FF 0%, #D6AEE3 25%, #AB8CD7 50%, #DFBBEB 75%, #F6E9FF 100%);
background-blend-mode: multiply;
mix-blend-mode: multiply;
}
@media screen and (max-width: 767px) {
  #sheetmask .blbg {
    background: linear-gradient(90deg, #F6E9FF -7%, #D4ACE4 6%, #B48FE6 53%, #D4ACE4 97%, #F6E9FF 109%);;
  }
}

/*============================================================*/
/* 商品詳細 */
/*============================================================*/

#sheetmask .detail__item {
  background-color: #e7d4f5;
  grid-template-areas: "detail__fig detail__title" "detail__fig detail__main" "detail__special detail__special" "detail__btns detail__btns";
}
#sheetmask .detail__special {
  grid-area: detail__special;
  border-radius: 7px;
  border: 1px solid #F8991D;
  background: rgba(255, 255, 255, 0.76);
  max-width: 754px;
  margin-top: min(14vw, 80px);
  margin-inline: auto;
  padding: min(5.8vw, 32px) min(3.6vw, 24px);
}
#sheetmask .detail__special--grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: min(4.8vw, 16px);
  justify-items: center;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  #sheetmask .detail__special--grid {
    grid-template-columns: auto;
  }
}
#sheetmask .detail__special--copy {
  order: 1;
  font-size: min(3.8vw, 21px);
  font-weight: 700;
}
#sheetmask .detail__special--item {
  order: 3;
}
#sheetmask .detail__special--itemname {
  font-size: min(3.2vw, 18px);
  margin-bottom: min(2.4vw, 10px);
  font-weight: 700;
}
#sheetmask .detail__special--itemspec {
  font-size: min(3.4vw, 14px);
  margin-bottom: min(3.8vw, 24px);
}
#sheetmask .detail__special--img {
  grid-row: span 2;
  place-items: center;
  order: 2;
}
#sheetmask .detail__special a {
  display: block;
  max-width: 350px;
}
#sheetmask .detail__special a img {
    background-color: #FFF;
    max-width: 100%;
    height: auto;
}

#sheetmask .detail__btns {
  row-gap: min(10vw, 44px);
}
#sheetmask .detail__btns--card {
  display: grid;
  row-gap: min(4.8vw, 20px);
  grid-template-rows: subgrid;
  grid-row: span 2;
}
#sheetmask .detail__btns--item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: min(4.8vw, 20px);
  align-items: center;
}
#sheetmask .detail__btns--itemname {
  font-weight: 700;
}
#sheetmask .detail__btns--itemname span {
  font-weight: 400;
}
#sheetmask .detail__btns--btnblock {
  display: grid;
  row-gap: min(2.6vw, 10px);
}

/*============================================================*/
/* 概要 */
/*============================================================*/

#sheetmask .desc {
  margin-bottom: min(20vw, 120px);
  background: url(../img/catch_bg.webp) no-repeat center center/cover;
}
#sheetmask .desc__title {
  display: grid;
  justify-items: center;
  color: #FFFFFF;
  margin-bottom: min(10vw, 45px);
  text-align: center;
}
@media screen and (max-width: 767px) {
  #sheetmask .desc__title h2 {
    max-width: 80%;
  }
}
#sheetmask .desc__title--sub {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: min(6vw, 36px);
  margin-bottom: min(3vw, 10px);
}
#sheetmask .desc__title--note {
  margin-top: min(6vw, 20px);
  font-size: clamp(11px, 3vw, 12px);
}

#sheetmask .desc__title-fig .grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-items: center;
  column-gap: min(6vw, 25px);
  margin-top: min(6vw, 25px);
  align-items: end;
}

/*============================================================*/
/* ポイント1 */
/*============================================================*/
#sheetmask .point01 {
  color: #FFFFFF;
  margin-bottom: min(20vw, 120px);
}

#sheetmask .point__lead b{
  font-size: 1.3em;
  color: #FFEF24;
} 
#sheetmask .point__lead span{
  color: #FFEF24;
  font-size: 50%;
  vertical-align: 76%
} 

/*----------point1--cont01----------------------*/
#sheetmask .point01__cont01 {
  text-align: center;
  margin-bottom: min(16vw, 80px);
}
#sheetmask .point01__ing01__cont01{
  display: grid;
  grid-template-columns: auto auto;
  column-gap: min(10vw, 42px);
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
}
#sheetmask .point01__ing01__cont01--lead{
  order: 2;
  font-size: clamp(16px, 4vw, 22px);
  color: #fff;
  font-weight: 700;
  text-align: left;
}
#sheetmask .point01__ing01__cont01--fig{
  order: 1;
}

@media screen and (max-width: 860px) {
  #sheetmask .point01__ing01__cont01{
    grid-template-columns: auto;
    row-gap: min(7.2vw, 30px);
  }
}
/*----------point1--liftcream   cont01------END----------*/


/*----------point1--liftcream   cont02-------------------*/


#sheetmask .point01__cont02{
  margin: min(20vw, 180px) 0 min(6vw, 80px);
}
#sheetmask .point01__cont02--lifttitle {
  text-align: center;
  color: #FFFFFF;
  font-size: clamp(18px, 4.4vw, 27px);
  font-family: var(--font-serif);
  font-weight: 700;
  margin-bottom: min(12vw, 30px);
  display: grid;
  justify-content: center;
}


#sheetmask .point01__cont02--lifttitle h4 {
  font-size: clamp(22px, 4.4vw, 32px);
  padding-inline: min(5vw, 23px);
  padding-block: min(2.6vw, 20px);
  border: 2px solid #fff;
}
#sheetmask .point01__cont02--lifttext {
  max-width: 804px;
  margin: 0 auto min(7.7vw, 32px);
  font-size: min(4.3vw, 20px);
}
#sheetmask .point01__cont02 figure{
  text-align: center;
  margin-bottom: min(9.6vw, 40px);
}

/*----------point1--liftcream   cont02------END----------*/
/*----------point1--liftcream   cont03-------------------*/


#sheetmask .point01__cont03{
  max-width: 960px;
  margin-inline: auto;
  background-color: #dad4f5;
  box-shadow: inset 0px 0px 300px 0px #FFFFFF;
  padding-inline: min(6vw, 60px);
  padding-block: min(10vw, 60px);
  text-align: center;
  color: #333;
}

#sheetmask .cont03__demo1{
  max-width: 580px;
  margin: 0 auto;
}
#sheetmask .cont03__demo1--item img{
  margin-bottom: min(4.8vw, 20px);
}
#sheetmask .point01__demo--text b{
  font-size: min(4.6vw, 22px);
  color: #333;
  letter-spacing: -0.05em;
  margin-left: 0.2em;
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-decoration-color: #FFEF24; /* 線の色 */
  text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}
#sheetmask .point01__demo--text{
  color: #9B8042;
  font-size: 16px;
  font-weight: 700;
  padding: min(2.4vw, 10px) min(6vw, 15px);
  background-color: #FFFFFF;
  border: 1px solid #C4B5A2;
  box-shadow: 0px 0px 3px 0px rgb(195, 180, 161);
  margin-bottom: min(4.8vw, 20px);
}
#sheetmask .point01__demo--note{
  text-align: left;
  max-width: 580px;
  margin-inline: auto;
  font-size: 0.8em;
}

/*----------point1--liftcream   cont03------END----------*/

/*============================================================*/
/* ポイント2 */
/*============================================================*/
#sheetmask .point02 {
  max-width: 1000px;
  margin-inline: auto;
  margin-bottom: min(10vw, 64px);
}
#sheetmask .point02__cont01 {
  margin-bottom: min(43vw, 180px);
}
@media screen and (max-width: 960px) {
  #sheetmask .point02__ing01 {
    max-width: 560px;
    margin-inline: auto;
  }
}
#sheetmask .point02__ing01-item {
    background-color: #FFFFFF;
    padding-block: min(6vw, 25px);
    padding-inline: min(3vw, 25px);
    display: grid;
    grid-template-columns: 4fr 4fr;
    align-items: center;
    -moz-column-gap: min(6vw, 20px);
         column-gap: min(6vw, 20px);
    max-width: 580px;
    margin-inline: auto;
    margin-bottom: min(18vw, 40px);
}
@media screen and (max-width: 960px) {
  #sheetmask .point02__ing01-item {
    margin-bottom: min(6vw, 20px);
  }
}
@media screen and (max-width: 767px) {
  #sheetmask .point02__ing01-item {
    grid-template-columns: 1fr 2fr;
  }
}
#sheetmask .pdrn.point02__ing01-item {
  border-left: 8px solid #C45B4B;
  background: linear-gradient(134deg, #FFF 0.77%, #F8C6C3 90.88%);
}
@media screen and (max-width: 960px) {
  #sheetmask .pdrn.point02__ing01-item {
    border-left: none;
    border-top: min(1.5vw, 8px) solid #C45B4B;
  }
}
#sheetmask .point02__ing01-item__cont {
  font-weight: 700;
}
#sheetmask .point02__ing01-item__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(26px, 4.6vw, 30px);
  padding-block: min(1vw, 6px);
}
#sheetmask .pdrn .point02__ing01-item__name {
  color: #C45B4B;
}
#sheetmask .point02__ing01-item__name small {
  font-size: 40%;
}


#sheetmask .point02__x {
  text-align: center;
  margin-bottom: min(18vw, 40px);
}
@media screen and (max-width: 767px) {
  #sheetmask .point02__x {
    max-width: 20%;
    margin-inline: auto;
  }
}


#sheetmask .point02__ing02 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: min(5vw, 35px);
       column-gap: min(5vw, 35px);
  margin-bottom: min(18vw, 40px);
}
@media screen and (max-width: 960px) {
  #sheetmask .point02__ing02 {
    max-width: 560px;
    margin-inline: auto;
    grid-template-columns: 1fr;
    row-gap: min(5vw, 25px);
  }
}
#sheetmask .point02__ing02-item {
  background-color: #FFFFFF;
  padding-block: min(6vw, 25px);
  padding-inline: min(3vw, 20px);
  display: grid;
}
#sheetmask .niacinamide.point02__ing02-item {
  border-left: 8px solid #37417C;
}

@media screen and (max-width: 960px) {
  #sheetmask .niacinamide.point02__ing02-item {
    border-left: none;
    border-top: min(1.5vw, 8px) solid #37417C;
  }
}

#sheetmask .retinol.point02__ing02-item {
  border-left: 8px solid #9B8042;
}
@media screen and (max-width: 960px) {
  #sheetmask .retinol.point02__ing02-item {
    border-left: none;
    border-top: min(1.5vw, 8px) solid #9B8042;
  }
}
#sheetmask .point02__ing02-item__row {
  display: grid;
  grid-template-columns: 3fr 4.5fr;
  align-items: center;
  -moz-column-gap: min(4vw, 10px);
  column-gap: min(4vw, 10px);
  max-width: 420px;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  #sheetmask .point02__ing02-item__row {
    grid-template-columns: 1fr 1.6fr;
  }
}
#sheetmask .point02__ing02-item__cont {
  font-weight: 700;
}

#sheetmask .point02__ing02-item__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(26px, 4.8vw, 30px);
  padding-block: min(1vw, 6px);
}
#sheetmask .retinol .point02__ing02-item__name {
  color: #9B8042;
}
#sheetmask .niacinamide .point02__ing02-item__name {
  color: #1E7296;
}
#sheetmask .point02__ing02-item__name small {
  font-size: 60%;
}

#sheetmask .point02__list {
  display: grid;
  gap: min(3vw, 12px);
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 960px) {
  #sheetmask .point02__list {
    max-width: 560px;
    margin-inline: auto;
    grid-template-columns: repeat(2, 1fr);
  }
}
#sheetmask .point02__list li {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(16px, 4vw, 18px);
  background-color: #FFFFFF;
  padding-block: min(6vw, 30px);
  padding-inline: min(2vw, 10px);
  display: grid;
  place-items: center;
  align-items: center;
}
#sheetmask .point02__list li small {
  font-size: 50%;
}
#sheetmask .point02__note {
  color: #fff;
  text-align: center;
  font-size: clamp(11px, 3.6vw, 12px);
  margin-top: min(6vw, 30px);
}
@media screen and (max-width: 960px) {
  #sheetmask .point02__note {
    text-align: left;
  }
}


#sheetmask .point02__cont02--title {
  text-align: center;
  margin-bottom: min(5.8vw, 24px);
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 700;
  text-align: center;
}
#sheetmask .point02__cont02--title .slash {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0 2em 0 3em;
}
#sheetmask .point02__cont02--title .slash::before, 
#sheetmask .point02__cont02--title .slash::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 2px;
    height: min(14.5vw, 60px);
    background: rgba(255, 255, 255, 0.7);
}
#sheetmask .point02__cont02--title .slash::before {
    transform: rotate(-30deg);
    left: 0;
}
#sheetmask .point02__cont02--title .slash::after {
    transform: rotate(30deg);
    right: 0;
}
#sheetmask .point02__cont02--title h4 {
  font-size: clamp(24px, 5vw, 32px);
  border-bottom: 1px solid #fff;
  margin-bottom: .3em;
}
#sheetmask .point02__cont02--title p {
  font-size: clamp(18px, 4vw, 24px);
}
#sheetmask .point02__graph--whbox {
  max-width: 800px;
  background-color: rgba(255, 255, 255, 0.6);
  padding: min(8.7vw, 60px) min(6vw, 20px) min(7.2vw, 40px);
  margin: 0 auto;
}
#sheetmask .point02__graph--item {
  max-width: 580px;
  margin: 0 auto;
}
#sheetmask .point02__graph--item figure {
  text-align: center;
  margin-bottom: min(6vw, 30px);
}
#sheetmask .point02__graph--note {
  font-size: clamp(11px, 3.6vw, 12px);
}
#sheetmask .point02__graph--note .text-right {
  display: block;
  text-align: right;
}

/*============================================================*/
/* コラム */
/*============================================================*/
#sheetmask .column__box-trouble--list li::before {
  background: url(../../img/common/check_ppl.webp) no-repeat center center;
}
#sheetmask .column__box-trouble--title span::after {
  background-color: #60489C;
}