.content{ padding: 0; background-color: #422769; }

.block-top{ padding-top: 50px;}
.block-bottom{ padding-bottom: 50px;}

.content .buy{ position:fixed; right:0; top:50%; width:54px; height:213px; margin-top:-110px; z-index:99; cursor:pointer; transition:all ease .5s; }
.desktop .content .buy:hover{ opacity:0.8; transition:all ease .5s;}

.title{ display: block; color: #ffff00; font-size: 36px; font-weight: 700; margin-bottom: 30px; position: relative; z-index: 3;}
.title::after{ content: ''; width: 80%; height: 125%; left: 10%; top: -10%; position: absolute; z-index: -1; border: #FFF solid 2px; border-bottom: #cdc3dc solid 2px; transform:skewX(-20deg); box-shadow: rgba(0,0,0,0.3) 3px 3px 5px; background: #1f0058;
background: -moz-linear-gradient(left,  #1f0058 0%, #38146c 50%, #1f0058 100%);
background: -webkit-linear-gradient(left,  #1f0058 0%,#38146c 50%,#1f0058 100%);
background: linear-gradient(to right,  #1f0058 0%,#38146c 50%,#1f0058 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f0058', endColorstr='#1f0058',GradientType=1 );
}
.title span{ display: inline-block; padding: 0 10px; }

.section-kv{ width: 100%; max-width: 1920px; margin: 0 auto;}
.section-kv .container{ width:100%; max-width:100%; display: flex; justify-content: center; overflow: hidden;}
.section-kv .kv{ width: 100%; max-width: 1920px;}
.section-kv .kv.pc{ display: block;}
.section-kv .kv.mb{ display: none;}

.section-stores{ background-color: #FFF; }
.section-stores .container{ }
.section-stores .store-title{ color: #23035b; font-size: 46px; font-weight: 700; margin-bottom: 20px;}
.section-stores .store-title::after{ display: none;}
.section-stores .store-title span{ padding: 0 5px; border-bottom: #23035b solid 2px; border-top: #23035b solid 2px;}
.section-stores .list{ width: 100%; max-width: 800px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center;}
.section-stores .list li{ width: 31.33%; margin:15px 1%; display: flex; justify-content: center; align-items: center;}
.section-stores .list li a{ display: block; transition: all ease 0.3s;}
.section-stores .list li a .costco{ color: #0060a9; font-size: 30px; font-weight: 600;}
.desktop .section-stores .list li a:hover{ opacity: 1; transition: all ease 0.3s;}
.section-stores .list li img{}

.section-info{ background: url("../images/products/v-lutein/bg_info.jpg"); background-size: cover;}
.section-info .container{  }
.section-info .title{ top: 0%; margin-bottom: 30px;}
.section-info h2{ color: #5e2091; font-size: 30px; font-weight: 500; margin-bottom: 20px;}
.section-info .flex{ display: flex; padding: 20px 3% 20px; /*background-color: #FFF;*/ text-align: left;}
.section-info .flex .box{}
.section-info .flex .box.left{ width: 45%;}
.section-info .flex .box.right{ width: 55%; padding-left: 2%; display: flex; flex-direction: column; justify-content: center;}
.section-info .flex .box figure{ margin: 0 auto;}
.section-info .flex .box figure img{ width: 100%; max-width: 400px;}
.section-info .flex .box figcaption{ color: #5e2091; font-size: 25px; font-weight: 400; line-height: 1.5; text-align: center; margin-bottom: 10px;}
.section-info .flex .box p{ font-size: 20px; line-height: 1.5; }
.section-info .flex .box p span{ color: #5e2091;}


.section-feature{ background: #220d5e url("../images/products/v-lutein/bg_feature.jpg") top center no-repeat;}
.section-feature .container{ }

.section-feature .outter-box{ width: 95%; max-width: 1000px; background-color: #fff; border-radius: 30px; padding: 30px 15px; margin: 0 auto 50px;}
.section-feature .outter-box .label{ border-bottom: #492a7c solid 2px; text-align: left; margin-bottom: 10px;}
.section-feature .outter-box .label span{ display: inline-block; background-color: #492a7c; color: #fff; padding: 5px 20px; margin: 0 0 0 10px; border-top-left-radius: 15px; border-top-right-radius: 15px; font-weight: 500; letter-spacing: 2px; }

.section-feature .flex{ display: flex; margin:0 auto 30px; text-align: left;}
.section-feature .flex.flex-row-reverse{ flex-direction: row-reverse;}
.section-feature .flex.flex-5in1{ width: 100%; max-width: 940px; margin-bottom: 50px; }
.section-feature .flex.flex-5in1 img{ user-select: none; }
.section-feature .flex.flex-gif{  margin: 0 auto;}

.section-feature .flex .box{ width: 50%; position: relative; border: #FFF solid 0px;}
.section-feature .flex .box.gif{ /*width: 60%;*/ position: relative; }
.section-feature .flex .box.gif img{ width: 100%; max-width: 100%;}
.section-feature .flex .box.gif .item{ position: absolute; top: 0; left: 0; opacity: 0;}
.section-feature .flex .box.gif .f{ transform: scale(1.3); }
.section-feature .flex .box.gif .t{ transform: scale(0.8); }
.section-feature .flex .box.gif .e{ transform: scale(1.1); }

.section-feature .flex .box.tvc{ }
.section-feature .flex .box.tvc .title{ width: 100%; max-width: 700px; height: auto; margin: 0 auto;}

.section-feature .flex .box.info{ padding: 0 4% 0 10px; background-color: #FFF;}
.section-feature .flex .box .key{ width: 150px; margin-bottom: 5px;}
.section-feature .flex .box h4{ font-size: 28px; font-weight: 500; color: #5e2091; margin-bottom: 10px;}
.section-feature .flex .box p{ font-size: 20px; line-height: 1.5; margin-bottom: 10px;}
.section-feature .flex .box p span{ color: #ff7500; }
.section-feature .flex .box .note{ font-size: 13px; line-height: 1.3; word-break: break-all;}
.section-feature .flex .box .subtitle{ position: absolute; top: 0; left: 5%; width: 90%;}
.section-feature .flex .box .subtitle h5{ color: #ffff00; position: absolute; top: 10%; left: 10%; width: 90%; text-align: center; font-size: 32px; font-weight: 500; line-height: 1.2;}

.animation-box{ width: 100%; margin: 0 auto; position: relative; overflow: hidden;}	
.animation-box .item{ position: absolute; top: 0; left: 0; opacity: 0;}    
.animation-box1 .a, .animation-box1 .b, .animation-box1 .c{  transform: translateY(20px);  transform: scale(1.2);  }
.animation-box1 .text{ opacity: 0; transform: translateY(15px); position: absolute; top: 0; left: 0; }
.animation-box1 .gap{ border-left: #d5c0e7 dashed 2px; border-right: #d5c0e7 dashed 2px; position: absolute; top: 29%; left: 31%; width: 21.8%; height: 52%; transform: scaleX(0);}
.animation-box1 .gap::before{ content: ''; width: 100%; height: 2px; top: 5px; left: 0; background-color: #d5c0e7; position: absolute;}

.animation-box2 .text{ opacity: 0; transform: scale(1.2);}
.animation-box2 .arr{ opacity: 0; }
.animation-box2 .hand{ opacity: 1; }



.section-target{ background-color: #FFF;}
.section-target .container{ }
.section-target .list{ width: 100%; max-width: 900px; margin: 0 auto; display: flex; justify-content: space-between; }
.section-target .list li{ width: 32%; }
.section-target .list li figcaption{ margin-bottom: 10px;}
.section-target .list li figcaption h4{ font-size: 32px; color: #53287c;}
.section-target .list li figcaption p{ font-size: 22px; margin-bottom: 0;}
.section-target .list li figure{ }
.section-target .list li figure img{ width: 90%; border-radius: 10px; margin:0 auto;}


.section-review{ background: #1f0058 url("../images/products/v-lutein/bg_review.png") center bottom no-repeat;}
.section-review .container{}
.section-review .title{ margin-bottom: 50px;}
.section-review .list{ width: 90%; max-width: 860px; margin: 0 auto; text-align: left;}
.section-review .list li{ background-color: #fff; border-radius: 20px; display: flex; margin-bottom: 30px; position: relative; overflow: hidden;}
.section-review .list li figure{ width: 24%; }
.section-review .list li figure img{  }
.section-review .list li figcaption{ width: 76%; color: #000; padding: 7px 2.5% 0; margin: 0 auto;}
.section-review .list li figcaption h3{ font-size: 30px; color: #492a7c; letter-spacing: 2px; border-bottom: #ff7500 solid 1px; padding-bottom: 5px; margin-bottom: 7px;}
.section-review .list li figcaption h3 span{ font-size: 20px; padding-left: 3px; }
.section-review .list li figcaption p{ font-size: 20px; line-height: 1.5; margin-bottom: 0;}
.section-review .list li figcaption p span{ color: #ff7500; font-weight: 400;}
.section-review .list li figcaption p span.mask{ width: 20px; height: 20px; top: 3px; position: relative; display: inline-block; background-color: #9e9e9e;}


/*	RESPONSIVE:  */
@media only screen and (max-width:1500px) {

.section-kv .container .kv.pc{ max-width: 1600px;}
	
}

/*	RESPONSIVE:  */
@media only screen and (max-width:1280px) {

}


/*	RESPONSIVE:  */
@media only screen and (max-width:1080px) {
	
.content{  }
.content .buy{ width:40px; height:auto; }

.section-kv .container .kv.pc{ max-width: 1500px;}

}

/*	RESPONSIVE:  */
@media only screen and (max-width:1000px) {

.section-kv .container .kv.pc{ max-width: 1020px;}
	
.section-stores .title{ font-size: 32px; font-weight:500; }
.section-stores .list{ width: 94%; max-width: 500px; margin: 0 auto;}
.section-stores .list li{ width: 47%; margin: 0 1.5% 20px; }

.section-info .title{ }
.section-info h2{ font-size: 22px; }	
.section-info .flex{ display: block; padding: 20px 2% 20px; width: 90%; max-width: 500px; margin: 0 auto;}
.section-info .flex .box{}
.section-info .flex .box.left{ width: 100%; margin-bottom: 30px;}
.section-info .flex .box.right{ width: 100%; padding-left: 0;}
.section-info .flex .box figure{ margin: 0 auto;}
.section-info .flex .box figure img{ margin: 0 auto;}
.section-info .flex .box figcaption{ font-size: 25px; }
	
.section-feature{ background-size: 1000px auto;}
.section-feature .flex{ display: block; width: 95%; max-width: 500px; }
.section-feature .flex.flex-row-reverse{ }
.section-feature .flex.flex-5in1{ overflow: hidden; margin-bottom: 0; padding-bottom: 30px; }
.section-feature .flex.flex-5in1 .tvc{ margin-bottom: 20px;}
.section-feature .flex.flex-5in1 .tvc .title{ margin-left: 15px;}
.section-feature .flex.flex-gif{  }
.section-feature .flex .box{ width: 100%; }
.section-feature .flex .box.gif{ width: 100%; }
.section-feature .flex .box.gif img{ margin: 0 auto;}
.section-feature .flex .box.pd{ width: 100%; margin-bottom: 20px; }
.section-feature .flex .box.pd img{ width: 80%; max-width: 350px; height: auto; margin: 0 auto;}
.section-feature .flex .box.info{ display: block; padding: 20px 2% 30px; }
.section-feature .flex .box h4{ font-size: 30px; }
.section-feature .flex .box .subtitle{ top: 0; left: 5%; width: 90%;}
.section-feature .flex .box .subtitle h5{ top: 10%; left: 10%; width: 90%; font-size: 28px; line-height: 1.4;}
.section-feature .flex .box.tvc .title{ width: 90%; margin: 0 auto 30px;}
	
.section-target .list{ display: block; width: 90%; max-width: 500px; margin: 0 auto;}
.section-target .list li{ width: 100%; margin-bottom:30px; }
.section-target .list li figcaption h4{ font-size: 28px; color: #53287c;}
.section-target .list li figcaption p{ font-size: 20px; }
.section-target .list li figure img{ width: 80%; margin: 0 auto;}

.section-review{ background-size: 1280px auto;}
	
}

/*	RESPONSIVE:  */
@media only screen and (max-width:767px){
.section-kv .kv.pc{ display: none;}
.section-kv .kv.mb{ display: block; max-width: 100%;}

.title{ font-size: 30px; font-weight: 700; margin-bottom: 30px; }
.title span{ display: block;}
.section-kv .container .kv{ max-width: 1280px;}
.section-stores .title span{ display: inline;}
	
.section-feature .flex.flex-5in1{ width: 100%; }
.section-feature .flex .box .subtitle{ top: 0; left: 0; width: 100%;}
.section-feature .flex .box .subtitle h5{ top: 5%; left: 5%; width: 95%; font-size: 24px; line-height: 1.4;}
	
.section-review .title{ margin-bottom: 40px;}
.section-review .list{ display: block; width: 80%; max-width: 500px; margin: 0 auto 30px;}
.section-review .list li{ display: block; }
.section-review .list li figure{ width: 100%; padding-top: 0px; }
.section-review .list li figure img{ margin: 0 auto;}
.section-review .list li figcaption{ width: 100%; padding: 10px 3% 20px 5%; }
	
}



/*	RESPONSIVE:  */
@media only screen and (max-width:480px) {


.section-stores .list li a .costco{ font-size: 22px; font-weight: 500;}
}

/*	RESPONSIVE:  */
@media only screen and (max-width:350px) {
.title{ font-size: 25px; font-weight: 500; }


.section-feature .flex .box .subtitle h5{ top: 2.5%; left: 5%; width: 95%; font-size: 24px; line-height: 1.2;}
	

}