@charset "UTF-8";


/*all----------------------------*/
html {
  font-size: 62.5%;
}

main {
  max-width: none;
  overflow: hidden;
}

li {
  list-style: none;
}

.LP_page * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.LP_page {
  color: #717071;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

.LP_page picture,
.LP_page a {
  display: block;
}

.LP_page a {
  transition: opacity .3s;
}

.LP_page a:hover {
  opacity: .6;
}

.LP_page img {
  width: 100%;
  height: auto;
}

.LP_page .page_inner {
  position: relative;
  z-index: 1;
  width: 105rem;
  margin: 0 auto;
  padding-bottom: 16.2rem;
}

.LP_page .page_inner::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100%;
  margin: 0 calc(50% - 50vw);
  background: url(../img/bg_001.jpg) center center / cover no-repeat;
  content: "";
}

/*----------------------------all*/


/*CK対応-----------------------------*/

#Wrap, .wrapTop, .wrapBottom {
  width: 100%;
}

/*----------------------------CK対応*/


/*mv-----------------------------*/
.mv_area {
  padding: 0 0 12rem;
}

.main-ttl {
  width: 100vw;
  margin: 0 calc(50% - 50vw) 26rem;
}

.main-copy {
  margin-bottom: 13rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  font-size: 8.3rem;
  letter-spacing: .025em;
  font-feature-settings: "pkna";
  text-align: center;
  color: #d16b80;
}

.main-lead dt {
  margin-bottom: 3rem;
  font-weight: 600;
  font-size: 2.7rem;
  letter-spacing: .15em;
  font-feature-settings: "palt";
  text-align: center;
}

.main-lead dd {
  font-size: 2rem;
  line-height: 2.4;
  letter-spacing: .15em;
  font-feature-settings: "palt";
  text-align: center;
}
/*-----------------------------mv*/
/*look1--------------------------*/
.each-look {
  padding: 13rem 0 13.5rem;
}

.visual-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: .6rem;
  margin-bottom: 7.5rem;
}

.visual-list li {
  width: 52.1rem;
}

.each-look .sec-ttl {
  margin-bottom: 6.5rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  font-size: 6rem;
  letter-spacing: .05em;
  font-feature-settings: "pkna";
}

.look1 .sec-ttl {
  color: #c9977f;
}

.lead_wrap {
  position: relative;
  margin-bottom: 9rem;
  padding-bottom: 9.5rem;
}

.lead_wrap::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80rem;
  height: 1px;
  background: #717071;
  content: "";
}

.lead {
  font-size: 2.8rem;
  letter-spacing: .15em;
  font-feature-settings: "palt";
}

.lead_wrap .lead:nth-of-type(n+2) {
  margin-top: 1.8rem;
}

.makeup-point {
  position: relative;
  border-radius: 3.2rem;
  width: fit-content;
  margin-bottom: 8rem;
  padding: 3.2rem 3rem 2.5rem;
  background: rgba(255, 255, 255, .7);
}

.makeup-point::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 6.3rem;
  height: 4.9rem;
  margin-right: -3rem;
  background: url(../img/deco_001.svg) center center / cover no-repeat;
  content: "";
  opacity: .7;
}

.makeup-point::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
}

.look1 .makeup-point::after {
  width: 31.85rem;
  height: 33.22rem;
  margin-right: -39.5rem;
  background: url(../img/img_005.png) center center / cover no-repeat;
}

.each-look .makeup-point dt {
  position: absolute;
  top: 0;
  left: 0;
  margin: -1rem 0 0 -2rem;
  font-family: "futura-pt", sans-serif;
  font-size: 2.6rem;
  letter-spacing: .05em;
  font-feature-settings: "pkna";
  transform: rotate(-11deg);
}

.makeup-point dd {
  font-size: 2rem;
  line-height: 1.7;
  letter-spacing: .1em;
  font-feature-settings: "palt";
}

.howto dt {
  margin-bottom: 2.5rem;
  font-family: "futura-pt", sans-serif;
  font-size: 3.4rem;
  letter-spacing: .05em;
  font-feature-settings: "pkna";
}

.procedure-list li {
  font-size: 1.8rem;
  line-height: 1.765;
  letter-spacing: .05em;
  font-feature-settings: "palt";
  white-space: nowrap;
}

.itm-list {
  display: flex;
  justify-content: center;
  margin-bottom: 8.5rem;
}

.look1 .itm-list {
  gap: .8rem;
}

.itm-img {
  margin: 0 auto 1.5rem;
}

.look1 .itm-list li:nth-of-type(1) .itm-img {
  width: 24rem;
}

