@charset "utf-8";
body{
color: #332e2a;
}
img {
  width: 100%;
}
.text {
   display: inline-block;
}
.main_inner{
    max-width: 960px;
    margin: 70px auto;
}
.main_inner section:nth-of-type(2) {
  border-image: conic-gradient(#d3cdab33) fill 0 / 1 /0 100lvi;
}

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

section.point01,.point02,.point03{
	margin-bottom: 80px;
	padding: 0 4.2vw;
}
.texture{
margin: 90px auto 60px;
}
.how_to_use{
margin: 30px auto;	
}
.br,.br_2{
display: block;		
}
.tokusei_01{
font-size: 0.7rem;
text-align: end;
padding: 0 50px 20px 0;
margin-top: -15px;
}
.color{
color: #f1c414;
font-weight: 400;
}

@media(max-width: 768px) {
.main_inner section:nth-of-type(2) {
    border-image: none;
	background-color: #d3cdab33;
}		
section.features,.glow_line{
 margin: clamp(60px, 20vw, 90px) 0;	
}
section.point01, .point02, .point03 {
    margin-bottom: 60px;
}
	
}


@media(max-width:500px){
section.point01, .point02, .point03 {
    padding: 0 5.2vw;
}
	
}


/*header*/
.hero_area_vita_c_glow_line_brightening_vita_toning_ampoule{
	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_vita_c_glow_line_brightening_vita_toning_ampoule{
	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;
  padding: 0 20px;	
    }		
	}	
/*header*/

	

/*features*/
section.features{
 text-align: center;	
 font-weight: 300;
}
.features_inner{
 padding: 0 90px;
}
.features_inner{
 padding: 0 60px;
}
.features h4{
 font-size: 1.35rem;
 line-height:2.4rem;
 font-weight: 300;
 margin-bottom: 60px;
 letter-spacing: 0.12rem;
}
.span_color{
color:#f7d038e0;
font-weight: 400; 
font-size: 1.7rem;	
}
.features p{
 line-height: 2rem;
 letter-spacing: 0.005rem;
 text-align: justify;
}

.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);	
}
.fuatures_lead{
text-align: start;
max-width: clamp(280px,50%,400px);	
margin: 0 auto;
}
.fuatures_point {
 display: flex;
 justify-content: center;
 gap: clamp(8px, 0.6vw, 20px);
 letter-spacing: 0.05rem;
 font-size: 0.85rem;
 line-height:1.4rem;
 padding: 30px 0;
}
.fuatures_point ul{
 list-style: none;
 width: 33.333%;
 border: 1px solid #303030;
 padding: 6px 0;
}
.fuatures_point ul li:first-child{
 font-size: 1.07rem;	
 font-weight:400;
 padding-bottom: 6px;
 color: #f1c82b;	
}

.annotation{
	text-align: start;
	margin: 0 auto;
}
.annotation span{
  font-size: 0.7rem; 
    
}

@media(max-width: 860px) {	
.features_inner {
    padding: 0 6.4vw;
}
.fuatures_point {
 font-size: 0.8rem;
 padding-top: 24px;
}	
.fuatures_point ul{
  padding: 10px 0;
  margin-bottom: 10px;
}
.fuatures_point ul li:first-child {
    font-size: 0.95rem;
}
.lead_wrapper{
    display: block;
	
    }
.lead_img,.fuatures_lead{
	max-width: 100%;
	}
.lead_img{
 margin-bottom: 20px; 
	}
.br{
display: none;		
}	
}

@media(max-width: 768px) {
 .features h4 {
    font-size: clamp(18px,22.5/768*100vw,22.5px);
	line-height: 2.6rem;
    margin-bottom: 40px;
}
 .span_color {
	color: #f7d038e0;
    font-weight: 400;
    font-size: clamp(22px,28/768*100vw,28px);
}
	
.features p {
    font-size: clamp(14px,15.5/768*100vw,15.5px);
	text-align: start;
	line-height: 1.65rem;
	padding: 0 0.5vw;
}	
.fuatures_point{
  display: block;
}
.fuatures_point ul {
   width: 100%;
}
.fuatures_point ul li:first-child {
    font-size: clamp(16px,18/768*100vw,18px);
}	
	
}

