@charset "utf-8";
body{
color: #222234;
	
}
img {
  width: 100%;
}
.text {
   display: inline-block;
}
.introduction,.formulation,.how_to_use,.mccc_recommend{
max-width: 960px;
margin: 90px auto 50px	
}
.hero_area_centella_creaming_toner{
	margin-top: 150px;
}
.hero_area_caption h2 {
    font-family: 'Lato', sans-serif;
    font-size: 46px;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 1.2;
    margin: 0 0 30px;
    text-align: center;
    color: #888C98;
}

.introduction  {
  text-align: center;
}
.introduction h2 {
  font-size: 2.8rem;
  color: #666b77bf;
  font-weight: 300;
  letter-spacing: 0.025rem;
  position: relative;
  line-height: 2.8rem;	 
}
.introduction h3 {
 font-size: 1.3rem;
 letter-spacing: 0.1rem;	
  line-height: 2.2rem;	
 font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 font-weight: 300;
 color: #172447;
}
.introduction h3 .toner{
  font-size: 1.7rem;
  font-weight: 400;
  color: #2a3e73;
}
.introduction_lead_pc  {
  display: block;
  font-size: 1rem;
  line-height: 1.6rem;
  font-weight: 400;
  padding: 20px 0;
  letter-spacing: 0.15rem;
  color: #1f2433bf;
}
.introduction_lead_sp{
 display: none;
}

.skincare{
	max-width: 600px;
	margin: clamp(10px, 10vw, 60px) auto clamp(60px, 10vw, 120px);
}


section.features{
 background-color: #e9effb;	
 background-color: #e9effb47;
 width: 100%;
}
.features_title{
 width: 100%;
 background-color: #ffffff;
 padding-bottom: clamp(10px,5vw,20px);
}
.key_point{
  font-size: 1rem;
  color: #393f4e;
  font-weight: 300;
  letter-spacing: 0.025rem;
  position: relative;
  line-height: 2.8rem;		
  border-bottom: 1px solid #4a4563;
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	
  max-width: clamp(700px,60vw,800px);
  margin: 0 auto;
} 
.key_point h2{
 font-size: 1.8rem;
 font-weight: 100;

}
.key_point h4{
 font-size: 1.4rem;	
 color: #52555ebf;	
 color: #393f4e;	
}

.point01,.point02{ 
 padding: 50px 0;
}

.point01 p {
 font-size:1.08rem;
 line-height: 1.6rem;
 padding: 10px 1vw;
 letter-spacing: 0.1rem;
 max-width: clamp(700px,60vw,800px);	
 margin: 0 auto;	
}
.multi_point ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: clamp(700px, 58vw, 800px);
  margin: 0 auto ;
  gap: clamp(3px, 0.5vw, 10px);
  padding: clamp(10px,2vw,30px) 0;
}
.multi_point ul li {
  display: flex;
  flex-direction: column;
}


.point02 ul{
 list-style: none;
 padding-bottom: 20px;
}
.indegredients{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: clamp(30px,7vw,70px) auto  0; 
  gap: clamp(3px, 0.5vw, 6px);
  width: clamp(650px,50vw,720px);	
}
.indegredients ul li{
  text-align: justify;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.1rem;
   margin: 0 auto;
  width: clamp(210px, 28vw, 260px);
}

.indegredients ul li:nth-child(2){
  font-size: 1.2rem;
  letter-spacing: 0.05rem;
  font-weight: 400;
  text-align: center;
  line-height: 2rem;
  padding-bottom: 10px;
 flex-wrap: wrap;	
} 
.indegredients ul li:nth-child(3){
 line-height: 1.4rem;
 padding: 0 clamp(0px, 1vw, 13px) 1vh;
}
.indegredients ul li img{
  width: clamp(150px,20vw,180px);	
  margin: 0 auto 20px;
}


.formulation ul{
 list-style: none;	
 text-align: center;
 font-size: 1rem;
 margin: 10px 0 20px;
 line-height: 3rem;
 letter-spacing: 0.15rem;	
}
.formulation ul li:first-child{
 font-size: 1.25rem;
 padding-top: 10px;
 letter-spacing: 0.1rem;
 color:#234353;
 font-weight: 400;	
} 
.formulation ul li:nth-child(2){
line-height: 2.4rem;	
color:  #202023;	
} 
.formulation ul li .formulation_span{
 font-size: 1.3rem;
} 

.formulation_photo01{
 max-width: 600px;
 margin: 60px auto 0;
 padding: 0 2vw;
 letter-spacing: 0.05rem;
}


