@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:nth-of-type(3){
  border-image: conic-gradient(#d3cdab33) fill 0 / 1 /0 100lvi;
  padding: clamp(20px, 3.4vw, 36px) 0;
}
.main_inner section:nth-of-type(7){
  border-image: conic-gradient(#d3cdab33) fill 0 / 1 /0 100lvi;
  padding: 3vw 0 4vw;
}
.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: 80px;
	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;
}
.main_inner section .features_inner {
  border-image: none;
  padding: 46px 4.6vw 56px;
 background-color: #d3cdab33;
}
.main_inner section:nth-of-type(3){
  border-image: none;
  background-color: #d3cdab33;
  padding: 40px 0;
}
.main_inner section:nth-of-type(7){
   border-image: none;
  background-color: #d3cdab33;
  padding: 40px 0;
}
}


/*header*/
.hero_area_silk_hair_hair_scalp_clear_shampoo{
	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_hair_scalp_clear_shampoo{
	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;
}

.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(28.8px, 32/1440*100vw, 32px); 
	letter-spacing: 0.12rem; 
	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(13px,14.5/500*100vw,14.5px);
}	
.span_color {
  font-size: clamp(18px,21/500*100vw,21px);
    }		
.features p {
	font-size: clamp(13.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*/


/*free*/
.point_free{
padding: 0 2.6rem;	
	
}
.point_free .point_free_ttl{
	font-size: 1.6rem;
    text-align: center;
    line-height: 2.4rem;
    letter-spacing: 0.06rem;
    font-weight: 400;
	border-bottom: 2px solid #5d5954;
	padding-bottom: 10px;
}
.free_point_img{
	margin: 30px auto 0;
}

.free01{
 font-size: 1.35rem;
line-height: 2.3rem;
font-weight: 400;
text-align: center;
position: relative;
color: #fff;
}
.free01_h4{
text-align: center;
font-size: 1.25rem;
line-height: 1.6rem;
letter-spacing: 0.2rem;
width: 120px;
height: 120px;
border: 3px solid;
border-radius: 100px;
padding: 16px;
align-content: center;
background-color: #64ab59;
position: absolute;
top: -20px;
left:-20px;
font-weight: 400;
text-shadow: 1px 1px 0 #578b4b;
align-items: center;
}
.free01 ul li{
list-style: none;
margin-block:10px;
border-bottom: 3px solid #578b4b;	
background-color: #64ab5975;	
margin-inline:10px;
}
.free02{
 font-size: 1.35rem;
line-height: 2.3rem;
font-weight: 400;
text-align: center;
position: relative;
margin: 90px auto 120px;
color: #fff;
}
.point_free p{
border-bottom: 3px solid #578b4b;		
background-color: #64ab5975;
color: #fff;
position: relative;
}
.free02_h4{
text-align: center;
font-size: 1.25rem;
line-height: 1.6rem;
letter-spacing: 0.16rem;
width: 120px;
height: 120px;
border: 1px solid;
border-radius: 100px;
padding: 16px;
border: 3px solid;	
background-color: #64ab59;	
align-content: center;
position: absolute;
top: -86px;
left:-20px;
font-weight: 400;
text-shadow: 1px 1px 0 #578b4b;
z-index: 10;
align-items: center;
}

@media(max-width: 860px) {
.br_sp{
	display: block;
}	
}

@media(max-width: 768px) {	
.free01_h4,.free02_h4 {
  font-size:clamp(18px,22*100vw/860,22px); 
  padding: 0;
 letter-spacing: 0.025rem;
}	
.free01,.free02{
 font-size:clamp(19px,20*100vw/860,20px);

}	
	
.point_free p{
line-height: 1.8rem;
padding: 8px 0;
}	
}


@media(max-width: 680px) {		
.point_free {
    padding: 0 1.6rem;
}
.point_free .point_free_ttl {
font-size: clamp(21px, 23 / 600 * 100vw, 23px);
    letter-spacing: 0.02rem;
}
.free01_h4,.free02_h4{
	width: 100px;
    height: 100px;
	}
.free01 ul li {
    margin-inline: 3px;
}	
}

@media(max-width: 550px) {	
.free01_h4, .free02_h4 {
        font-size: clamp(16px, 18 * 100vw / 550, 18px);
    }	
.free01, .free02 {
        font-size: clamp(15.5px, 17.5 * 100vw / 550, 17.5px);
    }	
.free01 ul li {
    margin-inline: 3px;
}	
}
/*free*/


/*main_ingredients*/
.main_ingredients{
 display: flex;
 justify-content: center;
 gap:clamp(8px,2vw,16px);
 text-align: center;
 margin-bottom: 30px;
}
.main_ingredients ul li{
 text-align: center;
 list-style: none;
 line-height: 2.6rem;
 letter-spacing: 0.08rem;
font-size: 1.05rem;
 font-weight: 400;
 border: 2px solid #4a5d4c;
 background-color: #fff;
}
.main_ingredients ul li img{
 max-width: 240px;
}
.main_ingredients ul li:first-child{
 padding: 8px 0px 0px 13px;
 background-color: #7ab9673b;
 border-radius: 10px 10px 0px 0;
}
.main_ingredients ul li:nth-child(2){ 
 font-size: 1.25rem;
 color: #4a5d4c;
 letter-spacing: 0.04rem;
 border-block: 0;
}
.main_ingredients ul li:nth-child(3){ 
 border-radius: 0 0 10px 10px;
}


@media(max-width: 860px) {
.main_ingredients{
 padding: 0 6.8vw;
}
	
}

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


@media(max-width: 680px) {
.main_ingredients{
 flex-direction: column;
  padding: 0 18vw;
}
}

@media(max-width: 425px) {
.main_ingredients{
  padding: 0 10vw;
}
}
/*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 1fr;
	gap:10px;
	margin:-20px 0 30px;
    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: 200px;
	padding-bottom: 10px;
}

@media(max-width:680px){
.sebum-P {
  gap:0px; 
  font-size: clamp(14px, 16/680*100vw, 16px); 
  line-height: 1.4rem;
}
.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;
	padding-block:10px;
	gap: 10px;
	margin-bottom: 30px;
	letter-spacing: 0.02rem;
	line-height: 1.6rem;
    font-size: 1.05rem;
    font-weight: 400;
	color: #4a5d4c;
    text-align: center;
}

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

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

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

}
/*Herb*/


/*COOL FEELING*/
.cool01{
	display: flex; 
	margin-block: 3vw; 
	gap:30px;
	padding: 10px 20px;
}
.cool02{
	display: flex; 
	flex-direction: row-reverse; 
	gap:30px;
	padding: 0 20px;
}
.cool01 img, .cool02 img{
	max-width: 50%; 
}
.cool01 ul,.cool02 ul{
	list-style: none;
    font-weight: 400;
    line-height: 1.4rem;
}
.cool01 ul li:nth-child(1), .cool02 ul li:nth-child(1){
	font-size: 1rem;
    background-color: #437139;
    line-height: 2rem;
    padding-left: 6px;
	letter-spacing: 0.04rem;
}
.cool01 ul li:nth-child(2), .cool02 ul li:nth-child(2){
    font-size: 1.3rem;
    padding: 10px 3px;
    border-bottom: 2px solid;
    margin-bottom: 6px;
}
.cool01 ul li:nth-child(3), .cool02 ul li:nth-child(3){
	font-weight: 300;
    padding-left: 6px;
}
.cool01 ul li:nth-child(4) img, .cool02 ul li:nth-child(4) img{
	max-width: 180px;
	padding-top: 20px;
}
 .cool01 ul li:nth-child(4) img{
	padding: 20px;
}
.cool01 ul li:nth-child(5), .cool02 ul li:nth-child(5){
	font-size: 0.8rem;
    text-align: end;
}


@media(max-width:1024px){
.cool01 {
padding: 10px 40px 20px;
}
.cool02 {
padding: 0 40px;
}	
}

@media(max-width:860px){
.cool01, .cool02 {
  display: block;
 padding: 0 6.8vw;
 margin-block: 4.8vw;
    }	
.cool01 img, .cool02 img {
    max-width: 100%;
}	
.cool01 ul, .cool02 ul {
    background-color: #ffffffeb;
}	
.cool01 ul li:nth-child(1), .cool02 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), .cool02 ul li:nth-child(2) {
    font-size: 1.2rem;
	padding-left: 20px;
}
.cool01 ul li:nth-child(3), .cool02 ul li:nth-child(3) {
	padding-left: 20px;
}	
.cool01 ul li:nth-child(4), .cool02 ul li:nth-child(4){
	width: fit-content;
	margin-left: auto;
}	
.cool01 ul li:nth-child(4) img, .cool02 ul li:nth-child(4) img {
	padding: 20px;
}		
	
}



@media(max-width:600px){
.cool01, .cool02 {
  padding: 0 3.8vw;
  margin-block: 5vw;
    }
.cool01 ul li:nth-child(2), .cool02 ul li:nth-child(2) {
    padding-left: 10px;
   font-size: clamp(17px, 18.5 / 600 * 100vw, 18.5px);
}
.cool01 ul li:nth-child(3), .cool02 ul li:nth-child(3) {
        padding: 0 10px;
	font-size: 0.85rem;
    }
.cool01 ul li:nth-child(4) img, .cool02 ul li:nth-child(4) img {
    max-width: 130px;
}	
	
}
/*COOL FEELING*/





/*各point共通*/
section.water_point {
  padding: 10px 0;
}

.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%; 
	padding-inline:1vw; 
	letter-spacing:0.04rem;
 color: #216328;
}
	