@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;
    }	
.span_color {
  font-size: clamp(18px,21/500*100vw,21px);
    }		
.features p {
    padding: 0 1vw;
	line-height: 1.4rem;
    }	

    }

/*features*/	


/*line*/
.glow_line{
 padding: 60px 60px;
}
.glow_line ul{
 list-style: none;
}
.glow_line h4{
	font-weight: 400;
	font-size: 1.35rem;
	border-left: 3px solid;
	margin-bottom: 20px;
	padding: 6px 18px;
	letter-spacing: 0.08rem;
	line-height: 2.2rem;
}
.glow_line01{
 margin-bottom: 60px;
}
.glow_line01 li:nth-of-type(2){
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.grade_up_img{
  max-width: 60%;
}
.grade_up{
 padding: 10% 3px 0 0;
}
.grade_up li {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 2.4rem;
    letter-spacing: 0.08rem;
    border-bottom: 2px dotted #333; 
	background-color: #ffffffc2;
	text-align: center;
	margin: 10px 5px;
    padding: 3px 8px;
}
.tokusei{
font-size: 0.7rem;
margin-top: -15px;
}

.glow_line02{
 line-height: 1.6rem;
 letter-spacing: 0.06rem;
}
.glow_line02 li:last-child{
 padding: 200px 0;
 background-image: url("../images/products/vitac_line.jpg");
 background-color:rgba(255,255,255,0.3);
 background-blend-mode:lighten;
 background-size: cover;
 background-position: center; 
background-repeat: no-repeat;
}
.glow_line02 li:nth-child(2){
 font-size: 1.065rem;
 padding: 18px 10px 30px;
}

.glow_line h5{
	font-weight: 400;
    font-size: 1.4rem;
	border-left: 3px solid;
	padding-left: 14px;
}


@media(max-width: 768px) {
.glow_line01 li:nth-of-type(2) {
    display: block;
}
.grade_up_img {
	padding: 2.4vw 3.2vw;
    max-width: 100%;
}	
.grade_up {
    padding: 0;
}	
	
.glow_line h4,.glow_line h5 {
    font-size: clamp(20px,22/768*100vw,22px);
}	
.glow_line02 {
    font-size: 0.9rem;
}	
.glow_line02 li:nth-child(2) {
    font-size: clamp(14.5px,16/768*100vw,16px);
}	
	
}

@media(max-width: 600px) {
.glow_line {
    padding: 30px 6vw;
}	
 .grade_up {
    padding: 0 10px;
    }
}

@media(max-width: 500px) {
.glow_line h4, .glow_line h5 {
 line-height: 2rem;
font-size: clamp(18px, 20 / 500 * 100vw, 20px);
    }	
.grade_up li {
    font-size: clamp(16px,17.5/500*100vw,17.5px);
}	
.glow_line02 li:last-child {
    padding: 120px 0;
}	
.glow_line02 li:nth-child(2) {
 line-height: 1.45rem;
 padding: 12px 6px 16px;
    }	
	
}

@media(max-width: 425px) {	
.glow_line h4, .glow_line h5 {
        line-height: 1.8rem;
        font-size: clamp(18px, 20 / 500 * 100vw, 20px);
    }	
.grade_up li {
  line-height: 2rem;
}	
}
/*line*/



/*point01*/
.core_img{
 max-width: clamp(500px,30vw,800px);
 margin: -1vw auto 20px;
}
.point01 ul{
 list-style: none;
 margin: 30px 0;
line-height: 1.4rem;
}
.point01 ul li:nth-child(odd){
display: flex;
align-items: center;
flex-wrap: wrap;
font-size: 1.25rem;
padding: 10px 0 10px 10px;
font-weight: 400;
gap: 5px; 
margin-top: 20px;
}
.point01 ul li:nth-child(even){
padding: 10px 5px;
border-top: 2px dotted;
text-align: justify;
word-break: break-all;
}
.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;
}
.point01 ul li:nth-child(odd) {
    font-size: clamp(16px,19/768*100vw,19px);
}	
	
}