.look1 .itm-list li:nth-of-type(2) .itm-img {
  width: 31rem;
}

.look1 .itm-list li:nth-of-type(3) .itm-img {
  width: 19.5rem;
}

.look1 .itm-list li:nth-of-type(4) .itm-img {
  width: 26rem;
}

.itm-name {
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: .05em;
  font-feature-settings: "palt";
  text-align: center;
}

.cart-btn {
  width: fit-content;
  margin: 0 auto;
}

.cart-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px #717071;
  border-radius: 10rem;
  width: 21.4rem;
  height: 5.4rem;
  font-size: 1.75rem;
  transition: .3s;
}

.cart-btn a:hover {
  border: none;
  color: #fff;
  background: #c16f80;
  opacity: 1 !important;
}
/*--------------------------look1*/

/*look2--------------------------*/
.look2 .sec-ttl {
  color: #bf785f;
}

.look2 .makeup-point::after {
  width: 25.9rem;
  height: 36.76rem;
  margin-right: -27.5rem;
  background: url(../img/img_015.png) center center / cover no-repeat;
}

.look2 .itm-list {
  gap: 2rem;
}

.look2 .itm-list li .itm-img {
  width: 23rem;
}
/*--------------------------look2*/

/*look3--------------------------*/
.look3 .sec-ttl {
  color: #808a92;
}

.look3 .makeup-point::after {
  width: 25.4rem;
  height: 39.6rem;
  margin-right: -38.5rem;
  background: url(../img/img_025.png) center center / cover no-repeat;
}

.look3 .itm-list {
  gap: .5rem;
}

.look3 .procedure-list li {
  font-size: 1.566rem;
  line-height: 2.043;
  letter-spacing: 0;
}

.look3 .itm-list li .itm-img {
  width: 23rem;
}

.look3 .itm-list li:nth-of-type(2) .itm-img {
  width: 30rem;
}
/*--------------------------look3*/

/*hair-mascara-------------------*/
.hair-mascara_area {
  padding: 15.5rem 0 22rem;
}

.flex-box {
  display: flex;
  gap: 5.5rem;
  margin-bottom: 7.5rem;
}

.hair-mascara_area .sec-ttl {
  position: relative;
  width: 34.8rem;
}

.hair-mascara_area .sec-ttl .txt_S {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 1rem 1rem 0;
  font-weight: normal;
  font-size: 1.5rem;
  letter-spacing: .05em;
  font-feature-settings: "palt";
}

.hair-mascara_area .makeup-point {
  height: fit-content;
  margin: 0;
  padding: 2.5rem 3.8rem 3rem 4.3rem;
}

.hair-mascara_area .makeup-point::before {
  position: absolute;
  top: auto;
  bottom: 0;
  transform: scale(1, -1);
}

.hair-mascara_area .makeup-point::after {
  width: 26.3rem;
  height: 27.5rem;
  margin: 0 -26rem -26rem 0;
  background: url(../img/img_005.png) center center / cover no-repeat;
}

.hair-mascara_area .makeup-point dt {
  margin-bottom: 1.5rem;
  font-family: "futura-pt", sans-serif;
  font-size: 3.46rem;
  letter-spacing: .05em;
  font-feature-settings: "pkna";
}

.hair-mascara_area .makeup-point dd {
  width: 39.5rem;
  font-size: 1.8rem;
  line-height: 1.555;
  letter-spacing: .05em;
  font-feature-settings: "palt";
}
/*-------------------hair-mascara*/
.all-items-btn {
  width: fit-content;
  margin: 0 auto;
}

.all-items-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35.6rem;
  height: 9rem;
  background: #717071;
  font-size: 2.9rem;
  letter-spacing: .05em;
  font-feature-settings: "palt";
  color: #fff;
}

/*profile-----------------------*/
.profile_area {
  width: 116rem;
  margin: 0 auto;
  padding: 28.5rem 0;
}

.profile_area .sec-ttl {
  position: relative;
  width: fit-content;
  margin: 0 auto 11rem;
  padding: 0 3rem;
  background: #fff;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  letter-spacing: .2em;
}

.profile_area .sec-ttl::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 67rem;
  height: 1px;
  background: #717071;
  content: "";
}

.profile_area .flex-box {
  justify-content: space-between;
  align-items: flex-end;
}

.artist-img {
  width: 24.1rem;
  margin-bottom: .5rem;
}

.artist-name {
  margin-bottom: 2.5rem;
  font-weight: bold;
  font-size: 3.6rem;
  letter-spacing: .2em;
  font-feature-settings: "palt";
}