.how_to_use h4{
 text-align: center;
 font-weight: 300;
 margin-bottom: 30px;
 font-size: 1.1rem;	
 letter-spacing: 0.1rem;
}

.howto_img{
	max-width: 600px;	
    margin: 0 auto;
	display: flex;
	gap:10px; 
}
.how_to_use ul{
 list-style: none;
 text-align: start;	
 padding-bottom:40px;
}
.how_to_use ul li{
font-size: 0.95rem;
line-height: 1.4rem;
}
.how_to_use ul li:first-child{
 font-size: 1.25rem;
 margin-bottom: clamp(10px,0.5vw,13px);
 font-weight: 400;
 color: #242a3f;
 letter-spacing: 0.05rem;	
 padding: 0.25rem 0.6rem 0.35rem;
 border-left: 3px solid #385581; 
}
.how_to_use ul li:nth-child(2){
 padding-left:  3px;
 letter-spacing: 0.05rem;
}
.howto_ul{
 max-width: 600px;	
 margin: 60px auto 0;
}


.recommend_area{
	background-image: url("images/recommend.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	text-align: left;
}

.recommend_area h2{
	line-height: 2.5rem;
	margin: 0 auto 30px;
	text-align: center;
	font-weight: 400;
	color: #234353;
}
.recommend_list{
    width: fit-content;
    margin: auto;
}
.recommend_list ul{
 display: inline-block;
 list-style: none;
}

.recommend_list li{
  font-size: 1.3em;
  line-height: 2.3em;
  padding-left: 2.6em;
  background-image: url("../images/products/recommend_check__4000_micro_ _shot_skin_roller.png");
  background-repeat: no-repeat;
  background-size:1.4em;
  background-position: left center;	
  letter-spacing: 0.2rem;
}

.recommend_area section_title h3{
	margin: 0 auto;
	text-align: center;
}

@media(max-width: 960px) {
.point01, .point02 {
    max-width: 700px;
    margin: 0 auto;
}	
.key_point {
    max-width: clamp(700px, 58vw, 900px);
}	
.key_point h2 {
    font-size: 1.75rem;
}	
.key_point h4 {
    font-size: 1.35rem;
}	
.point01 p {
    padding: 10px 0.25vw;
}	
	
.indegredients {
    margin: clamp(30px, 7vw, 70px) auto 0;
    gap: clamp(3px, 0.5vw, 6px);
    width: clamp(650px, 80vw, 720px);
}	
.indegredients ul li:nth-child(2) {
    letter-spacing: 0;
    font-size: 1.15rem;
}
.indegredients ul li:nth-child(3) {
    padding: 0 clamp(0px, 1vw, 6px) 1vh;
	font-size: 0.9rem;
}	
.formulation ul li:first-child {
	font-size: 1.4rem;
}
.recommend_list li {
    letter-spacing: 0.1rem;
}    

}


@media(max-width: 860px) {
.indegredients ul li:nth-child(2) {
   width: 32vw;
    }		
}


@media(max-width: 768px) {
.hero_area_centella_creaming_toner{
	margin-top: 61px;
}
.introduction_lead_pc  {
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
}	
.introduction h3 {
    font-size: 1.3rem;
    line-height: 2.5rem;	
	letter-spacing: 0;
	}
.skincare {
    max-width: 500px;
    margin: clamp(10px, 10vw, 40px) auto clamp(60px, 10vw, 120px);
}
.point01, .point02 {
        max-width: 600px;
    }	
.key_point h2	{
	font-size: 1.6rem;	
   letter-spacing: 0.02rem;	
	}
.point01 p {
    padding: 10px 0.25vw;
    }	
.multi_point ul {
    width: clamp(200px, 90vw, 600px);
    gap: clamp(3px, 2vw, 5px);
    padding: clamp(10px, 4vw, 40px) 0;
}	
.indegredients {
        width: clamp(600px, 75vw, 720px);
    }	
 .indegredients ul li:nth-child(2) {
 font-size: 1.1rem;
    }
}


@media(max-width: 700px) {
h3.section_title {
  font-size: clamp(14px, 6vw, 25px);
    }	
.hero_area_caption p.lead {
  font-size: clamp(14px, 4vw, 18px);
  padding: 0 10px;
    }	
p.product_name, .hero_area_product_caption p{
  font-size: clamp(14px, 4vw, 16px);
  letter-spacing: 0.01rem;	 
    }	
 .skincare {
	max-width: clamp(400px,90vw,500px); 
	margin: clamp(10px, 10vw, 40px) auto clamp(60px, 25vw, 120px);
    }	
.point01, .point02 {
   max-width: clamp(500px, 85vw, 550px);
    }	
.key_point h4 {
   font-size: clamp(1.1rem,4vw,1.3rem);
    }	
.key_point h2 {
   font-size: clamp(1.4rem,4vw,1.5rem);
    }	
.point01 p {
	font-size: clamp(1rem,1.8vw,1.1rem);
}	
.formulation ul li:first-child {
  font-size: clamp(1.1rem, 3vw, 1.3rem);
    }		
.multi_point ul {
	grid-template-columns: 1fr 1fr; 
    width: clamp(200px, 75vw, 500px);
    gap: clamp(5px, 5vw, 25px);
    padding: clamp(10px, 6vw, 40px) 0;
    }	
.indegredients {
     width: clamp(500px, 78vw, 720px);
    }	
.indegredients ul li:nth-child(2) ,.indegredients ul li:nth-child(3){
    width: 33vw;
    }	
.how_to_use h4 {
    font-size: clamp(1rem, 3vw, 1.05rem);
	}
.howto_img {
    gap: 5px;
}	
.howto_ul {
    max-width: clamp(500px, 85vw, 600px);
}	
.how_to_use ul li:first-child {
	font-size: clamp(1.05rem,3vw,1.1rem) ;
	}	
.how_to_use ul li:nth-child(2) {
    letter-spacing: 0.02rem;
}	
	
}

@media(max-width: 600px) {
.introduction_lead_pc{
   display: none;
	}	
.introduction_lead_sp{
  display: block;
  font-size: 0.9rem;
  line-height: 1.6rem;
  font-weight: 400;
  text-align: start;
  color: #1f2433bf;	
  max-width: clamp(350px,86vw,500px);
  margin: 0 auto clamp(15px,5vw,30px);
	}	
.introduction h3 {
   letter-spacing: 0.05rem;
   line-height: 1.2rem;
    }	
.introduction h3 .toner {
    line-height: 4rem;
}	
.key_point {
 max-width: clamp(450px, 85vw, 650px);
    }	
.key_point h4 {
        font-size: clamp(1.3rem, 4vw, 1.4rem);
	
    }	
.point01 p {
 max-width: clamp(450px, 85vw, 650px);
}	
.point02 ul {
  padding-bottom: 25px;
	}
.indegredients ul li:nth-child(3) {
    font-size: 0.9rem;
    }	
.howto_img {
    max-width: clamp(400px,90vw,550px);
}	
.recommend_area h2 {
   font-size: clamp(1.2rem,4vw,1.3rem);
   margin: 0 auto clamp(15px,3.5vw,25px);	
}	
}


@media(max-width: 525px) {
.hero_area_caption h2 {
 font-size: clamp(36px, 8vw, 40px);
 margin: 0 0 clamp(18px, 4vw, 30px);	
    }
.point01, .point02 {
  max-width: clamp(350px, 85vw, 450px);
    }	
.indegredients {
  width:100%;
    }	
 .introduction h3 {
  font-size: clamp(1rem,2vw,1.1rem);
    }	
 .introduction h3 .toner {
   font-size: clamp(1.2rem, 14vw, 1.5rem);
    }	
.skincare {
   max-width: clamp(300px, 85vw, 450px);
  margin: clamp(10px, 10vw, 25px) auto clamp(60px, 25vw, 120px);
    }	
.indegredients ul li img {
  width: clamp(100px, 30vw, 130px);
}	
.indegredients ul li:nth-child(2), .indegredients ul li:nth-child(3) {
  width: 32vw;
    }	
.howto_ul {
  max-width: clamp(300px, 85vw, 450px);
    }	
.how_to_use ul li {
  font-size: 0.95rem;
}	
.recommend_list li {
  font-size: 1.15rem;
    }	
.key_point h4 {
  padding-left: 3px;
    }	
.key_point h2 {
  line-height: 1.5;
  padding: 0 0 5px 3px;	
}		
.point01 p {
  font-size: clamp(0.9rem, 2vw, 1rem);
    }		
}


@media(max-width: 500px) {
.hero_area_caption p.lead {
    font-size: clamp(14px, 4vw, 17px);
    }	
.introduction, .formulation, .how_to_use{
    margin: 60px auto 30px;
}	
.mccc_recommend {
    margin: 0px auto 60px;
}		
.hero_area_caption.sp {
 margin: clamp(30px,10vw,50px) 0 clamp(20px,6vw,30px);	
    }	
	

.introduction_lead_sp {
 font-size: 1rem;
 max-width: clamp(250px, 80vw, 400px);
 margin: 0 auto clamp(20px, 6vw, 30px);
    }	
.skincare {
  max-width: clamp(300px, 84vw, 420px);
  margin: clamp(10px, 10vw, 16px) auto clamp(60px, 25vw, 120px);
    }

    }	
	
	
@media(max-width: 480px) {
p.product_name, .hero_area_product_caption p {
        font-size: clamp(13px, 3vw, 15px);
        letter-spacing: 0.01rem;
    }	
.introduction_lead_sp {
  font-size: 0.9rem;
  max-width: clamp(250px, 85vw, 400px);
  margin: 0 auto clamp(20px, 10vw, 36px);
    }	
.key_point {
   max-width: clamp(300px, 85vw, 450px);
    }	
.point01 p {
    max-width: clamp(300px, 85vw, 450px);
    }	
.key_point h2 {
   font-size: clamp(1.2rem, 6vw, 1.4rem);
   letter-spacing: 0.1rem;
    }	
.key_point h4 {
   font-size: clamp(1.2rem, 5vw, 1.3rem);
    }	
.indegredients ul li {
    width: clamp(100px, 10vw, 120px);
}	
.indegredients ul li img {
        width: clamp(90px, 30vw, 120px);
    }		
.indegredients ul li:nth-child(2){
    font-size: 1rem;
	line-height: 1.4rem;
      }	
.indegredients ul li:nth-child(3) {
        font-size: 0.85rem;
    }
.formulation ul {
    font-size: 0.9rem;
}	
.formulation ul li .formulation_span {
    font-size: 1.2rem;
}	
.how_to_use h4 {
        font-size: clamp(0.9rem, 3vw, 1rem);
    }	
.how_to_use ul li {
        font-size: 0.9rem;
    }	
 .recommend_list li {
        font-size: 1.05rem;
    }	

		
	}	
	

@media(max-width: 425px) {
	.hero_area_caption h2 {
        font-size: clamp(28px, 8vw, 36px);
        margin: 0 0 clamp(18px, 4vw, 30px);
    }
	.skincare {
			max-width: clamp(300px, 84vw, 380px);
	}
	
    .key_point h4 {
        font-size: clamp(1.2rem, 5vw, 1.3rem);
    }	
    .introduction h3 .toner {
        line-height: 3.5rem;
    }	
	.formulation_photo01 {
    padding: 0 4vw;
	margin: 30px auto 0;
}
	.formulation ul li .formulation_span {
        font-size: 1.1rem;
		display: inline-block
    }
	.how_to_use h4 {
        width: clamp(300px, 80vw, 400px);
		font-size: 0.95rem;
        margin: 0 auto;
    }
	.howto_img {
    max-width: clamp(280px,95vw,340px);
	padding: 0 2vw;
    margin: 20px auto;
	gap:2vw;
		
}
	.how_to_use ul {
    padding-bottom: 30px;
}
	.how_to_use ul li:first-child {
    margin-bottom: clamp(8px, 0.5vw, 10px);
    padding: 0.2rem 0.6rem 0.25rem;
}
.multi_point ul {
  width: clamp(200px, 83vw, 500px);
    }	
	
}


@media(max-width: 375px) {
.point01, .point02 {
     padding: 25px 0 0;
    }	
.key_point, .point01 p {
 max-width: clamp(280px, 85vw, 450px);
    }
.key_point h2 {
  font-size: clamp(1.2rem, 6vw, 1.3rem);
    }	
.introduction h3 {
	letter-spacing: 0.165rem;
    }	
.toner {
	letter-spacing: 0.05rem;
    }	
 .indegredients ul li:nth-child(2){
     width: 38vw;
	 letter-spacing: 0.03rem;
    }	
.indegredients ul li:nth-child(3){
        width: 35vw;
    }		
 .formulation ul li:first-child {
    font-size: 1.1rem;
    }	
.formulation ul li:nth-child(2) {
    line-height: 2rem;
    font-size: 1rem;
	letter-spacing: 0.1rem;
}	
.formulation ul li .formulation_span {
	font-size: 1.1rem;
	padding: 0 6vw;
    }	
.point01 p {
  line-height: 1.4rem;
    }	
.recommend_area h2 {
  font-size: clamp(1.1rem, 6vw, 1.2rem);
    }	
 .recommend_list li {
 font-size: clamp(0.9rem,5vw,1rem);
 padding-left: 2em;	 
 letter-spacing: 0;
    }	
	
	
}