@media(max-width: 500px) {
.point01 ul li:nth-child(odd){
font-size: clamp(16px,18/500*100vw,18px);
}
.point01 ul li:nth-child(even) {
font-size: clamp(14px,16/500*100vw,16px);
}	
.check{
  width: 8px;
  height: 4px;
}		
}

/*point01*/


/*point02*/
.point02_span{
font-size: 0.9rem;
line-height: 1;
}
.point02 h4{
 font-size: 1.2rem;
 font-weight: 400;
 color: #fff;
 background-color: #f5d75e;
 padding: 5px 0 5px 20px;
}
.point02_inner1,.point02_inner2{
 padding: 0 10px;
}
.point02_inner1{
 margin-bottom: 20px;
}
.point02 ul{
 list-style: none;
 line-height: 1.4rem;
}
.point02_ul{
 display: grid;
 grid-template-columns: 0.2fr 0.8fr;
 margin: 0 auto;
 gap: 1.2vw;
}
.point02_ul li:nth-child(1){
 margin-bottom: 20px;
}
.point02_ul_text{
 padding: 0 20px;
 line-height: 1.6rem;
}
.point02_ul .point02_inner_indegredients h4 {
 line-height: 1.4rem;
}


@media(max-width: 768px) {
.point02_ul {
    grid-template-columns: 0.25fr 0.75fr;
    gap: 2vw;
	margin: 0 auto 10px;
}
.point02_ul li:nth-child(1) {
    margin-bottom: clamp(8px,1.2vw,15px);
}
.point02_ul_text {
    padding: 0 10px;
}	
	
}


@media(max-width: 700px) {
.point02 h4 {
    font-size: clamp(16px,19/600*100vw,19px);
    padding: 3px 16px;
}
.point02_ul {
    grid-template-columns: 0.35fr 0.65fr;
}
.point02_ul_h4{
	line-height: 1.2rem;;	
	}
.point02_ul_text {
  font-size:clamp(12.5px,600/15*100vw,15px);
  padding-left: 8px;
  line-height: 1.4rem;
	}
 .point02_inner2 {
    margin-top: -10px;
}	
   
}


@media(max-width: 550px) {
.point02 h4 {
    line-height: 1.4rem;
    }	
.point02_ul {
    grid-template-columns: 0.45fr 0.55fr;
}
.point02_inner1, .point02_inner2 {
    padding: 0 5px;
}	
}


@media(max-width: 500px) {
.point02_ul {
    display: block;
	margin-bottom: 30px;
}
.point02_ul li:nth-child(1) {
   margin-bottom: 0;
    }
.point02_inner1, .point02_inner2 {
    padding: 0 6vw;
}		
.point02_ul_text {
  padding: 10px 10px 0; 
 letter-spacing: 0.04rem;
    }	
.point02 h4 {
   padding: 6px 16px;
    }	
}

/*point02*/


/*point03*/
.point03 h4{
margin: 60px 0 40px;
}
.point03 img{
max-width: clamp(150px,30vw,220px);
}
.point03_ul{
margin: 0 20px;
display: flex;
justify-content: center;
gap:2vw;
font-size: 0.95rem;
}
.point03 ul{
list-style: none;
line-height: 1.6rem;
letter-spacing: 0.01rem;
text-align: center;
}
.point03 ul li:nth-child(2){
font-weight: 400;
font-size: 1.05rem;
letter-spacing: 0.06rem;
padding: 5px 0;
margin-bottom: 8px;
background-color: #f5d75e;
}

@media(max-width: 700px) {
.point03 h4 {
    margin: clamp(30px,50/700*100vw,50px) 0 40px;
}	
.point03_ul {
	display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: clamp(14px,16/700*100vw,16px);
	padding: 0 3.2vw;
    margin: 0;
	gap: 2.4vw;
}
.point03 ul li:nth-child(2) {
    margin-bottom: 10px;
}	
.point03_ul ul{
	margin-bottom: 10px;
}	
.point03 img {
   max-width: 100%;
}
}


@media(max-width: 500px) {
.point03 ul li:nth-child(2) {
    font-size: clamp(14.5px,16.5/500*100vw,16.5px);
}
}