.artist-ttl {
  position: relative;
  width: fit-content;
  margin-bottom: 4.2rem;
  padding: 0 2.7rem 0 3.1rem;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: .1em;
  font-feature-settings: "palt";
}

.artist-ttl::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1rem;
  height: 3rem;
  border: solid 1px #717071;
  border-right: solid 1px transparent;
  content: "";
}

.artist-ttl::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1rem;
  height: 3rem;
  border: solid 1px #717071;
  border-left: solid 1px transparent;
  content: "";
}

.artist-dtl {
  width: 84rem;
  font-size: 2.1rem;
  line-height: 1.476;
  letter-spacing: .099em;
  font-feature-settings: "palt";
}

.artist-sign {
  width: 31.8rem;
  margin: 0 2rem 6rem auto;
}

.brand-logo {
  width: 23.9rem;
  margin: 0 auto;
}
/*-----------------------profile*/
.following-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 5;
  width: 100vw;
  background: #c56b80;
  transform: translateY(100%);
  transition: .3s;
}

.following-nav.up-move {
  transform: translateY(0);
}

.following-nav ul {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-family: "futura-pt", sans-serif;
  font-size: 3rem;
  letter-spacing: .05em;
  font-feature-settings: "pkna";
}

.following-nav li {
  position: relative;
}

.following-nav li:nth-of-type(1)::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(35deg);
  width: 1px;
  height: 3rem;
  background: #fff;
  content: "";
}

.following-nav li a {
  display: flex;
  align-items: center;
  width: fit-content;
  height: 8rem;
  color: #fff;
}

.following-nav li a p {
 padding: 0 5rem;
}

@media (min-width: 769px){
  #CartDrawer .btn-cart {
    width: 35rem;
  }
}
/*Smart phone---------------------------------------------*/
@media screen and  (max-width:767px) {
/*all----------------------------*/
.only_pc {
  display: none;
}

.LP_page .page_inner {
  width: calc(350 * (100vw / 390));
}

#share {
  transition: .3s;
}

#share.move {
  transform: translateY(calc(-30 * (100vw / 390)));
}
/*----------------------------all*/
.LP_page .page_inner {
  width: calc(316.3 * (100vw / 390));
  padding-bottom: calc(68 * (100vw / 390));
}

.LP_page .page_inner::after {
  background: url(../img/bg_001_sp.jpg) center center / cover repeat;
}
/*----------------------------all*/

/*mv-----------------------------*/
.mv_area {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 0 0 calc(38 * (100vw / 390));
}

.main-ttl {
  margin: 0 calc(50% - 50vw) calc(125 * (100vw / 390));
}

.main-copy {
  margin-bottom: calc(35 * (100vw / 390));
  font-size: calc(29 * (100vw / 390));
}

.main-lead dt {
  margin-bottom: calc(15 * (100vw / 390));
  font-size: calc(14 * (100vw / 390));
  line-height: 1.56;
  letter-spacing: .15em;
}

.main-lead dd {
  font-size: calc(12 * (100vw / 390));
  line-height: 1.9166;
  letter-spacing: .025em;
}
/*-----------------------------mv*/
/*look1--------------------------*/
.each-look {
  padding: calc(84 * (100vw / 390)) 0;
}

.visual-list {
  row-gap: calc(2 * (100vw / 390));
  margin-bottom: calc(55 * (100vw / 390));
}

.visual-list li {
  width: calc(157 * (100vw / 390));
}

.each-look .sec-ttl {
  margin-bottom: calc(18 * (100vw / 390));
  font-size: calc(28 * (100vw / 390));
}

.lead_wrap {
  margin-bottom: calc(50 * (100vw / 390));
  padding-bottom: calc(38 * (100vw / 390));
}

.lead_wrap::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(337 * (100vw / 390));
  transform: translateX(-50%);
}

.lead {
  font-size: calc(12 * (100vw / 390));
  line-height: 1.52;
  letter-spacing: .05em;
}

.lead_wrap .lead:nth-of-type(n+2) {
  margin-top: calc(10 * (100vw / 390));
}

.makeup-point {
  border-radius: calc(14.5 * (100vw / 390));
  margin: 0 0 calc(28 * (100vw / 390)) calc(-6.3 * (100vw / 390));
  padding: calc(23 * (100vw / 390)) calc(15 * (100vw / 390)) calc(15 * (100vw / 390));
}

.makeup-point::before {
  width: calc(27.6 * (100vw / 390));
  height: calc(21.3 * (100vw / 390));
  margin-right: calc(-13.5 * (100vw / 390));
  background: url(../img/deco_001_sp.svg) center center / cover no-repeat;
}

