@charset "UTF-8";
.lucent .about .title{font-family: var(--mincho);text-align:center;font-size:5vw;margin-bottom:1vw;}
.lucent .about .sub{text-align:center;background:var(--purple02);color:#fff;font-family: var(--mincho);padding:1%;}

.tyusyaku p{font-size: 3.3vw;text-indent: -1.8em;padding-left: 2em;margin-bottom: 1vw;text-align:left;line-height: 1.5;}

.exosome{background:none;position:relative;}
.exosome .deco{font-family: paganini;font-weight: 300;text-transform:uppercase;font-size:20vw;position:absolute;width:200%;text-align:center;left: 50%;
-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-webkit-transform: translateX(-50%);transform: translateX(-50%);color:#f4eff4;top:2vw;line-height:1;z-index:-1;}
.exosome ul{margin-bottom:3vw;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.exosome li{width:48%;margin-bottom:3vw;padding: 3% 3% 5% 3%;text-align:center;background: linear-gradient(45deg, #f4eff4, #e5e9ff);}
.exosome li i{font-family: paganini;font-weight: 300;display:block;text-decoration:underline;}
.exosome li span{font-family: var(--mincho);display:block;font-size:130%;color:var(--purple02);}
.exosome li p{line-height:1.5;}
.exosome-bg{background: #080d21 url(../../images/product/exosome/lucent/lucent-bg.jpg) no-repeat -37vw 0;background-size: 175%;padding: 10vw 0;}

.effect{margin-bottom:15vw;}
.effect .intro img{width:90%;margin:0 auto;}

.features .point{margin:6vw auto 0;width: 90%;}
.features .point li{ background:#e7e0ed;padding:5%;margin-bottom:3%;}
.features .point li span{background: var(--purple02);color: #fff;display:table;margin:0 auto;padding:1% 5%;margin-bottom:1%;border-radius:40px;}
.features .seibun{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: justify;justify-content: center;flex-wrap: wrap;-webkit-justify-content: center;-webkit-flex-wrap: wrap;align-items: start;margin-top:4vw;}
.features .seibun li{width: 29%;margin: 0 2% 3vw;}
.features .seibun li p{font-weight:bold;line-height:1.4;font-size: 78%;text-align:center;margin-bottom:1vw;}
.features .seibun li span{background:#f3eff4;display:block;text-align:center;font-size:90%;}
.features .seibun li img{border-radius:50%;margin-bottom:1vw;}
.features .flow {width: 90%;margin: 6vw auto 3%;}
.features .flow li{padding:6vw;}
.features .flow li img{margin-bottom:2vw;}
.features .content .flow img{margin-bottom:2vw;width:90%;margin:0 auto 3vw;}
.features .flow span{background:var(--purple01);color:#fff;font-weight:bold;padding:1% 5%;}
.tyusyaku.ast{width: 90%;margin: 0 auto;}

.flow {margin:5vw 0;}
.flow .set{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: justify;justify-content: space-between;flex-wrap: wrap;-webkit-justify-content: space-between;-webkit-flex-wrap: wrap;align-items: start;margin-bottom:4vw;}
.flow .set img{width: 35%;}
.flow .set .textbox{width: 62%;}
.flow .set .textbox p{font-size:90%;}
.flow .set span{background: var(--purple01);font-family: paganini;font-weight: 300;color:#fff;padding:2% 4%;}

.exo-lineup .tyusyaku{margin-top:20px;}

.step-in{background:#f2edf5;padding:8%;}
.step-in img{width:80%;margin:0 auto;}
.step-in p{text-align:center;font-weight:bold;}

/* ============================================= 
pc
================================================*/
@media screen and (min-width: 769px) { 
.about .text p{font-size: 18px;}
.lucent .about .title{font-size:24px;text-align:left;}
.exosome .deco{font-size: 100px;top: 14px;letter-spacing: 10px;}
.exosome ul{margin-bottom:20px;}
.exosome li{margin-bottom:20px;width:49%;padding: 20px;}
.tyusyaku p{font-size:13px;margin-bottom: 6px;}
.exosome-bg{background: #080d21 url(../../images/product/exosome/lucent/lucent-bg.jpg) no-repeat 0 0;background-size:100%;}
.features .point{width:90%;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;margin: 30px auto 24px;}
.features .point li{width:49%;margin-bottom:0;padding: 30px;}
.features .seibun {width:90%;margin:0 auto;}
.features:nth-of-type(4){margin-bottom:40px;}
.features .flow{width:90%;margin: 30px auto 20px;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.features .flow li{padding:30px;width:31%;margin-bottom:0;display: block;}
.features .flow li img{width:100%;margin-bottom:20px;}
.features .flow li span{margin: 0 auto 7px;display: table;padding: 2px 20px;}
.features .flow li p{text-align:center;}
.features .flow li:after{margin-left: 0;border: 40px solid transparent;border-left: 20px solid #f4eff4;left: inherit;right: -87px;top: 10%;bottom: inherit;}
.tyusyaku.ast{padding: 0;}

.effect{margin-bottom:120px;}
.lucent .exo-lineup .flow .set img{width:20%;margin-bottom: 0;}
.lucent .exo-lineup .flow .set span{padding:3px 20px;display:table;margin-bottom:10px;}
.lucent .exo-lineup .flow .set .textbox{width:77%;}

.step-in{width:100%;padding: 40px;}
.exo-lineup .step-in ul{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;width:100%;}
.exo-lineup .step-in li{width:25%;border:none;margin-bottom:0;padding-bottom:0;}
}


@media screen and (min-width: 1000px) {
.effect .intro img{width: 450px;margin: -50px 0 0 auto;}
.exosome li{width:24%;margin-bottom:0;}
.features .seibun li{width: 16%;margin-bottom: 0;}

.lucent .exo-lineup{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.lucent .exo-lineup .textbox{width: 49%;}
.lucent .exo-lineup .textbox ul{width:100%;}
.lucent .exo-lineup .flow{margin: 30px 0 0 0;}
.lucent .exo-lineup .flow .set img{width:180px;}
.lucent .exo-lineup .flow .set{margin-bottom:20px;-webkit-justify-content: start;justify-content: start;}
.lucent .exo-lineup .flow .set .textbox{width:auto;margin: 0 0 0 31px;}
.step-in{padding:60px;}
}

@media screen and (min-width: 1200px) {
}


  /* retina用 ----------------------------------------------- */ 
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) {
.lucent .exosome-bg{background-image: url(../../images/product/exosome/lucent/lucent-bg.jpg);}
}