/*point03*/


	
/*各point共通*/
section.water_point {
  padding: 10px 0;
}
.indegredients_ttl{
 font-size: 1.25rem;	
 font-weight: 400;
 line-height: 2rem;
 letter-spacing: 0.1rem;
 padding: 10px 20px;
 border-bottom: 2px dotted; 
 margin: 30px 0;
 text-align: center;
}
.point_ttl {
position:relative;
margin-bottom: 35px;
color: #47413d;	
}
.point_ttl li{
 list-style: none;
 font-size: 1.45rem;
 text-align: center;
 line-height: 2.4rem;
 letter-spacing: 0.05rem;
 font-weight: 400;
}
.point_ttl li:first-child{
text-align: center;	
font-size: 2rem;
margin-bottom: 8px;
color: #f7d038;	
}

	
@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) {
.tokusei_01 {
    font-size: 0.6rem;
    text-align: right;
    margin-top: 50px;
	padding: 0;
	padding-right: 35px;
}	
.point_ttl li {
	font-size: clamp(20px,22/600*100vw,22px);
    line-height: 2.2rem;
}	
.point_ttl li:first-child {
    font-size: clamp(24px,28/600*100vw,28px);
	margin-bottom: 10px;
}	
}
	
@media(max-width: 425px) {
.indegredients_ttl{
        font-size: 1.05rem;
    }
   .point_ttl li {
    font-size: 1.15rem;
	line-height: 2rem;
    }
  .point_ttl li:first-child {
    font-size: 1.45rem;
    }
	.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: #e7c131ed;
}
.texture p{
 text-align: center;
 letter-spacing: 0.04rem;
}
.texture_img{
 max-width: 320px;
 margin: 30px auto 10px;
}

@media(max-width: 700px) {
.texture h4 {
    font-size: clamp(18.5px,700/700*100vw,21px);
}
}

@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;
}
    }	

@media(max-width: 425px) {
.texture {
    margin: 50px auto 40px;
}
.texture_img {
	margin-top: 10px;
    max-width: 280px;
}
.howto_tip p {
    padding: 0 20px;
}	
	
}

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


/*howto*/
.how_to_use ul{
 list-style: none;
 text-align: start;	
 padding-bottom:36px;
 display: flex;
 justify-content: center;
 gap:clamp(19px,1.5vw,30px); 
}
.howto_img{
	max-width: 480px;	
    margin: 0 auto 30px;
}
.howto_ul{
 line-height: 1.4rem;
 margin: 80px auto 0;
}
.how_to_use ul li:first-child{
 font-size: 1.2rem;
 font-weight: 400;
 color: #e7c131ed;
 letter-spacing: 0.02rem;	
 padding: 0.25rem 0.6rem 0.35rem;
 padding-top: 3px;
 border: 2px solid;
 border-radius: 20px;
 height: 22px;
}
.how_to_use ul li:nth-child(2){
 letter-spacing: 0.08rem;
 max-width: clamp(100px, 34vw, 245px);	
}
.how_to_use ul li:nth-child(3){
 padding-left:  3px;
 letter-spacing: 0.05rem;
 max-width: clamp(200px,30vw,342px);
}
.howto_tip{
	max-width: 720px;
	margin: 0 auto;
	padding: 20px 0;
    background-color: #e3e3d69c;
	text-align: center;
	border-radius: 30px;
}
.howto_tip h4{
 color: #f1c414;
 font-size: 1.5rem;
 font-weight: 400;
 letter-spacing: 0.1rem;
 padding-bottom: 16px;
 line-height: 1;
}
.howto_tip p{
 padding: 0 40px;
 text-align: justify;
 line-height: 1.45rem;
}
.howto_ol{
 max-width: 720px; 
 margin: 40px auto 0;
 padding: 10px 0;
 font-weight: 400;
}
.howto_ol h4{
 font-size: 1.15rem;
 margin: 12px 0;
 letter-spacing: 0.04rem;
 font-weight: 400;
 text-align: center;
 border-bottom: 2px solid;
 line-height: 2.4rem;
}
.howto_ol ol li{
 list-style: none;
 line-height: 1.4rem;
 font-size: 0.9rem;
 padding-bottom: 6px;

}
.attention{
padding: 8px 24px;	
}


@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: #eb6935e0;
    color: #e7c131ed;
}
.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_vitac.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*/