.look1 .makeup-point::after {
  width: calc(108 * (100vw / 390));
  height: calc(135 * (100vw / 390));
  margin: 0 calc(-115 * (100vw / 390)) calc(40 * (100vw / 390)) 0;
  background: url(../img/img_005_sp.png) center center / cover no-repeat;
}

.each-look .makeup-point dt {
  margin: calc(-4 * (100vw / 390)) 0 0 calc(-3 * (100vw / 390));
  font-size: calc(12 * (100vw / 390));
  transform: rotate(-7.45deg);
}

.makeup-point dd {
  width: calc(169 * (100vw / 390));
  font-size: calc(12 * (100vw / 390));
  line-height: 1.5;
  letter-spacing: 0;
}

.howto dt {
  margin-bottom: calc(12 * (100vw / 390));
  font-size: calc(19 * (100vw / 390));
}

.procedure-list {
  margin-bottom: calc(25 * (100vw / 390));
}

.procedure-list li {
  font-size: calc(12 * (100vw / 390));
  line-height: 1.5;
  letter-spacing: 0;
  text-indent: -1em;
  padding-left: 1em;
  white-space: normal;
}

.procedure-list li:nth-of-type(n+2) {
  margin-top: calc(10 * (100vw / 390));
}

.itm-list {
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: calc(5 * (100vw / 390));
  margin-bottom: calc(40 * (100vw / 390));
}

.look1 .itm-list {
  gap: 0;
}

.itm-list li {
  position: relative;
  width: calc(145.6 * (100vw / 390));
  padding-bottom: calc(28 * (100vw / 390));
}

.look1 .itm-list li:nth-of-type(1),
.look1 .itm-list li:nth-of-type(2) {
  padding-bottom: calc(38 * (100vw / 390));
}

.itm-list li:nth-of-type(odd) {
  margin-left: calc(-10 * (100vw / 390));
}

.itm-list li:nth-of-type(even) {
  margin-right: calc(-10 * (100vw / 390));
}

.itm-img {
  margin-bottom: calc(10 * (100vw / 390));
}

.look1 .itm-list li:nth-of-type(1) .itm-img {
  width: auto;
}

.look1 .itm-list li:nth-of-type(2) .itm-img {
  width: auto;
}

.look1 .itm-list li:nth-of-type(3) .itm-img {
  width: auto;
}

.look1 .itm-list li:nth-of-type(4) .itm-img {
  width: auto;
}

.itm-name {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(11 * (100vw / 390));
  line-height: 1.1818;
  letter-spacing: 0;
  white-space: nowrap;
}

.itm-list li:nth-of-type(odd) .itm-name {
  margin-left: calc(8 * (100vw / 390));
}

.itm-list li:nth-of-type(even) .itm-name {
  margin-left: calc(-3 * (100vw / 390));
}

.cart-btn a {
  border-radius: calc(100 * (100vw / 390));
  width: calc(122 * (100vw / 390));
  height: calc(31 * (100vw / 390));
  font-size: calc(10 * (100vw / 390));
}
/*--------------------------look1*/

/*look2--------------------------*/
.look2 .makeup-point::after {
  width: calc(93 * (100vw / 390));
  height: calc(136 * (100vw / 390));
  margin: 0 calc(-122 * (100vw / 390)) calc(60 * (100vw / 390)) 0;
  background: url(../img/img_015_sp.png) center center / cover no-repeat;
}

.look2 .itm-list {
  row-gap: calc(15 * (100vw / 390));
}

.look2 .itm-list li .itm-img {
  width: auto;
}

.look2 .itm-list li:nth-of-type(1) .itm-name {
  margin-bottom: calc(-10 * (100vw / 390));
}
/*--------------------------look2*/

/*look3--------------------------*/
.look3 .makeup-point::after {
  width: calc(88 * (100vw / 390));
  height: calc(137 * (100vw / 390));
  margin: 0 calc(-110 * (100vw / 390)) calc(80 * (100vw / 390)) 0;
}

.look3 .itm-list {
  gap: .5rem;
}

.look3 .procedure-list li {
  font-size: calc(12 * (100vw / 390));
  line-height: 1.5;
}

.look3 .itm-list li:nth-of-type(1),
.look3 .itm-list li:nth-of-type(2) {
  padding-bottom: calc(38 * (100vw / 390));
}

.look3 .itm-list li .itm-img {
  width: auto;
}

.look3 .itm-list li:nth-of-type(2) .itm-img {
  width: auto;
}
/*--------------------------look3*/

