@charset "UTF-8";
.breadcrumb{margin-top:0;}
.second-text{width:100%;}
.second-text img{width:100%;margin-bottom:5%;}
.subhero{background:url(../../images/product/se/herosp.jpg);background-size: cover;margin-top: 16vw;padding: 75vw 0 13vw 0;}
.subhero .textbox{text-align:center;color:#fff;line-height:1.5;}
.subhero .sub{font-family:var(--mincho);font-size: 6.4vw;font-weight:600;letter-spacing:0.08em;font-feature-settings: "palt";}
.subhero .txt{font-family:var(--mincho);margin-bottom: 5vw;letter-spacing: 0.08em;}
.subhero .title span{font-family: paganini;font-weight: 300;display:block;font-size: 12vw;line-height:1;letter-spacing: 0.08em;}

.about{width:90%;margin:0 auto;}
.about .sub{color:var(--purple02);font-family:var(--mincho);font-size: 5.5vw;line-height:1.5;font-weight:600;text-align:center;margin-bottom:3vw;letter-spacing: 0.08em;}
.about .recom{background:#e2dfed;padding:0 5% 5% 5%;}
.about .recom .tit{background:var(--purple01);color:#fff;display:table;margin: 0 auto 0;font-weight:bold;padding:1% 8%;position: relative;top: -2vw;}  
.about .recom li{position:relative;border-bottom:1px dashed #ccc;padding:2% 0 2% 5%;}
.about .recom li:nth-last-child(1){border:none;}
.about .recom li:before{    content: '\f058';font-family: 'icon';color:var(--purple01);position:absolute;left:0;}

.movie{background: linear-gradient(to bottom, #926e91 , #d6b8d5);padding: 10vw 5% 15vw 5%;}
.movie .tit{color:#fff;font-family: paganini;font-weight: 300;text-align:center;font-size:8vw;}
.movie .area{text-align:center;}
.movie .area iframe{width:100%;height:60vw;}

.approach{background: url(../../images/product/se/apsp.jpg)no-repeat top center,#eeedf6;background-size: 100%;padding: 28vw 5vw 12vw 5vw;}
.approach .deco{font-family: paganini;font-weight: 300;font-size: 11vw;white-space: nowrap;line-height: 1.2;margin-bottom: 3vw;color: #fff;opacity: 0.8;}
.approach 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: 110%;position: relative;left: -5%;}
.approach li{width:32%;}
.approach .tit{color: var(--purple02);font-family: var(--mincho);font-size: 5vw;font-weight: 600;}

.features{background: linear-gradient(to bottom, #926e91 40vw, #d6b8d5);padding: 14vw 5%;}
.features .title{color:#fff;text-align:center;font-family:var(--mincho);font-size:6vw;line-height:1.4;margin-bottom: 4vw;}
.features .title b{display:block;font-size:150%;}
.features .itemslist >li{background:#fff;padding:6%;margin-bottom:6vw;} 
.features .itemslist .pic img{margin-bottom:0;}
.features .itemslist .pic .setu{padding: 3% 2%;font-weight:bold;text-align: center;background: var(--purple01);color: #fff;line-height: 1.2;font-size: 90%;}
.features .itemslist .mds{font-family:var(--mincho);font-size:5vw;line-height: 1.6;font-weight:600;margin-bottom: 2vw;color: var(--purple02);text-align: center;}
.features .itemslist .mds small{font-size:50%;}
.features .itemslist span{display:table;background:#fff;color: var(--purple02);margin:0 auto;padding:0 4%;border-radius:60px;margin-bottom: 2vw;font-size: 90%;}
.features .itemslist .sub{font-family:var(--mincho);text-align:center;font-size:5vw;margin-bottom: 1vw;line-height: 1.3;}
.features .items > li{background:#f0e9f7;padding:4vw;margin-bottom: 5vw;}
.features .check li{position:relative;border-bottom:1px dashed #ccc;padding:2% 0 2% 5%;}
.features .check li:nth-last-child(1){border:none;}
.features .check li:before{content: '\f058';font-family: 'icon';color:var(--purple01);position:absolute;left:0;}
.features .itemslist .deco01{font-family: paganini;font-weight: 300;text-decoration:underline;}
.features .box .in{margin-bottom:5%;}
.features .box ul{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.features .box li{width:49%;text-align:center;font-size: 85%;line-height: 1.3;letter-spacing: -0.04em;margin-bottom: 2vw;}
.features .box li img{width: 60%;margin:0 auto 2vw;}
.features .box .sub{background:var(--purple01);color:#fff;margin-bottom:2vw;border-radius:50px;padding: 1%;}
.features .box .tit{text-align:center;font-family: var(--mincho);font-size: 4vw;line-height: 1.45;}
.features .box .tit b{display:block;font-size:120%;background: linear-gradient(transparent 60%, #f8ebf8 60%);}
.features .features01 .pic{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;margin-bottom:3%;}
.features .features01 .pic li{width: 49%;}
.features .features02 .pic li{background:#f0e9f7;padding:5%;margin-bottom:5%;}
.features .features03 .tit{text-align:center;margin-bottom: 0vw;font-weight: bold;font-size: 120%;}
.features .features03 .tit span{display:inline-block;margin-right:1vw;}
.features .features03 .items img{width:50%;margin:0 auto 4vw;}
.features .features04 .pic{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.features .features04 .pic li{width:49%;}
.features .features04 .pic img{margin-bottom:2vw;}
.features .features04 .pic p{text-align:center;font-size: 85%;line-height:1.3;letter-spacing: -0.04em;}
.features .features04 .sub{font-family:var(--gothic);font-size:4vw;font-weight:bold;}
.features .features04 .tit{display:table;margin:0 auto 2vw;background:var(--purple01);color:#fff;font-weight:bold;padding:0 5%;border-radius:40px;}

.lineup{width:90%;margin:0 auto;}
.lineup li{border-bottom:1px dashed #ccc;padding-bottom: 8%;margin-bottom: 10%;}
.lineup .name{font-family: var(--mincho);font-size: 6vw;line-height: 1.6;font-weight: 600;margin-bottom: 1vw;color: var(--purple02);text-align: center;}
.lineup .sub{background:#f4f4f4;display:table;margin: 0 auto 3vw;padding:0 8%;border-radius:50px;}

.trial{background:#e5e1ec;padding:5%;}
.trial p{font-family: var(--mincho);font-size: 5vw;line-height:1.6;border-bottom:1px solid #ccc;padding-bottom:5%;}
.trial p span{display:block;font-size: 84%;}
.trial dt{background:#fff;text-align:center;margin-bottom:2%;}
.trial dd span{display: block;line-height:1.3;padding:0 0 0 4%;position:relative;}
.trial dd span:before{content:"・";position:absolute;left:0;}

.step{width:90%;margin:0 auto;}
.step .itemslist > li{border:1px solid #ccc;padding:5%;margin-bottom: 7vw;position:relative;}
.step .itemslist > li:after{content: '\e911';font-family: 'icon';right:50%;bottom: -7vw;transform: translateX(50%);position:absolute;color: var(--purple01);}
.step .itemslist > li:nth-last-child(1):after{content:none;}
.step .itemslist ul{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;justify-content: center;}
.step .itemslist ul li{width:48%;margin:0 1%;}
.step .icon {text-align:center;}
.step .icon img{display:inline-block;width:15%;margin-bottom: 1%;}
.step .itemslist > li p{text-align:center;}
.step .itemslist .tit{text-align:center;font-family:var(--mincho);font-size:120%;}
.step .itemslist .tit span{display:inline-table;background:#e5e1ec;padding:2% 4%;line-height:1;font-size:80%;margin-right:10px;border-radius:40px;}

.skintype{padding: 0 0 15vw 0;}
.skintype >img{width:200%;position:relative;left:-50%;}
.skintype .title{text-align:center;position:relative;margin: -12vw auto 14vw;position:relative;}
.skintype .title:after{content:"";width:3px;height:6vw;border-left:2px dotted #ccc;position:absolute;left: 49%;bottom: -9vw;}
.skintype .title span{font-size:5.5vw;display:block;font-family:var(--mincho);}
.skintype .txt{width:90%;margin:0 auto 5vw;}
.skintype ul{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;width:80%;margin: 0 auto 6%;}
.skintype li{width: 100%;margin-bottom:9vw}
.skintype li img{width:60%;margin:0 auto 3%;}
.skintype li p{text-align:center;font-family:var(--mincho);font-size:5vw;margin-bottom:3%;}
.skintype .checkbox span{display:table;position:relative;background:#ccc;margin-bottom:1%;width:100%;border-radius:30px;padding:1% 0 1% 9%;}
.skintype .checkbox span:before{content: '\f058';font-family: 'icon';position:absolute;left:4%;}

.skintype li:nth-child(1) .checkbox span{background:#ebebeb;}
.skintype li:nth-child(1) .checkbox span:before{color:#b6b6b6;}
.skintype li:nth-child(2) .checkbox span{background:#faeced;}
.skintype li:nth-child(2) .checkbox span:before{color:#dfa5a2;}
.skintype li:nth-child(3) .checkbox span{background:#e9eff2;}
.skintype li:nth-child(3) .checkbox span:before{color:#93b5cd;}

/* ============================================= pc
================================================*/
@media screen and (min-width: 769px) {
.second-text img{margin-bottom: 20px;}
.subhero{margin-top:100px;}
.subhero .sub{font-size:40px;}
.subhero .txt{font-size:20px;}
.subhero .title span{font-size:80px;}

.about{max-width:1200px;width: 95%;}
.about .sub{font-size:30px;margin-bottom: 20px;}
.about .recom{padding: 10px 30px 30px 30px;}
.about .recom .tit{padding:3px 20px;top:-20px;}
.about .recom ul{text-align:center;}
.about .recom li{display:inline-block;border:none;padding: 0 0 0 20px;margin-right:40px;}
.about .recom li:nth-last-child(1){margin:0;}

.movie{padding: 100px 0 110px 0;}
.movie .inner{max-width:1200px;margin:0 auto;width:95%;}
.movie .tit{font-size:60px;line-height: 1;}
.movie .area{max-width: 800px;margin: 0 auto;}
.movie .area iframe{height:400px}

.approach{background: url(../../images/product/se/ap-bg.jpg) no-repeat top right -700px, #fbfaff;background-size: cover;padding: 80px 2% 77px 2%;position: relative;}
.approach .tit{font-size: 28px;}
.approach .deco{color: var(--purple01);opacity: 0.2;margin-bottom: 10px;font-size: 70px;}
.approach .inner{width: 70%;margin-bottom: 40px;}
.approach ul{width:95%;max-width: 700px;margin: 0;left: 0;}

.features{padding: 120px 2% 50px 2%;}
.features .title{font-size:40px;margin-bottom:50px;}
.features .itemslist span{margin-bottom:10px;}
.features .itemslist .deco01{font-size:20px;margin-bottom:10px;}
.features .itemslist {max-width:1200px;margin:0 auto;}
.features .itemslist >li{padding: 50px 30px 50px 30px;margin-bottom: 40px;}
.features .itemslist .mds{font-size: 28px;margin-bottom: 20px;line-height: 1.3;}
.features .itemslist .sub{font-size:24px;margin-bottom: 20px;}
.features .box .in{margin-bottom:30px;}
.features .box .sub{font-size:18px;padding:10px;max-width:400px;margin:0 auto 20px;}
.features .box .tit{font-size:20px;}
.features .box .tit b{display:table;margin:0 auto;}
.features .pic{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.features .pic > li{width: 49%;}
.features .items{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.features .items > li{width: 49%;margin-bottom: 20px;padding: 30px;}
.features .features02 .pic li{margin-bottom:20px;}
.features .features03 .items img{width:100%;margin-bottom:10px;}
.features .features03 .tit span{margin-bottom:10px;}
.features .features04 >img{max-width:450px;margin:0 auto 40px;}
.features .features04 .tit{margin-bottom:10px;}
.features .features04 .sub{font-size:20px;}
.features .features04 .pic img{margin-bottom:10px;}
.features .features05 >img{max-width:420px;margin:0 auto 40px;}
.features .features05 img.pic01{max-width:420px;margin:0 auto 40px;}

.features .box ul{ -webkit-justify-content: center;justify-content: center;}
.features .box li{width: 18%;max-width: 125px;margin-bottom: 20px;}
.features .box li img{width:80%;max-width: 128px;margin-bottom: 20px;}

.lineup{width:95%;max-width:1200px;}
.lineup ul{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.lineup li{width:48%;padding-bottom: 0;margin-bottom: 50px;border: none;}
.lineup .name{font-size:30px;margin-bottom: 10px;}
.lineup .sub{margin-bottom:20px;}

.trial p{font-size: 27px;padding-bottom:20px;}
.trial dd span{line-height:1.5;padding-left:15px;}

.step{width:95%;}
.step .itemslist > li{padding:30px;margin-bottom: 40px;}
.step .itemslist > li:after{bottom:-40px;}
.step .itemslist .tit span{padding:10px 30px;}

.skintype{max-width:1200px;}
.skintype >img{max-width:1200px;left:0;margin:0 auto}
.skintype .title {margin: -50px auto 100px;}
.skintype .title span{font-size:40px;}
.skintype .title:after{bottom: -75px;height:50px;}
.skintype .txt{text-align:center;margin-bottom: 50px;}
.skintype ul{max-width: 1200px;margin-bottom: 40px;width: 94%;}
.skintype li{width:32%;margin-bottom:0;}
.skintype li p{font-size:22px;}
.skintype .checkbox span{font-size:14px;line-height:1.2;padding:10px 20px 10px 30px;margin-bottom:6px;}
.skintype .checkbox span:before{left:10px;}
}

@media screen and (min-width: 960px) {
.subhero{background: url(../../images/product/se/hero.jpg) top left -290px;background-size: 2000px;position:relative;padding: 130px 0 150px 0;}
.subhero .textbox{width:50%;margin: 0 0 0 auto;}
.subhero .txt{margin-bottom:30px;}
.subhero .title{font-size:20px;}
.subhero .title span{font-size:60px;}
.about .boxarea{width: clamp(730px, 100%, 1200px);display: grid;gap: 0 50px;grid-template-columns: 1fr 1fr;margin-bottom: 30px;}
.about .boxarea img{order:2;}
.about .sub{text-align:left;}
.lineup li{width:31%;}
.lineup .name{font-size:25px;}
.features .features01 .col2{display: grid;gap: 0 30px;grid-template-columns: 1fr 1fr;}
.features .itemslist .features01 .mds{text-align:left;}
.trial{display: grid;gap: 0 30px;grid-template-columns: 1fr 1fr;padding: 40px;max-width:1200px;}
.trial img{margin-bottom:0;}
.trial p span{font-size:18px;}
.step{max-width:1200px;}
.step .itemslist > li{margin-bottom:30px;}
.step .itemslist{display: grid;gap: 0 30px;grid-template-columns: 1fr 1fr;}
.step .itemslist > li:after{content: '\e913';bottom: 50%;right: -26px;transform: inherit;}
.step .itemslist > li:nth-child(even):after{content:none;}

@media screen and (min-width: 1000px) {
.subhero{margin-top: 105px;}
}

@media screen and (min-width: 1200px) { 
.subhero{padding: 320px 0;background: url(../../images/product/se/hero.jpg) top center;background-size:cover;}
.subhero .textbox{right: calc(50% - 630px);position: absolute;width: 600px;top: 50%;transform: translateY(-50%);}
.subhero .sub{font-size:50px;}
.subhero .txt{font-size: 22px;}
.subhero .title{font-size:20px;}
.subhero .title span{font-size:96px;}

.approach{background: url(../../images/product/se/ap-bg.jpg) no-repeat top right -350px , #fbfaff;background-size: contain;padding: 180px 2% 570px 0;}
.approach .inner{width: 760px;position: absolute;left: calc(50% - 600px);top: 100px;}
.approach ul{position: absolute;left: calc(50% - 600px);bottom: 80px;}
  
.features .items > li{width: 32%;}
.features .itemslist >li >p{text-align:center;}
.features .itemslist >li >p.att{text-align:left;}
.features .box li{margin-bottom:0;width: 125px;}
.features .box{display: grid;grid-template-columns: repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);gap: 15px;grid-template-columns: repeat(3, 1fr);grid-template-rows: 80px 1fr 1fr;height: 580px;width: 1000px;margin: 0 auto;}
.features .box .tit{grid-column: span 3 / span 3;}
.features .box .in:nth-child(2){grid-column: span 3 / span 3;grid-row-start: 2;}
.features .box .in:nth-child(3){grid-row-start: 3;}
.features .box .in:nth-child(4){grid-row-start: 3;}
.features .box .in:nth-child(5){ grid-row-start: 3;}
.features .features04 .sub{font-size:17px;}
.features .features03 .items > li{width: 49.5%;padding: 20px;margin-bottom: 10px;}
.features .features03 .items img{display:inline-block;width: 27%;vertical-align:top;}
.features .features03 .items ul{display:inline-block;width: 68%;margin-left: 3%;}
.features .features03 .items li{font-size: 14px;}

.lineup ul{-webkit-justify-content: center;justify-content: center;}
.lineup li{width:22%;margin: 0 1% 40px 1%;}
.skintype li img{width: 88%;}
.skintype li{width:31%;}

}
  /* retina用 ----------------------------------------------- */ 
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) {

}