@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_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.2rem;	
}	
}
	
@media(max-width: 425px) {
.point_ttl li {
    font-size: 1.15rem;
	line-height: 1.6rem;
	letter-spacing: 0;
    }
.point_ttl li:first-child{
max-width: 38px; 
margin: 0 auto 10px;
}
.br_2{
display: none;	
	
}
}
/*各point共通*/



/*texture*/
.texture h4{ 
 max-width: 600px;
 margin: 0 auto 20px;
 text-align: center;	
 font-weight: 400;
 font-size: 1.35rem;
 line-height: 2rem;
 letter-spacing: 0.08rem;
 color: #216328;
}
.texture p{
 letter-spacing: 0.04rem;
 text-align: center;
}
.texture_img{
 max-width: clamp(600px,80vw,960px);
 margin: 36px auto 10px;
display: flex; 
justify-content: center;	
padding-inline: 30px; 
gap:1vw;
	
}
.texture_img ul li{
 list-style: none;
 text-align: center;
 font-weight: 400;
 line-height: 2.4rem;
 border: 1px solid #437139;
}
.texture_img 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_img ul li:nth-child(2){
 line-height: 2rem;
  font-size: clamp(14.5px, 15.5 / 700 * 100vw, 15.5px);
}
}

@media(max-width: 525px) {	
.texture {
    margin: 70px auto 60px;
}
.texture h4 {
   font-size: clamp(17.5px, 20 / 525 * 100vw, 20px);
    }	
.texture p {
   font-size: clamp(14px, 16 / 525 * 100vw, 16px);
	letter-spacing: 0.01rem;
}
.texture_img {
 padding-inline: 10px;
}
    }	