/*hair-mascara-------------------*/
.hair-mascara_area {
  padding: calc(83 * (100vw / 390)) 0 calc(65 * (100vw / 390));
}

.flex-box {
  display: block;
  margin-bottom: calc(35 * (100vw / 390));
}

.hair-mascara_area .sec-ttl {
  width: calc(200 * (100vw / 390));
  margin: 0 auto calc(52 * (100vw / 390));
}

.hair-mascara_area .sec-ttl .txt_S {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 0 calc(5 * (100vw / 390)) 0;
  font-size: calc(11 * (100vw / 390));
  white-space: nowrap;
}

.hair-mascara_area .makeup-point {
  margin-left: calc(10 * (100vw / 390));
  padding: calc(13 * (100vw / 390)) calc(14 * (100vw / 390)) calc(18 * (100vw / 390));
}

.hair-mascara_area .makeup-point::before {
  position: absolute;
  top: 0;
  bottom: auto;
  transform: scale(1, 1);
}

.hair-mascara_area .makeup-point::after {
  width: calc(110 * (100vw / 390));
  height: calc(135 * (100vw / 390));
  margin: 0 calc(-120 * (100vw / 390)) calc(85 * (100vw / 390)) 0;
  background: url(../img/img_005_sp.png) center center / cover no-repeat;
}

.hair-mascara_area .makeup-point dt {
  margin-bottom: calc(10 * (100vw / 390));
  font-size: calc(16.5 * (100vw / 390));
}

.hair-mascara_area .makeup-point dd {
  width: calc(147 * (100vw / 390));
  font-size: calc(12 * (100vw / 390));
  line-height: 1.333;
}
/*-------------------hair-mascara*/
.all-items-btn a {
  width: calc(140 * (100vw / 390));
  height: calc(35 * (100vw / 390));
  font-size: calc(11.5 * (100vw / 390));
}

/*profile-----------------------*/
.profile_area {
  width: auto;
  padding: calc(105 * (100vw / 390)) 0;
}

.profile_area .sec-ttl {
  margin: 0 auto calc(12 * (100vw / 390));
  padding: 0 calc(15 * (100vw / 390));
  font-size: calc(19 * (100vw / 390));
}

.profile_area .sec-ttl::after {
  width: calc(283 * (100vw / 390));
}

.profile_area .flex-box {
  margin-bottom: calc(5 * (100vw / 390));
}

.artist-img {
  width: calc(184 * (100vw / 390));
  margin: 0 auto calc(35 * (100vw / 390));
}

.artist-name {
  margin-bottom: calc(15 * (100vw / 390));
  font-size: calc(18 * (100vw / 390));
  text-align: center;
}

.artist-ttl {
  width: fit-content;
  margin: 0 auto calc(20 * (100vw / 390));
  padding: 0 calc(8 * (100vw / 390));
  font-weight: bold;
  font-size: calc(13 * (100vw / 390));
  line-height: 1.2115;
  letter-spacing: .05em;
  text-align: center;
  white-space: nowrap;
}

.artist-ttl::before {
  width: calc(8 * (100vw / 390));
  height: calc(30 * (100vw / 390));
}

.artist-ttl::after {
  width: calc(8 * (100vw / 390));
  height: calc(30 * (100vw / 390));
}

.artist-dtl {
  width: calc(284 * (100vw / 390));
  margin: 0 auto;
  font-size: calc(12 * (100vw / 390));
  line-height: 1.333;
}

.artist-sign {
  width: calc(166 * (100vw / 390));
  margin: 0 calc(54 * (100vw / 390)) calc(50 * (100vw / 390)) auto;
}

.brand-logo {
  width: calc(96 * (100vw / 390));
  margin: 0 auto;
}
/*-----------------------profile*/

.following-nav ul {
  gap: calc(10 * (100vw / 390));
  font-size: calc(18 * (100vw / 390));
}

.following-nav li:nth-of-type(1)::before {
  height: calc(30 * (100vw / 390));
  margin-right: calc(-5 * (100vw / 390));
}

.following-nav li a {
  height: calc(50 * (100vw / 390));
}

.following-nav li a p {
 padding: 0 calc(15 * (100vw / 390));
}

}

/*---------------------------------------------Smart phone*/

/*pcのみ--------------------------------------------------*/
@media screen and  (min-width:768px) {
.only_sp {
  display: none;
}
}
/*--------------------------------------------------pcのみ*/

/*レスポンシブ＆タブレット対応-------------------------------*/
@media screen and (max-width: 1920px){
  html {
    font-size: calc(10 * (100vw / 1920));
  }
}
/*-------------------------------レスポンシブ＆タブレット対応*/