@charset "UTF-8";
/*****************************************************
メディダーマブーストセラムページ
*****************************************************/
#boostserum small{
  font-size: 0.6em;
}
#boostserum .middle{
  font-size: 1.2em;
}
#boostserum .b-yellow{
  font-size: 1.5em;
  color: #FFEF24;
  font-weight: bold;
}

/*============================================================*/
/* 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;
	}
}

/*============================================================*/
/* コンテンツ背景 */
/*============================================================*/
#boostserum .blbg {
  padding-inline: min(5vw, 30px);
  padding-block: min(10vw, 100px);
  background: linear-gradient(90deg, rgb(213, 228, 228) 0%, #BBCEE8 5%, #6592CC 50%, #BBCEE8 95%, rgb(213, 228, 228) 100%);
}
@media screen and (max-width: 767px) {
  #boostserum .blbg {
    background: linear-gradient(90deg, rgb(213, 228, 228) 0%, #BBCEE8 5%, #6592CC 50%, #BBCEE8 95%, rgb(213, 228, 228) 100%);
  }
}
/*============================================================*/
/* 商品詳細 */
/*============================================================*/
#boostserum .detail__main-disc__note--bs{
  margin-top: min(6vw, 10px);
  font-size: clamp(11px, 3vw, 12px);
}
/*============================================================*/
/* 概要 */
/*============================================================*/
#mediderma .desc {
  margin-bottom: min(20vw, 120px);
  /* セラム800 */
  /* セラム1000 */
}
#mediderma .desc__title {
  display: grid;
  justify-items: center;
  color: #FFFFFF;
  margin-bottom: min(10vw, 45px);
  text-align: center;
}
@media screen and (max-width: 767px) {
  #mediderma .desc__title h2 {
    max-width: 80%;
  }
}
@media screen and (max-width: 767px) {
  #mediderma .desc__title h2 {
    max-width: 80%;
  }
}
#mediderma .desc__title--sub {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: min(6vw, 36px);
  margin-bottom: min(3vw, 10px);
}
#mediderma .desc__title--note {
  margin-top: min(6vw, 20px);
  font-size: clamp(11px, 3vw, 12px);
}
#boostserum .serum-wave{
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 40%, rgba(255, 255, 255, 0) 90%), url('../img/title_serum-wave.png');
  background-blend-mode: multiply;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  background-position: center;
  padding-bottom: 160px;
}
#boostserum .desc__title-fig{
  width: 153px;
  margin-inline: auto;
  margin-top: 40px;
}
/*============================================================*/
/* ポイント共通 */
/*============================================================*/
/*============================================================*/
/* ポイント1 */
/*============================================================*/
#mediderma .point01 {
  color: #FFFFFF;
  margin-bottom: min(20vw, 120px);
}
#boostserum .point01__cont01{
  max-width: 885px;
  margin-inline: auto;
  background: transparent linear-gradient(180deg, #edf4fb 0%, #C3DEFB 100%) 0% 0% no-repeat padding-box;
  text-align: center;
  color: #333;
  margin-bottom: min(16vw, 80px);
}
#boostserum .point01__ing01__cont01{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
#boostserum .point01__ing01__cont01--lead{
  width: 50%;
  text-align: center;
}
#boostserum .point01__ing01__cont01--lead ruby{
  color: #073763;
  font-size: 40px;
  font-weight: bold;
  font-family: var(--font-serif);
}
#boostserum .point01__ing01__cont01--lead p{
  width: 260px;
  margin-inline:auto ;
}
#boostserum .point01__ing01__cont01--fig{
  width: 50%;
}
@media screen and (max-width: 860px) {
  #boostserum .point01__ing01__cont01{
    flex-direction: column-reverse;
    margin-bottom: 20px;
    overflow: hidden;
  }
  #boostserum .point01__ing01__cont01--fig{
    width: 50%;
    min-width: 250px;
    margin-top: -23px;
  }
  #boostserum .point01__ing01__cont01--lead{
    width: fit-content;
  }
  
  #toningserum p.point__lead-only {
    align-items: center;
    color: #333333;
    margin-bottom: min(12vw, 70px);
  }
  #toningserum p.point__lead span.middle-only {
    margin-inline: auto;
  }
}
#boostserum .point01__ing01__cont02{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding-inline: 20px;
  margin-bottom: 20px;
}
#boostserum .point01__ing01-item{
  width: calc(50% - 5px);
  min-width: 370px;
  height: 164px;
  background-color: #fff;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 10px;
}
#boostserum .point01__ing01-item__row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#boostserum .point01__ing01-item__row figure{
  max-width: 120px;
  color: #333333;
}
#boostserum .point01__ing01-item__cont{
  margin-left: 10px;
  text-align: left;
  height: fit-content;
}
#boostserum .exosome{
  border-left:solid 8px #5A377C;
}
#boostserum .niacinamide{
  border-left:solid 8px #9B8042;
}
#boostserum .panthenol{
  border-left:solid 8px #EA9999;
}
#boostserum .exosome 
.point01__ing01-item__name{
  color: #5A377C;
}
#boostserum .niacinamide 
.point01__ing01-item__name{
  color: #9B8042;
}
#boostserum .panthenol 
.point01__ing01-item__name{
  color: #EA9999;
}
@media screen and (max-width: 860px) {
  #boostserum .exosome{
    border-left:solid 0px #5A377C;
    border-top:solid 8px #5A377C;
  }
  #boostserum .niacinamide{
    border-left:solid 0px #9B8042;
    border-top:solid 8px #9B8042;
  }
  #boostserum .panthenol{
    border-left:solid 0px #EA9999;
    border-top:solid 8px #EA9999;
  }
  #boostserum .serum-wave{
    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 40%, rgba(255, 255, 255, 0) 90%), url('../img/title_serum-wave_sp.png');
    padding-bottom: 160px;
  }
}
@media screen and (max-width: 500px) {
  #boostserum .serum-wave{
    background-image: none;
  }
  #boostserum .point01__ing01-item{
    width: 100%;
    min-width: 320px;
  }
  #boostserum .point01__ing01-item__row figure {
    max-width: 100px;
  }
  #boostserum .serum-wave{
    padding-bottom: 50px;
  }
}
#boostserum .point01__ing01__cont03{
  display: flex;
  width: 100%;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-inline: 20px;
  margin-bottom: 25px;
}
#boostserum .point01__ing01__cont03 li{
  width: calc((100% - 30px) / 4);
  background-color: #fff;
  color: #9B8042;
  font-family: var(--font-serif);
  height: fit-content;
  font-size: clamp(14px, 3vw, 22px);
  line-height: 1;
  padding-top: 1em;
  padding-bottom: 1em;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