@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;
	font-size: 1.1rem;
    line-height: 1.6rem;
}
.how_to_use ul li{
	list-style: none;
	padding-block: 8px;
}




@media(max-width: 860px) {
.how_to_use ul {
    font-size: 0.95rem;
}	
.howto_ol{
 padding: 10px 6.4vw;
}	
	}
		
@media (max-width: 768px) {
    .howto_tip {
     max-width: 680px;
	 margin: 10px 6.4vw 0;
    }
	}

@media(max-width: 600px) {
.howto_ul{
   padding: 0 40px; 
}
.how_to_use ul {
    flex-direction: column;
    }
  .how_to_use ul li:first-child {
	padding: 0.25rem 0.6rem 0.35rem 0.8rem;	
		
	}
.how_to_use ul li:nth-child(2) {
    max-width: 100%;
	padding: 0 5px;
}	
.how_to_use ul li:nth-child(3) {
	max-width: 100%;
	padding: 0 10px;
}	
.howto_tip {
   margin: 10px clamp(20px, 9vw, 48px) 0;
    }	
.attention {
    padding: 0 10px 10px;
}		
	
}	

@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(14.5px,15/425*100vw,15px);
    }
 .howto_img {
     max-width: clamp(280px, 80vw, 320px);
    }	
.howto_ol h4 {
    font-size: 1.15rem;
}	
.howto_ol {
    margin: 30px auto 0;
}	
.howto_ol ol li {
    font-size: 0.8rem;
}	
}
/*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*/