@charset "utf-8";
body{
color: #332e2a;
}
img {
  width: 100%;
}
.text {
   display: inline-block;
}
.main_inner{
    max-width: 960px;
    margin: 70px auto 20px;
}
.main_inner section .features_inner {
  border-image: conic-gradient(#d3cdab33) fill 0 / 1 /0 100lvi;
  padding: 46px 60px 56px;
}
.main_inner section .point01_ul {
  border-image: conic-gradient(#d3cdab33) fill 0 / 1 /0 100lvi;
 margin: 2.4vw 0 3vw;
}
.main_inner section .cool01{
  border-image: conic-gradient(#d3cdab33) fill 0 / 1 /0 100lvi;
  padding: clamp(20px, 3.4vw, 36px) 0;
}
.main_inner section .point_top{
  border-image: conic-gradient(#d3cdab33) fill 0 / 1 /0 100lvi;
  padding: clamp(20px, 3.4vw, 36px) 0;
}

.tokusei{
	font-size: 0.8rem;
    text-align: center;
	letter-spacing: 0.04rem;
   font-weight: 400;
}


section.features{
 margin: clamp(90px, 20vw, 120px) 0;	
}

section.point{
	margin-bottom: 100px;
	padding: 0 5.8vw;
}

.texture{
margin: 120px auto 60px;
padding: 0 10px;
}
.how_to_use{
margin: 40px auto;	
padding: 0 20px;
}
.br,.br_2{
display: block;		
}
.br_sp{
	display: none;
}
.color{
color: #4a5d4c;
font-weight: 400;
}

@media(max-width: 768px) {		
section.features{
 margin: clamp(60px, 20vw, 90px) 0;	
}	
}


@media(max-width:600px){
section.point{
    padding: 0 3.2vw;
	margin-bottom: 60px;
}
section.point01{
    padding: 0;
	margin-bottom: 60px;
}
.main_inner section .features_inner {
  border-image: none;
  padding: 46px 4.6vw 56px;
 background-color: #d3cdab33;
}
.main_inner section .point01_ul {
  border-image: none;
  background-color:#d3cdab33;
  padding: 30px 3.2vw;
}
}
@media(max-width:480px){
.br_sp{
	display: block;
}
}


/*header*/
.hero_area_silk_hair_nourishing_weightless_essence{
	margin-top: 134px;
	filter: brightness(105%);
}

.hero_area_caption h2 {
    font-family: 'Lato', sans-serif;
    font-size: 2.6rem;
    font-weight: 300;
    line-height: 1.1;
    margin: 0 0 30px;
    color: #888C98;
	letter-spacing: 0.3rem;
	margin-bottom: 20px;
}
.hero_area_caption h3 {
    font-family: 'Lato', sans-serif;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.6;
    margin: 0 0 8px;
    text-align: center;
    color: #888C98;
	letter-spacing: 0.04rem;
    }
.hero_area_caption p.lead {
    font-size: clamp(18px, 20 / 1400 * 100vw, 22px);
    letter-spacing: 0.02rem;
    }
p.product_name {
    font-size: clamp(14px, 15 / 1400 * 100vw, 15px);
	letter-spacing: 0.08rem;
    }


@media(max-width: 1440px) {	
.hero_area_caption h2 {
	font-size: clamp(34px, 38/1440*100vw, 38px);
	letter-spacing: 0.15rem;
}    
.hero_area_caption h3 {
    line-height: 1.4;
	font-size: clamp(30px, 34/1440*100vw, 34px);
	letter-spacing: 0.06rem;
}
}

@media(max-width: 960px) {	
.hero_area_caption h2 {
    font-size: clamp(30px,6vw,50px);
} 	
.hero_area_caption h3 {
  font-size: clamp(2.2rem, 2vw, 2.4rem); 
    }	
p.product_name {
        margin-top: 10px;
    }		
}

@media(max-width: 768px) {	
.hero_area_silk_hair_nourishing_weightless_essence{
	margin-top: 46px;
	filter: brightness(100%);
}
.hero_area_caption h2 {
    font-size: clamp(26px,50/768*100vw,50px);
	letter-spacing: 0.1rem;
} 	
 .hero_area_caption h3 {
  font-size: clamp(20.5px, 35/768*100vw, 35px); 
    }		
.hero_area_caption p.lead {
    font-size: clamp(13px, 18 / 768 * 100vw, 18px);
    letter-spacing: 0.02rem;
}
}

@media(max-width: 700px) {
p.product_name, .hero_area_product_caption p{
  font-size: clamp(11.5px, 2.2vw, 15px);
  letter-spacing: 0.01rem;	 
    }
	.hero_area_caption h2 {
	margin-bottom: 10px;
}
   .hero_area_caption h3 {
	margin-bottom: 3px;
    }	
}

@media(max-width: 450px) {
	.hero_area_caption.sp {
        margin-top: 10%;
        margin-bottom: 6%;
    }
	.hero_area_caption h2 {
    font-size: clamp(21.5px,6.2vw,36px);
	letter-spacing: 0.1rem;
}
   .hero_area_caption h3 {
    font-size: 5vw; 
    }	
}

@media(max-width: 425px) {
.brand_logo {
	width: clamp(90px, 28vw, 120px);}	
}

@media(max-width: 375px) {
  .hero_area_caption h2 {
    letter-spacing: 0.025rem;
    }
	}

@media(max-width: 480px) {	
.texture h4 {
  font-size: 1rem;
    }		
	}	
/*header*/

	

/*features*/
section.features{
 text-align: center;	
 font-weight: 300;
}
.features_inner{
 padding: 0 60px;
}
.story_color{
   color: #35451c;
    font-weight: 400;
    padding: 0 0.25vw;
    background: linear-gradient(transparent 70%, #96b59a5e 50%);
    text-shadow: 0 0 1px #92b97b;
}
.lead_wrapper{
display: flex;
justify-content: space-between;
align-items: center;	
gap: clamp(20px,1.5vw,25px);	
}
.lead_img{
 max-width: clamp(300px,50%,400px);	
}
.lead_img img{
 box-shadow: 16px 14px 0px #96b59aba; 
 margin-inline:30px;
}

.fuatures_lead{
text-align: start;
max-width: clamp(280px,50%,400px);	
margin: 0 auto;
padding-top: 30px;
}
.features h5{
	font-size: clamp(28px, 30/1440*100vw, 30px); 
	letter-spacing: 0.02rem; 
	font-weight: 400;  
	padding-left: 8px;
}
.features h6{
	font-size: 0.9rem;
	padding-left: 8px;
	font-weight: 400;
	letter-spacing: 0;
}
.features p{
	font-size: 0.92rem;
	padding: 6px 0 8px 8px;
	font-weight: 400;
	margin: 20px 0 0 8px;
	border-left: 2px solid;
	letter-spacing: 0;
}


@media(max-width: 860px) {	
.features_inner {
    padding: 0 6.4vw;
}
.lead_wrapper{
    display: block;
 }
.lead_img,.fuatures_lead{
	max-width: 100%;
	}
.lead_img{
 margin-bottom: 20px; 
	}
.lead_img img{
 margin-inline:0px;
}		
}

@media(max-width: 768px) {
	
 .features h4 {
    font-size: clamp(18px,22.5/768*100vw,22.5px);
	line-height: 2.6rem;
    margin-bottom: 40px;
}
.features p {
    font-size: clamp(14px,15.5/768*100vw,15.5px);
	text-align: start;
	line-height: 1.65rem;
	padding: 0 1.8vw;
}	
.fuatures_point{
  display: block;
}
	
	
}

@media(max-width: 600px) {		
.features h4 {
  letter-spacing: 0.1rem;
  line-height: 2.2rem;
  }
	
}

@media(max-width: 500px) {		
.features h4 {
  font-size: clamp(16px, 19 / 500 * 100vw, 19px);
  line-height: 1.8rem;
  letter-spacing: 0.04rem;
    }	
.features h5 {
    font-size: clamp(26px, 32 / 1440 * 100vw, 28px);
}	
.features h6 {
     font-size:  clamp(12.5px,14.5/500*100vw,14.5px);
}	
.span_color {
  font-size: clamp(18px,21/500*100vw,21px);
    }		
.features p {
	font-size: clamp(12.5px, 14 / 500 * 100vw, 14px);
	line-height: 1.4rem;
   padding: 1vw 1.8vw;
    }
.lead_img img {
    box-shadow: 6px 8px 0px #96b59aba;
}	
	
    }
/*features*/	


/*point01*/
.core_img{
 max-width: clamp(500px,30vw,800px);
 margin: -1vw auto 20px;
}
.check{
	content: '';
  width: 10px;
  height: 5px;
  border-left: 2px solid #25AF01;
  border-bottom: 2px solid #25AF01;
  transform: rotate(-45deg);
}

@media(max-width: 768px) {
.core_img {
	max-width: clamp(300px, 60vw, 500px);
    margin: -30px auto 20px;
}
	
}

@media(max-width: 500px) {
.check{
  width: 8px;
  height: 4px;

}		
}

/*point01*/



/*main_ingredients*/
.point01_ul{
 display: flex;
 justify-content: center;
 padding: 2vw 5.8vw;
 gap: 10px;
 font-size: 1rem;
line-height: 2rem; 
 font-weight: 400;
 color: #fff;
}
.point01_ul img{
max-width: 280px
}
.point01_ul ul{
list-style: none;
background-color: #fff;
padding: 1vw;
border:1px solid #578b4b;
}
.point01_ul ul li:nth-child(2){
    background-color: #437139;
    padding-left: 8px;
    letter-spacing: 0.04rem;
    text-shadow: 1px 1px 0 #578b4b;
}
.point01_silk{
  padding: 0 5.8vw;
  margin-bottom: 100px;
}
.main_ingredients{
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 gap:clamp(8px,2vw,16px);
 padding: 1vw 0.5vw;
}
.main_ingredients ul{
 list-style: none;
 line-height: 1.2rem;
 letter-spacing: 0.08rem;
font-size: 0.9rem;
 font-weight: 400;
}
.main_ingredients ul li:first-child{
padding: 12px 0;
width: 90%;
margin: 0 auto;
}

.main_ingredients ul li:nth-child(2){
 line-height: 1.6rem;
 letter-spacing: 0.08rem;
 font-size: 1.1rem;
 font-weight: 400;
 color:#437139;
 border: 1px solid #4a5d4c;
  width: 86%;
 text-align: center;
  border-radius: 30px;
  margin: 0 auto;
  padding: 3px 0;
}
.main_ingredients ul li:nth-child(3){ 
 width: 80%;
    padding: 10px 6px;
    margin: 0 auto;
}


@media(max-width: 860px) {
.main_ingredients {
    padding: 2vw 2.2vw;
}
.main_ingredients ul li:nth-child(2){
font-size:clamp(17px, 18 / 860 * 100vw, 18px);
}	
}

@media(max-width: 768px) {
.main_ingredients ul li{
    font-size: 1rem;
}
.main_ingredients ul li:nth-child(2) {
  width: 100%;
}
.main_ingredients ul li:nth-child(3) {
  width: 100%;
  font-size: 0.86rem;
}
	
}

@media(max-width: 680px) {
.main_ingredients {
        padding: 2vw 2.8vw;
    }
.main_ingredients ul li:nth-child(2) {
  font-size: clamp(14.5px, 17 / 680 * 100vw, 17px);
  line-height: 1.2rem;
    }	
.point01_ul {
 padding: 6vw 5.8vw;
 gap: 0;
}		
	
}

@media(max-width: 600px) {
.point01_silk{
  padding: 0 3.2vw;
  margin-bottom: 60px;
}	
.point01_ul ul {
padding: 0;
}
.point01_ul ul li:nth-child(2) {
font-size: 0.8rem;
letter-spacing: 0;
padding: 0 3px;
}	
}


/*main_ingredients*/


/*Mo-plex*/
.Mo-plex{
	display:grid;
	grid-template-columns:1fr 1fr 1fr ;
	margin:0 0 46px;
	text-align: center;
	font-weight: 400;
    font-size: 1.05rem;
    color: #4a5d4c;
	letter-spacing: 0.02rem;
}
.Mo-plex ul{
	list-style: none;
	margin-top: -6px;
}
.Mo-plex ul li:nth-child(2){
    padding: 10px 0 8px;
}
.Mo-plex img{
	max-width: 180px;
}
@media(max-width:680px){
.Mo-plex {
  font-size: clamp(14px, 16/680*100vw, 16px); 
  line-height: 1.4rem;
}
.Mo-plex img {
    max-width: clamp(105px, 20vw, 160px);
}
.br{
display: none;		
}	
}

@media(max-width:550px){
.Mo-plex {
  font-size: clamp(13px, 14/600*100vw, 14px); 
  line-height: 1.25rem;
 letter-spacing: 0.01rem;
	
}

}
/*Mo-plex*/


/*sebum-P*/
.sebum-P{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 38px 0.5vw 20px;
    line-height: 1.6rem;
    letter-spacing: 0.04rem;
    font-size: 1.05rem;
    font-weight: 400;
	color: #4a5d4c;
    text-align: center;
}
.sebum-P ul{
	list-style: none;
}
.sebum-P img{
	max-width: 180px;
	padding-bottom: 10px;
}

@media(max-width:680px){
.sebum-P {
  gap:0px; 
  font-size: clamp(14px, 16/680*100vw, 16px); 
  line-height: 1.4rem;
}
.sebum-P img{
	max-width: 26vw;
}	
.br{
display: none;		
}	
}

@media(max-width:550px){
.sebum-P {
  font-size: clamp(13px, 14/600*100vw, 14px); 
  line-height: 1.25rem;
 letter-spacing: 0.01rem;
	
}

}


/*sebum-P*/


/*Herb*/
.Herb{
    display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	margin:0 0 46px;
	text-align: center;
	font-weight: 400;
    font-size: 1.05rem;
    color: #4a5d4c;
	letter-spacing: 0.02rem;
	gap: 1.5vw; 
	line-height: 1.6rem;
}

.Herb img{
	max-width: 200px;
}
.Herb ul li{
	list-style: none;
    padding-inline: 3px;
	
}
.Herb ul li:nth-child(2){ 
    padding: 10px 0 20px;
}

@media(max-width:680px){
.Herb {
  font-size: clamp(14px, 16/680*100vw, 16px); 
  line-height: 1.4rem;
  gap: 0; 
}
.Herb img {
    max-width: clamp(110px, 20vw, 160px);
}	
.br{
display: none;		
}	
}

@media(max-width:550px){
.Herb {
  font-size: clamp(13px, 14/600*100vw, 14px); 
  line-height: 1.25rem;
 letter-spacing: 0.01rem;
margin-top: -10px;	
}

}
/*Herb*/

/*Herb*/
.Probiotics{
  display:grid;
	grid-template-columns:1fr 1fr 1fr ;
	margin:0 auto 46px;
	text-align: center;
	font-weight: 400;
    font-size: 1.05rem;
    color: #4a5d4c;
	letter-spacing: 0.02rem;
	padding: 20px;
	max-width: clamp(680px,70vw,780px);
	background-color: #fff;
    border-radius: 20px;
}

.Probiotics img{
	max-width: 200px;
}
.Probiotics ul{

}
.Probiotics ul li{
	list-style: none;
    padding-inline: 3px;
	
}
.Probiotics ul li:nth-child(2){ 
    padding: 10px 12px;
	width:fit-content;
	margin: 0 auto;
	border-block:1px solid;
	font-weight: 400;
}

@media(max-width:680px){
.Probiotics {
  font-size: clamp(14px, 16/680*100vw, 16px); 
  line-height: 1.4rem;
  gap: 6px; 
　margin: 0 5vw;
  padding: 10px;
}

}

@media(max-width:550px){
.Probiotics {
  font-size: clamp(13px, 14/600*100vw, 14px); 
  line-height: 1.25rem;
 letter-spacing: 0.01rem;
}
.Probiotics ul li:nth-child(2) {
    padding: 5px 6px;
    width: fit-content;
    margin: 0 auto;
    border-block: 1px solid;
    font-weight: 400;
}

}

@media(max-width:500px){
.Probiotics {
  font-size: clamp(13px, 14/600*100vw, 14px); 
  line-height: 1.25rem;
 letter-spacing: 0.01rem;
}
.Probiotics ul li:nth-child(2) {
    padding: 5px 6px;
    width: fit-content;
    margin: 0 auto;
    border-block: 1px solid;
    font-weight: 400;
}

}
/*Herb*/


/*COOL FEELING*/
.cool01{
	display: flex; 
	margin-block: 3vw; 
	gap:30px;
	padding: 10px 20px;
}
.cool01 h4{
  font-size: 1.25rem;
  font-weight: 400;
  border-bottom: 2px solid;
   margin: 30px 0 10px;
}
.cool01 h4 span{
font-size: 125%;
}
.cool01 p{
font-size: 0.9rem;
line-height: 1.2rem;
letter-spacing: 0.04rem;
padding: 10px 0px 30px;
text-align: justify}


.cool01 img{
	max-width: 50%; 
}

.cool01 ul{
	list-style: none;
    font-weight: 400;
}
.cool01 ul li:nth-child(1){
	font-size: 1rem;
    background-color: #345d2b;
    line-height: 2rem;
    padding-left: 10px;
	letter-spacing: 0.04rem;
    color: #fff;
}
.cool01 ul li:nth-child(2){
    font-size: 0.86rem;
    line-height: 1.4rem;
    padding: 8px 3px 10px;
}
.cool01 ul li:nth-child(3){
	font-weight: 300;
    padding-left: 6px;
}
.cool_li_pc{
	display: block;
	}	
.cool_li_sp{
	display: none;
	}	


@media(max-width:1024px){
section.cool{
	padding: 0 5.8vw;
}
}

@media(max-width:860px){
.cool01{
  display: block;
 padding: 0 6.8vw;
 margin-block: 4.8vw;
    }	
.cool01 img{
    max-width: 100%;
}	
.cool01 ul{
    background-color: #ffffffeb;
}	
.cool01 ul li:nth-child(1){
    margin-bottom: 10px;
	padding-left: 20px;
	color: #fff;
    letter-spacing: 0.04rem;
    line-height: 3rem;
}
.cool01 ul li:nth-child(2) {
    font-size: 0.96rem;
	padding: 0 0 10px 20px;
}
.cool01 ul li:nth-child(3) {
	padding-left: 20px;
}	
.cool01 ul li:nth-child(4){
	width: fit-content;
	margin-left: auto;
}	
.cool01 ul li:nth-child(4) img{
	padding: 20px;
}		
	
}


@media (max-width: 600px) {
section.cool {
 padding: 8vw 4vw;
 border-image: none;
  background-color:#d3cdab33; 
    }
.main_inner section .cool01 {
  border-image: none;
  padding:0;
  margin: 0;
}
 .cool01 ul li:nth-child(1) {
  padding-left: 10px;
    }
.cool01 ul li:nth-child(2) {
  font-size: clamp(13.5px,15.5/600*100vw,15.5px);
  padding: 0 10px 10px 10px;
  line-height: 1.2rem;
  font-weight: 300;
    }

}

/*COOL FEELING*/



/*各point共通*/
.point_ttl {
margin-bottom: 35px;
color: #47413d;	
}
.point_ttl li{
 list-style: none;
 font-size: 1.45rem;
 text-align: center;
 line-height: 2.3rem;
 letter-spacing: 0.05rem;
 font-weight: 400;
}
.point_ttl li:first-child{
max-width: 46px; 
margin: 0 auto 12px;
}
.point_ttl li .ttl_span{
 font-size: 110%; 
	letter-spacing:0.04rem;
 color: #216328;
}
.point_h4{
   font-size: 1.35rem; 
	color: #33712b;
    font-weight: 400;
	border-left: 2px solid; 
	line-height: 3rem; 
	padding: 0 20px; 
	margin: 68px 0 16px;
	background-color: #b3a8a814;
}
.point_p{
　　text-align: justify;
	word-break: break-all;
   padding: 0 12px;
	line-height: 1.45rem;
	font-size: 0.98rem;
}	
@media(max-width: 768px) {
.point_ttl li:first-child {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: #f7d038;
}		
}

@media(max-width: 600px) {	
.point_h4{
	font-size: clamp(18px,20/600*100vw,20px);	
	line-height: 1.8rem;
    padding: 8px 20px;
    margin: 36px 0 10px;
	}	
.point_p {
  font-size: clamp(14.2px,15.5/600*100vw,15.5px);
}
.point_ttl li {
	font-size: clamp(20px,22/600*100vw,22px);
    line-height: 2.2rem;
}	
.point_ttl li .ttl_span{
 font-size: 120%; 
line-height: 2.4em;	
}	
}
	
@media(max-width: 425px) {
.point_ttl li {
    font-size: 1.15rem;
	line-height: 1.75rem;
	letter-spacing: 0;
    }
.point_ttl li:first-child{
max-width: 38px; 
margin: 0 auto 10px;
}
.br_2{
display: none;	
	
}
.cool_li_pc{
	display: none;
	}	
.cool_li_sp{
	display: block;
	}	
	
}

@media (max-width: 330px) {
    .point_ttl li .ttl_span {
        font-size: 110%;
    }
}
/*各point共通*/



/*texture*/
.texture{
 letter-spacing: 0.02rem;
 text-align: center;
 line-height: 1.3rem;
}
.texture_oil{
 padding: 0 8vw;
}
.texture_oil img{
 padding-bottom: 30px;
}

.texture h4{ 
    margin: 46px auto 30px;
    text-align: center;
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 2rem;
    letter-spacing: 0.08rem;
    color: #4a5d4c;
    width: fit-content;
    padding: 0 1vw;
}
.texture_p{
 line-height: 1.6rem;
}
.tokusei_texture{
 font-size: 0.8rem;
 margin: 40px 0 10px;
}

.texture_flex{
display: flex;
gap:1vw;
padding: 0 9vw;
}
.texture_flex ul li{
 list-style: none;
 text-align: center;
 font-weight: 400;
 line-height: 2.20rem;
 border: 1px solid #437139;
 letter-spacing: 0.08rem;
 font-size: 1.05rem;
}
.texture_flex ul li:nth-child(2){
 background-color: #437139;
 color: #fff;
}



@media(max-width: 700px) {
.texture h4 {
    font-size: clamp(18.5px,700/700*100vw,21px);
}
.texture_flex{
  max-width: 100%;
 padding: 1.2vw;
}	
.texture_flex ul li:nth-child(2) {    
line-height: 1.6rem;
font-size: clamp(14px, 16 / 700 * 100vw, 16px);
}	
	
.texture{
 padding: 0 8vw;
}	
.texture_oil{
 padding: 0 1vw;
}	
	
}

@media(max-width: 525px) {	
.texture {
    margin: 70px auto 60px;
	padding: 0 3.6vw;
}
.texture h4 {
   font-size: clamp(17.5px, 20 / 525 * 100vw, 20px);
    line-height: 1.7rem;
    }	
.texture_p{
   font-size: clamp(14px, 16 / 525 * 100vw, 16px);
	letter-spacing: 0.01rem;
}
.tokusei_texture{
font-size: 0.7rem;
	}
	
	
    }	

@media(max-width: 425px) {
.texture {
    margin: 50px auto 40px;
	
}

.howto_tip p {
    padding: 10px 20px;
}	
	
}

@media(max-width: 375px) {	
.texture h4 {
   /* line-height: 1.6rem;*/
    }	
}
/*texture*/


/*howto*/
.how_to_use ul{
	text-align: center;
}
.how_to_use ul li{
	list-style: none;
	padding-block: 8px;
    line-height: 1.8rem;
	font-size: 1.05rem;
}
.how_to_use ul li:first-child{
	margin-bottom: 30px;
}

.how_to_use ul li:nth-child(2){
	font-size: 1.45rem;
	font-weight: 400;
	width: fit-content;
	margin: 0 auto 6px;
	padding: 3px 16px 6px;
	letter-spacing: 0.04rem;
}
.how_to_use ul li:nth-child(3){
  font-size: 90%;
  margin: 0 auto; 
  padding: 0.8vw 1.2vw;
  border: 1px solid #4a5d4c;
    background-color: #96b59a45;
    border-radius: 20px;
    width: fit-content;
	line-height: 1.25rem;
}



@media(max-width: 860px) {
.how_to_use {
    padding: 0 3.8vw;
}	
.how_to_use ul {
    font-size: 0.95rem;
}	
.how_to_use ul li:nth-child(3) {
padding: 12px 1.4vw;
}	
	}

@media(max-width: 600px) {	
.howto_ul{
   padding: 0 40px; 
}
.how_to_use ul {
    flex-direction: column;
    }
 .how_to_use ul li:first-child {
	font-size: clamp(14px, 15.5 / 600 * 100vw, 15.5px);
        line-height: 1.46rem;
	}
.how_to_use ul li:nth-child(2) {
    max-width: 100%;
	padding: 3px 20px;
	
}	
.how_to_use ul li:nth-child(3) {
	font-size: 0.8rem;
	padding: 12px 2vw;
}			
	
}	

@media(max-width: 425px) {
.howto_ul {
    margin: 60px auto 0;
     padding: 0 6.4vw; 
}
.how_to_use ul li:nth-child(2) {
    font-size: clamp(20px,22/425*100vw,22px);
    }
 .howto_img {
     max-width: clamp(280px, 80vw, 320px);
    }	
	
}
/*howto*/


/*recommend*/
.recommend_area{
	background-image: url("images/recommend.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	text-align: left;
	padding: 0 3rem;
}
.recommend_area h2{
	line-height: 2.5rem;
	margin: 0 auto 30px;
	text-align: center;
	font-weight: 400;
    color: #4a5d4c;
}
.recommend_list{
    width: fit-content;
    margin: auto;
}
.recommend_list ul{
 display: inline-block;
 list-style: none;
}
.recommend_list li{
  font-size: 1.15rem;
  line-height: 2.3em;
  padding-left: 2.6em;
  background-image: url("../images/products/recommend_check_perfect_balance_daily_cleansing_form.png");
  background-repeat: no-repeat;
  background-size:1.4em;
  background-position: left center;	
  letter-spacing: 0.1rem;
}
.recommend_area section_title h3{
	margin: 0 auto 16px;
	text-align: center;
}


@media(max-width: 768px) {	
.mccc_recommend {
    margin: 0 auto 20px;
}	
	
.recommend_area h2 {
   font-size: clamp(1.2rem,4vw,1.3rem);
   margin: 0 auto clamp(15px,3.5vw,25px);	
}
.recommend_list li {
	font-size: clamp(16px,18/768*100vw,18px);
	}
}

@media(max-width: 425px) {	
.recommend_area {
    padding: 0 2rem;
}	
  .recommend_list li {
	line-height: 1.45rem;  
	padding-bottom: 8px;
	padding-left: 2.2em;
    background-size: 1.5em;
}
	
}
/*recommend*/