@media screen and (max-width: 860px) {
  #boostserum .point01__ing01__cont03{
    gap: 4px;
  }
  #boostserum .point01__ing01__cont03 li{
    width: calc((100% - 12px) / 4);
  }
  #boostserum .point01__ing01__cont03{
    padding-inline: 10px;
  }
}
#boostserum .point01__ing01--note{
  font-size: 0.8em;
  padding-bottom: 40px;
}
#boostserum .point01__ing01-item__catch{
  font-size: clamp(16px, 1.5vw, 19px);
  color: #5A377C;
}
#boostserum .point01__ing01-item__name{
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(19px, 2.5vw, 24px);
  padding-block: min(1vw, 6px);
  color: #5A377C;
}
#boostserum .point01__cont02--title-bs{
  width: 40%;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 50px;
  font-size: 30px;
  border-bottom: 0px solid;
}
#boostserum .point01__cont02{
  margin: min(20vw, 180px) 0 min(6vw, 80px);
}
#boostserum .point01__cont02--boostserum {
  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;
}
#boostserum  .point01__cont02--boostserum-txt{
  margin-inline: auto;
  position: relative;
  padding-inline: min(12vw, 30px);
  padding-block: 20px;
}
#boostserum  .point01__cont02--boostserum-txt:before {
  left: 0;
  transform: rotate(70deg);
  content: "";
  position: absolute;
  top: 47%;
  display: inline-block;
  width: min(6vw, 30px);
  height: 2px;
  background-color: #fff;
}
#boostserum .point01__cont02--boostserum-txt::after {
  right: 0;
  transform: rotate(-70deg);
  content: "";
  position: absolute;
  top: 47%;
  display: inline-block;
  width: min(6vw, 30px);
  height: 2px;
  background-color: #fff;
}
#boostserum .point01__ing02{
  display: flex;
  width: 100%;
  max-width: 885px;
  margin-inline: auto;
  gap: 50px;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}
#boostserum .point01__ing02 figure:nth-of-type(1){
  width: 55%;
}
#boostserum .point01__ing02 figure:nth-of-type(2){
  width: calc(45% - 50px);
}
#boostserum .point01__ing02--txt{
  text-align: center;
  font-size: 20px;
}

/*============================================================*/
/* ポイント2 */
/*============================================================*/
#mediderma .point02 {
  max-width: 1000px;
  margin-inline: auto;
  margin-bottom: min(20vw, 120px);
}
#boostserum .point02__ing01{
  background-color: #adcbf3;
  box-shadow: inset 0px 0px 300px 0px #FFFFFF;
  padding: 70px 0;
  flex-direction: column;
  display: flex;
  margin-bottom: min(18vw, 40px);
}
#boostserum .point02__ing01 figure{
  width: 32%;
}
#boostserum .point02__ing01 figure img{
  width: 100%;
}
#boostserum .point02__ing01-main{
  display: flex;
  width: 100%;
  max-width: 885px;
  margin-inline: auto;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
#boostserum .point02__ing01-main-txt{
  font-size: 0.8em;
  text-align: center;
}
#boostserum .point02__cont02--title-serum{
  font-size: clamp(24px, 4.4vw, 30px);
  color: #fff;
  font-family: var(--font-serif);
  width: fit-content;
  text-align: center;
  margin-inline: auto;
  border-bottom: #fff solid 2px;
  line-height: 1.5;
  margin-bottom: min(12vw, 30px);
}
#boostserum .point02__cont02--title-serum--fig{
  margin-inline: auto;
  width: fit-content;
  border-bottom: #fff solid 0px;
}
#boostserum .point02__cont02--txt{
  color: #fff;
  text-align: center;
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 2;
  font-weight: bold;
}

@media screen and (max-width: 860px) {
  #boostserum .point01__ing02{
    flex-direction: column;
  }
  #boostserum .point01__ing02 figure:nth-of-type(1){
    width: 100%;
  }
  #boostserum .point01__ing02 figure:nth-of-type(2){
    width: 100%;
  }
  #boostserum .point02__ing01-main{
    flex-direction: column;
  }
  #boostserum .point02__ing01 figure{
    width: 100%;
    max-width: 260px;
  }
  #boostserum .point01__cont02--title-bs{
    width: 80%;
    max-width: 430px;
  }
}