@charset "UTF-8";

/*//////////////////////////////////////////////////

  CV 2025 Holiday Collection

//////////////////////////////////////////////////*/

html {
  font-size: calc(10 * (100vw * 0.3));
}

@media (min-width: 769px) {
  html {
    font-size: calc(10 * (100vw/1400));
  }
}

@media (max-width: 769px) {
  html {
    font-size: calc(10 * (100vw/420));
  }
}

@media (min-width: 1400px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}

/* ========================================================
                      * 共通設定  *
========================================================= */

:root {
  --font_regular: "Noto Sans JP", sans-serif;
  --font_eng: "articulat-cf", sans-serif;
  --font_mix: "articulat-cf", "Noto Sans JP", sans-serif;
  --color_regular: #000;
  --color-black:#000000;
  --color_gray: #F6F6F6;
  --color_gray02: #757575;
  --color-white:#ffffff;
  --color-green: #89D538;
  --color-pink: #EC77A3;
  --color-orange: #FF8500;
  --color-yellow: #F2E224;
  --rate-sp: 42rem / 750;
  --rate-pc: 100vw * 0.3 / 750;
}

#Wrap {
  width: 100%;
}

#share {
  z-index: 111 !important;
  transition: all 0.6s 0.3s;
}

#share img {
  margin: auto;
  height: auto;
}


.LP_page * {
  box-sizing: border-box;
  font-feature-settings: "palt";
}

.LP_page {
  width: 100%;
  height: 100%;
  line-height: 1.65;
  letter-spacing: 0.1em;
  text-align: center;
  font-family: var(--font_mix);
  font-weight: 400;
  background-color: var(--color-white);
}

.LP_page p,
.LP_page li, 
.LP_page a, 
.LP_page span {
  line-height: 1.65;
  letter-spacing: 0.04em;
  text-align: center;
  font-family: var(--font_mix);
  font-weight: 400;
}

.LP_page a:hover {
  opacity: 1;
}

@media (min-width: 769px) {
  .LP_page {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    z-index: 0;
    line-height: 1.65;
  }
}

.LP_page .pcOnly {
  display: block;
}


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

.LP_page_inner {
  font-family: var(--font_regular);
  color: var(--color-black);
  /* overflow-x: hidden; */
  position: relative;
  background-color: #ffffff;
  padding-bottom: calc(140 * (100vw * 0.3 / 750));
}

.LP_page_inner,
.LP_page_inner section {
  width: 100%;
  background-color: #ffffff;
}

#FooterWrap {
  position: relative;
  background-color: #ffffff;
  z-index: 0;
}


/*animation------------------------*/
.LP_page .ef1 {
  opacity: 0;
}

.LP_page .ef1.active {
  -webkit-animation: opa1 1.4s cubic-bezier(0.51, 0.21, 0.41, 1) 0.3s 1 forwards;
  animation: opa 1.4s cubic-bezier(0.51, 0.21, 0.41, 1) 0.3s 1 forwards;
}

@-webkit-keyframes opa {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


.LP_page [data-char-span] .alternative {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  inline-size: 4px !important;
  block-size: 4px !important;
  contain: strict !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

  /* アニメーション前 */
  [data-text-animation="fadeIn"] span {
    opacity: 0;
    transition: opacity 1s;
  }

  @media (min-width: 769px) {
    [data-text-animation="fadeIn"] span {
      margin: 0 calc(3 * (var(--rate-pc)));
    }
    .LP_page .mv
    [data-text-animation="fadeIn"] span {
      margin: 0 calc(4 * (var(--rate-pc)));
    }
    .LP_page .sec_eyepalette [data-text-animation="fadeIn"] span {
      margin: 0 calc(2.2 * (var(--rate-pc)));
    }
    .LP_page .sec_mascara [data-text-animation="fadeIn"] span {
      line-height: 1.5 !important;
    }
  }

  @media (max-width: 769px) {
    [data-text-animation="fadeIn"] span {
      margin: 0 calc(3 * (var(--rate-sp)));
    }
    .LP_page .mv
    [data-text-animation="fadeIn"] span {
    margin: 0 calc(4 * (var(--rate-sp)));
    }
    .LP_page .sec_eyepalette [data-text-animation="fadeIn"] span {
      margin: 0 calc(2.2 * (var(--rate-sp)));
    }
  }

  /* アニメーション後 */
  [data-text-animation="fadeIn"] span.is-active {
    opacity: 1;
  }


/*------------------------animation*/


/*shareボタン、shareテキスト---------------------------*/
@media screen and  (max-width:768px) {
  #share {
    transition: translate .5s;
  }
  
  #share.move {
    translate: 0 calc(-120 * (100vw * 0.3 / 750));
  }
  
  .share-txt {
    display: none;
  }
    
  .only_pc {
    display: none;
  }
  }
  /*---------------------------shareボタン、shareテキスト*/


/*PC DESIGN------------------------------------------------------*/

@media (min-width: 769px) {
  .LP_page .pcOnly {
    display: block;
  }

  .LP_page .spOnly {
    display: none;
  }

  .LP_page .grid_area {
    display: grid;
    grid-template-columns: 1fr calc(100vw * 0.3) 1fr;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }


  .LP_page .grid_area .fixed_left,
  .LP_page .grid_area .fixed_right {
    position: -webkit-sticky;
    position: sticky;
    display: grid;
    pointer-events: all;
    height: 100vh;

  }

  .LP_page .grid_area .fixed_left {
    top: 0;
    grid-column: 1;
    -webkit-clip-path: border-box;
    clip-path: border-box;
    place-items: center;
  }

  .LP_page .grid_area .fixed_left_inner {
    width: 39.6rem;
  }

  .LP_page .grid_area .fixed_right {
    top: 0;
    grid-column: 3;
    place-items: center;
    -webkit-clip-path: border-box;
    clip-path: border-box;
  }

  .LP_page .grid_area .fixed_right .title {
    font-family: var(--font_eng);
    font-size: 1.7rem;
    text-align: left;
    line-height: 1.5;
    margin-top: -20rem;
    margin-left: -23rem;
    letter-spacing: 0.04em;
  }

  .LP_page .grid_area .nav03 {
    position: fixed;
    top: 50%;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color_gray);
    width: 15rem;
    height: 42.6rem;
    transform: translate(100%, -50%);
    transition: transform 0.5s;
  }

  .LP_page .grid_area .nav03.active {
    transform: translate(0, -50%);
  }

  .LP_page .grid_area .nav03 ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
  }

  .LP_page .grid_area .nav03 li {
    position: relative;
    width: 13.8rem;
    height: 7.8rem;
    background-color: var(--color-white);
  }

  .LP_page .grid_area .nav03 li:before {
    position: absolute;
    bottom: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 1.1rem;
    height: 0.6rem;
    background: url(../img/icon_arrow02.svg) no-repeat;
    background-size: 100%;
    content: "";
  }
  
  .LP_page .grid_area .nav03 li a {
    display: flex;
    align-items: center;
    font-family: var(--font_eng);
    text-transform: uppercase;
    text-align: center;
    color: var(--color-black);
    margin-top: 0.5rem;
  }

  .LP_page .grid_area .nav03 .nav_img {
    width: 6rem;
  }

  .LP_page .grid_area .nav03 .nav_name {
    font-size: 1.3rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .LP_page .grid_area .nav03 ul li:nth-of-type(1) .nav_name {
    margin-left: 1.1rem;
  }
  .LP_page .grid_area .nav03 ul li:nth-of-type(2) .nav_name {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
  }
  .LP_page .grid_area .nav03 ul li:nth-of-type(3) .nav_name {
    margin-left: 1.7rem;
    margin-top: 0.5rem;
  }
  .LP_page .grid_area .nav03 ul li:nth-of-type(4) .nav_name {
    margin-left: 2.5rem;
    margin-top: 0.5rem;
  }

  .LP_page .grid_area .nav03 ul li:nth-of-type(5) .nav_name {
    margin-left: 2rem;
    margin-top: 2rem;
  }

  /*MV------------------------*/
  .LP_page .mv {
    position: relative;
  }

  .LP_page .mv .text_wrap {
    position: absolute;
    top: calc(-10 * (var(--rate-pc)));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

  .LP_page .mv .text {
    font-family: var(--font_eng);
    font-size: calc(70 * (var(--rate-pc)));
    line-height: 1;
    letter-spacing: 0.17em;
    text-align: center;
    color: var(--color-pink);
  }
  /*------------------------MV*/

  /*Sec Common------------------------*/
  .LP_page .sec:not(.sec_eyepalette) {
    padding-top: calc(85 * (var(--rate-pc)));
  }
  /*------------------------Sec Common*/

  /*Nav01(MV下)------------------------*/
  .LP_page .nav01 {
    padding: calc(100 * (var(--rate-pc))) 0;
  }

  .LP_page .nav01 ul {
    display: flex;
    justify-content: center;
    gap: calc(20 * (var(--rate-pc)));
  }

  .LP_page .nav01 ul li {
    position: relative;
    width: calc(165 * (var(--rate-pc)));
    height: calc(280 * (var(--rate-pc)));
  }

  .LP_page .nav01 ul li:before {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: calc(26 * (var(--rate-pc)));
    height: calc(14 * (var(--rate-pc)));
    background: url(../img/icon_arrow02.svg) no-repeat;
    background-size: 100%;
    content: "";
  }

  .LP_page .nav01 .nav_img {
    width: calc(165 * (var(--rate-pc)));
    margin: 0 auto;
  }

  .LP_page .nav01 .nav_name {
    margin: calc(36 * (var(--rate-pc))) auto 0;
    font-size: calc(26 * (var(--rate-pc)));
    line-height: 1.5;
    text-transform: uppercase;
  }

  .LP_page .nav01 ul li:nth-of-type(1) .nav_name {
    margin: calc(20 * (var(--rate-pc))) auto 0;
  }

  /*------------------------Nav01(MV下)*/

  /*Item Sec Common------------------------*/
  .LP_page .visual_slider img {
    width: calc(750 * (var(--rate-pc)));  
  }

  /* visual_slider の dots */
  .LP_page .visual_slider .slick-dots {
    display: flex !important;
    justify-content: center;
    gap: calc(0 * (var(--rate-pc)));
    bottom: calc(20 * (var(--rate-pc)));
    width: fit-content;
    right: calc(10 * (var(--rate-pc)));
  }

  .LP_page .visual_slider .slick-dots li {
    width: calc(110 * (var(--rate-pc)));
    height: calc(4 * (var(--rate-pc)));
    background: rgba(255,255,255,0.3);
    position: relative;
    overflow: hidden;
    margin: 0 calc(10 * (var(--rate-pc)));
  }

  .LP_page .visual_slider .slick-dots li button {
    display: none;
  }

  .LP_page .visual_slider .slick-dots li .progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--color-white)
  }

  .LP_page .item_blk {
    position: relative;
    display: flex;
  }

  .LP_page .item_name_en {
    position: absolute;
    font-family: var(--font_eng);
    font-size: calc(47 * (var(--rate-pc)));
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .LP_page .item_slider {
    width: calc(330 * (var(--rate-pc)));
  }

  .LP_page .item_slider img {
    width: calc(330 * (var(--rate-pc)));
  }

  .LP_page .item_name {
    margin-top: calc(70 * (var(--rate-pc)));
    font-size: calc(30 * (var(--rate-pc)));
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .LP_page .item_credit {
    margin-top: calc(23 * (var(--rate-pc)));
    display: flex;
    gap: calc(30 * (var(--rate-pc)));
    margin-left: calc(200 * (var(--rate-pc)));
  }

  .LP_page .item_label {
    display: block;
    width: calc(120 * (var(--rate-pc)));
    height: calc(38 * (var(--rate-pc)));
    padding: calc(19 * (var(--rate-pc))) 0 calc(1 * (var(--rate-pc)));
    font-family: var(--font_eng);
    font-size: calc(26 * (var(--rate-pc)));
    line-height: 0;
    letter-spacing: 0.04em;
    color: var(--color-white);
    background-color: var(--color-black);
  }

  .LP_page .item_price {
    font-size: calc(26 * (var(--rate-pc)));
  }

  .LP_page .modal_btn_list { 
    margin-top: calc(77 * (var(--rate-pc)));
    display: flex;
    justify-content: center;
    gap: calc(16 * (var(--rate-pc)));
  }

  .LP_page .modal_btn_list li {
    position: relative;
    width: calc(326 * (var(--rate-pc)));
    height: calc(277 * (var(--rate-pc)));
    background-color: var(--color_gray);
  } 

  .LP_page .modal_btn_name { 
    margin-top: calc(26 * (var(--rate-pc)));
    font-family: var(--font_eng);
    font-size: calc(26 * (var(--rate-pc)));
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .LP_page .modal_btn_list li img {
    margin: calc(34 * (var(--rate-pc))) auto 0; 
    width: calc(326 * (var(--rate-pc)));
  }

  .LP_page .plus { 
    position: absolute;
    width: calc(60 * (var(--rate-pc)));
    height: calc(60 * (var(--rate-pc)));
    right: 0;
    bottom: 0;
    background: url(../img/icon_plus.svg) no-repeat;
    background-position: center;
    background-size: 100%;
    content: "";
  }

  .LP_page .item_text { 
    margin: calc(64 * (var(--rate-pc))) auto 0; 
    font-size: calc(26 * (var(--rate-pc)));
    line-height: 2;
  }

  .LP_page .btn.btn_more a {
    position: relative;
    margin: calc(68 * (var(--rate-pc))) auto 0;
    width: calc(210 * (var(--rate-pc)));
    border-bottom: calc(2 * (var(--rate-pc))) var(--color-black) solid;
    padding-bottom: calc(20 * (var(--rate-pc)));
  }

  .LP_page .btn.btn_more a span { 
    display: block;
    font-size: calc(30 * (var(--rate-pc)));
    line-height: 1;
  }

  .LP_page .btn.btn_more a:before {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: calc(14 * (var(--rate-pc)));
    height:calc(25 * (var(--rate-pc)));
    background: url(../img/icon_arrow03.svg) no-repeat;
    background-size: 100%;
    content: "";
  } 
  /*------------------------Item Sec Common*/

  /*Item Sec Eye Palette------------------------*/
  .LP_page .sec_eyepalette .item_name_en {
    bottom: calc(-5 * (var(--rate-pc)));
    left: calc(-26 * (var(--rate-pc)));
    color: var(--color-green);
  }
  .LP_page .sec_eyepalette .item_pkg_img {
    width: calc(224 * (var(--rate-pc)));
  }
  .LP_page .sec_eyepalette .item_blk {
    margin-left: calc(80 * (var(--rate-pc)));
    margin-top: calc(103 * (var(--rate-pc)));
    gap: calc(77 * (var(--rate-pc)));
  }
  /*------------------------Item Sec Eye Palette*/

  /*Item Sec Mascara------------------------*/
  .LP_page .sec_mascara .item_name_en {
    bottom: calc(72 * (var(--rate-pc)));
    left: calc(-405 * (var(--rate-pc)));
    color: var(--color-orange);
  }
  .LP_page .sec_mascara .item_blk {
    margin-left: calc(472 * (var(--rate-pc)));
    margin-top: calc(73 * (var(--rate-pc)));
  }
  .LP_page .sec_mascara .item_blk ul li img {
    width: calc(210 * (var(--rate-pc)));
  }

  .LP_page .sec_mascara .modal_btn_list li img {
    width: calc(160 * (var(--rate-pc)));
  }
  /*------------------------Item Sec Mascara*/

  /*Item Sec Cheek------------------------*/
  .LP_page .sec_cheek {
    padding-top: calc(155 * (var(--rate-pc)));
  }
  .LP_page .sec_cheek .item_name_en {
    bottom: calc(-99 * (var(--rate-pc)));
    left: calc(-60 * (var(--rate-pc)));
    color: var(--color-pink);
    white-space: nowrap;
  }
  .LP_page .sec_cheek .item_blk {
    margin-left: calc(101 * (var(--rate-pc)));
    margin-top: calc(103 * (var(--rate-pc)));
    gap: calc(60 * (var(--rate-pc)));
  }

  .LP_page .sec_cheek .item_pkg_img {
    margin-top: calc(70 * (var(--rate-pc)));
    width: calc(210 * (var(--rate-pc)));
  }

  .LP_page .sec_cheek .item_blk ul li img {
    width: calc(340 * (var(--rate-pc)));
  }

  .LP_page .sec_cheek .modal_btn_list li img {
    width: calc(160 * (var(--rate-pc)));
  }

  .LP_page .sec_cheek .item_name {
    margin-top: calc(152 * (var(--rate-pc)));
  }
  /*------------------------Item Sec Cheek*/

  /*Item SecLip------------------------*/
  .LP_page .sec_lip {
    padding-top: calc(165 * (var(--rate-pc)));
  }
  .LP_page .sec_lip .item_name_en {
    bottom: calc(23 * (var(--rate-pc)));
    left: calc(-137 * (var(--rate-pc)));
    color: var(--color-yellow);
  }
  .LP_page .sec_lip .item_blk {
    margin-left: calc(193 * (var(--rate-pc)));
    margin-top: calc(100 * (var(--rate-pc)));
    gap: calc(150 * (var(--rate-pc)));
  }
  .LP_page .sec_lip .item_pkg_img {
    margin-top: calc(0 * (var(--rate-pc)));
    width: calc(86 * (var(--rate-pc)));
  }
  .LP_page .sec_lip .item_blk ul li img {
    width: calc(260 * (var(--rate-pc)));
  }
  .LP_page .sec_lip .modal_btn_list li img {
    width: calc(160 * (var(--rate-pc)));
  }
  .LP_page .sec_lip .item_name {
    margin-top: calc(57 * (var(--rate-pc)));
  }
  .LP_page .sec_lip .item_label {
    margin-top: calc(16 * (var(--rate-pc)));
  }
  .LP_page .sec_lip .item_credit {
    margin-left: calc(130 * (var(--rate-pc)));
    margin-top: calc(6 * (var(--rate-pc)));
  }
  .LP_page .sec_lip .item_price:nth-of-type(2) {
    margin-top: calc(13 * (var(--rate-pc)));
  }
  /*------------------------Item SecLip*/

  /*Modal Common------------------------*/
.LP_page .modal{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}

.LP_page .modal__bg{
  background: rgba(0,0,0,0.4);
  height: 100vh;
  position: absolute;
  width: 100%;
}

.LP_page .modal__content{
  background: #ffffff;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: calc(750 * (var(--rate-pc)));
  overflow-y: scroll;
  height: 75vh;
}

.LP_page .modal_inner{
  padding: calc(84 * (var(--rate-pc))) 0 calc(180 * (var(--rate-pc)));
} 

  .LP_page #modal01 .modal_inner,
  .LP_page #modal02 .modal_inner{
    padding: calc(120 * (var(--rate-pc))) 0 calc(180 * (var(--rate-pc)));
  }

.LP_page .modal__content .js-modal-close{
  position: sticky;
  width: calc(60 * (var(--rate-pc)));
  height: calc(60 * (var(--rate-pc)));
  top: calc(42 * (var(--rate-pc)));
  right: calc(55 * (var(--rate-pc)));
  float: right;
  cursor: pointer;
  z-index: 999;
}

.LP_page .modal__content .js-modal-close:before,
.LP_page .modal__content .js-modal-close:after{
  content: '';
  display: block;
  width: calc(50 * (var(--rate-pc)));
  height: 1px;
  background: var(--color_regular);
  transform: rotate(45deg);
  position: absolute;
  top: calc(28 * (var(--rate-pc)));
  right: calc(0 * (var(--rate-pc)));
}

.LP_page .modal__content .js-modal-close:after{
  transform: rotate(-45deg);
}

.LP_page .modal_slider_inner {
  width: calc(750 * (var(--rate-pc)));
  margin: 0 auto;
}

.LP_page .modal_text {
  width: calc(590 * (var(--rate-pc)));
  margin: 0 auto;
  font-size: calc(26 * (var(--rate-pc)));
  line-height: 2;
  color: var(--color-black);
}

.LP_page .modal_zoom_area {
  position: relative;
  margin: calc(67 * (var(--rate-pc))) auto 0;
  width: calc(590 * (var(--rate-pc)));
  border: var(--color-black) solid calc(2 * (var(--rate-pc)));
  overflow: hidden;
}

.LP_page .modal_zoom_area img {
  margin: 0 auto;
  width: calc(590 * (var(--rate-pc)));
}

.LP_page .modal .slick-prev:before, 
.LP_page .modal .slick-next:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: calc(29 * (var(--rate-pc)));
  height: calc(58 * (var(--rate-pc)));
  background: url(../img/icon_arrow05.svg) no-repeat;
  background-size: 100%;
  content: "";
}

.LP_page .modal .slick-prev, 
.LP_page .modal .slick-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
}

.LP_page .modal .slick-prev {
  left: calc(900 * (var(--rate-pc)));
}

.LP_page .modal .slick-next {
  right: calc(900 * (var(--rate-pc)));
}

.LP_page .modal .slick-next:before {
  transform: rotate(180deg);
}

.LP_page .modal_blk01 {
  width: calc(590 * (var(--rate-pc)));
  margin: calc(16 * (var(--rate-pc))) auto 0;
  display: flex;
  justify-content: space-between;
}

.LP_page #modal03 .modal_blk01,
.LP_page #modal04 .modal_blk01,
.LP_page #modal05 .modal_blk01,
.LP_page #modal06 .modal_blk01,
.LP_page #modal07 .modal_blk01 {
  display: block;
  margin: calc(27 * (var(--rate-pc))) auto 0;
}

.LP_page #modal03 .modal_var_name,
.LP_page #modal04 .modal_var_name,
.LP_page #modal05 .modal_var_name,
.LP_page #modal06 .modal_var_name,
.LP_page #modal07 .modal_var_name {
  font-size: calc(26 * (var(--rate-pc)));
  margin: 0;
  text-align: center;
}

.LP_page #modal03 .modal_text,
.LP_page #modal04 .modal_text,
.LP_page #modal05 .modal_text,
.LP_page #modal06 .modal_text,
.LP_page #modal07 .modal_text {
  margin: calc(65 * (var(--rate-pc))) auto 0;
}

.LP_page .modal_var_name {
  font-size: calc(26 * (var(--rate-pc)));
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: left;
  margin-top: calc(20 * (var(--rate-pc)));
  color: var(--color-black);
}

.LP_page .modal_var_map {
  width: calc(142 * (var(--rate-pc)));
  margin-top: calc(15 * (var(--rate-pc)));
}

.LP_page .modal_var_detail {
  display: flex;
  flex-wrap: wrap;
  margin: calc(60 * (var(--rate-pc))) auto;
  width: calc(590 * (var(--rate-pc)));
  gap: calc(60 * (var(--rate-pc)));
  row-gap: calc(50 * (var(--rate-pc)));
}

.LP_page .modal_var_detail li {
  width: calc(265 * (var(--rate-pc)));
  color: var(--color-black);
}

.LP_page .modal_alphabet {
  display: flex;
  width: calc(32 * (var(--rate-pc)));
  height: calc(32 * (var(--rate-pc)));
  border-radius: 50%;
  background-color: var(--color-black);
  align-items: center;
  justify-content: center;
}

.LP_page .modal_alphabet span {
  margin-top: calc(-2 * (var(--rate-pc)));
  margin-left: calc(1 * (var(--rate-pc)));
  display: block;
  font-size: calc(22 * (var(--rate-pc)));
  line-height: 1;
  color: white;
}

.LP_page .modal_var_detail li:nth-of-type(1) .modal_alphabet span {
  margin-top: calc(-3 * (var(--rate-pc)));
}

.LP_page .modal_var_detail li:nth-of-type(2) .modal_alphabet span {
  margin-left: calc(2 * (var(--rate-pc)));
}

.LP_page .modal_var_detail li:nth-of-type(4) .modal_alphabet span {
  margin-left: calc(2 * (var(--rate-pc)));
}


.LP_page .modal_blk02 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.LP_page .modal_color_name {
  margin-top: calc(20 * (var(--rate-pc)));
  font-size: calc(22 * (var(--rate-pc)));
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
  color: var(--color-black);
}

.LP_page .modal_sample {
  margin-top: calc(-32 * (var(--rate-pc)));
  width: calc(110 * (var(--rate-pc)));
}

.LP_page .modal_var_text {
  margin-top: calc(18 * (var(--rate-pc)));
  font-size: calc(22 * (var(--rate-pc)));
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: justify;
  color: var(--color-black);
}

  .LP_page .btn.btn_buy a {
    position: relative;
    margin: calc(70 * (var(--rate-pc))) auto 0;
    width: calc(190 * (var(--rate-pc)));
    border-bottom: calc(2 * (var(--rate-pc))) var(--color-black) solid;
    padding-bottom: calc(20 * (var(--rate-pc)));
  }

  .LP_page .btn.btn_buy a span { 
    display: block;
    font-size: calc(30 * (var(--rate-pc)));
    line-height: 1;
    color: var(--color-black);
  }

  .LP_page .btn.btn_buy a:before {
    position: absolute;
    top: calc(-6 * (var(--rate-pc)));
    right: 0;
    display: block;
    width: calc(34 * (var(--rate-pc)));
    height: calc(35 * (var(--rate-pc)));
    background: url(../img/icon_cart.svg) no-repeat;
    background-size: 100%;
    content: "";
  }
  /*------------------------Modal Common/

  /* Zoom------------------------ */

    .LP_page .slick-slider {
      -ms-touch-action: auto !important;
      touch-action: auto !important;
    }
  
    .LP_page .modal_zoom_area {
  
    }
  
    .LP_page .zoom-btn {
      position: absolute;
      bottom: calc(30 * (var(--rate-pc)));
      right: calc(30 * (var(--rate-pc)));
      width: calc(35 * (var(--rate-pc)));
      height: calc(35 * (var(--rate-pc)));
      border: none;
      background-color: transparent;
      background-image: url('../img/icon_zoomin.svg');
      background-size: contain;
      background-repeat: no-repeat;
      cursor: pointer;
      z-index: 100;
    }
  
    .LP_page .zoom-btn.change {
      background-image: url('../img/icon_zoomout.svg');
    }
  
  /* ------------------------Zoom */

  /*Make up Look------------------------*/
  .LP_page .sec_mkup_ttl {
    margin-left: calc(40 * (var(--rate-pc)));
    font-family: var(--font_eng);
    font-size:calc(30 * (var(--rate-pc)));
    text-align: left;
    line-height: 0.5;
    text-transform: uppercase;
  }

  .LP_page .sec_mkup_ttl span {
    font-size:calc(60 * (var(--rate-pc)));
    letter-spacing: 0;
  }

  .LP_page .makeup_slider {
    position: relative;
    margin-top: calc(20 * (var(--rate-pc)));
  }

  .LP_page .thumbnail {
    position: absolute;
    right: 0;
    top: calc(-150 * (var(--rate-pc)));
    cursor: pointer;
  }

  .LP_page .thumbnail .slick-track {
    width: calc(416 * (var(--rate-pc))) !important;
    transform: unset !important;
    display: flex;
    justify-content: flex-end;
  }

  .LP_page .thumbnail li {
    width: calc(120 * (var(--rate-pc))) !important;
    margin-left: calc(17 * (var(--rate-pc)));
  }

  .LP_page .thumbnail .slick-current{
    position: relative;
  }

  .LP_page .thumbnail .slick-current:after {
    content: '';
    position: absolute;
    top:0; 
    left:0;
    width:calc(120 * (var(--rate-pc))); 
    height:calc(120 * (var(--rate-pc)));
    background: rgba(255,255,255,0.4);
  }

  .LP_page .makeup_slider .slider02 img {
    width: calc(750 * (var(--rate-pc)));
  }

  .LP_page .makeup_item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(40 * (var(--rate-pc)));
    row-gap: calc(30 * (var(--rate-pc)));
    margin-top: calc(80 * (var(--rate-pc)));
  }

  .LP_page .mkup_item_img {
    width: calc(170 * (var(--rate-pc)));
    margin: 0 auto;
  }

  .LP_page .mkup_item_name {
    margin-top:calc(33 * (var(--rate-pc)));
    font-size: calc(20 * (var(--rate-pc)));
    line-height: 2;
  }

  .LP_page .makeup_step {
    width: calc(630 * (var(--rate-pc)));
    margin: calc(53 * (var(--rate-pc))) 0 0 calc(65 * (var(--rate-pc)));
  }

  .LP_page .makeup_step li {
    font-size: calc(26 * (var(--rate-pc)));
    line-height: 2;
    text-align: justify;
  }

  .LP_page .accordion_outside {
    position: relative;
    margin-top: calc(0 * (var(--rate-pc)));
  }

  .LP_page .accordion_wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .8s;
  }

  .LP_page .open > .accordion_wrap {
    grid-template-rows: 1fr;
  }

  .LP_page .accordion_inner {
    position: relative;
    padding-bottom: 3.6rem;
    min-height: calc(520 * (var(--rate-pc)));;
    overflow: hidden;
  }

  .LP_page .accordion_inner::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(520 * (var(--rate-pc)));
    background: linear-gradient(transparent, var(--color-white));
    content: "";
    z-index: 3;
  }

  .LP_page .open .accordion_inner::before {
    background: transparent;
  }

  .LP_page .accordion_btn_area {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: calc(-2 * (var(--rate-pc)));
    z-index: 5;
  }

  .LP_page .open .accordion_btn_area {
    bottom: calc(-123 * (var(--rate-pc)));
  }

  .LP_page .accordion_btn {
    position: relative;
    width: calc(280 * (var(--rate-pc)));
    margin: 0 auto;
    font-family: var(--font_eng);
    font-size: calc(30 * (var(--rate-pc)));
    line-height: 1;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
  }

  .LP_page .accordion_btn span {
    letter-spacing: 0.04em;
  }

  .LP_page .accordion_btn .to_open {
    margin-top:calc(80 * (var(--rate-pc)));
  }

  .LP_page .accordion_btn .to_open:before,
  .LP_page .accordion_btn .to_close:before {
    position: absolute;
    top: calc(20 * (var(--rate-pc)));
    left: 0;
    display: block;
    width: calc(280 * (var(--rate-pc)));
    height: calc(110 * (var(--rate-pc)));
    background: url(../img/icon_arrow01.svg) no-repeat;
    background-size: contain;
    transform: rotate(180deg);
    content: "";
  }

  .LP_page .open .accordion_btn .to_close:before {
    top: calc(-70 * (var(--rate-pc)));
    transform: rotate(0);
  }

  .LP_page .accordion_btn .to_open,
  .LP_page .open .accordion_btn .to_close {
    display: block;
  }

  .LP_page .accordion_btn .to_close,
  .LP_page .open .accordion_btn .to_open {
    display: none;
  }

  .LP_page .mkup02 {
    margin-top: calc(170 * (var(--rate-pc)));
    padding-top: calc(120 * (var(--rate-pc)));
  }
  /*------------------------Make up Look*/

  /*Release Day------------------------*/
  .LP_page .sec_release {
    width:calc(670 * (var(--rate-pc)));
    margin: calc(240 * (var(--rate-pc))) auto 0;
    padding: calc(80 * (var(--rate-pc))) 0 calc(90 * (var(--rate-pc)))!important;
    border: var(--color-black) solid calc(2 * (var(--rate-pc)));
  }

  .LP_page .sec_release .sec_ttl {
    font-family: var(--font_eng);
    font-size: calc(47 * (var(--rate-pc)));
    line-height: 1;
    letter-spacing: 0.17em;
    font-weight: 400;
    text-transform: uppercase;
  }

  .LP_page .release_list {
    display: flex;
    flex-direction: column;
    margin: calc(70 * (var(--rate-pc))) auto 0;
    gap: calc(20 * (var(--rate-pc)));
  }

  .LP_page .release_list li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(40 * (var(--rate-pc)));
    width: calc(590 * (var(--rate-pc)));
    height: calc(100 * (var(--rate-pc)));
    background-color: var(--color_gray);
    font-size: calc(26 * (var(--rate-pc)));
    margin: 0 auto;
    line-height: 1;
  }

  .LP_page .release_txt, 
  .LP_page .release_date {
    height: fit-content;
  }

  .LP_page .release_decor {
    display: block;
    width: calc(170 * (var(--rate-pc)));
    height: calc(2 * (var(--rate-pc)));
    background-color: var(--color-black);
  }

  .LP_page .note {
    font-size: calc(20 * (var(--rate-pc)));
    margin: calc(60 * (var(--rate-pc))) auto 0;
    line-height: 2;
    color: var(--color_gray02);
  }
  /*------------------------Release Day*/

  /*------------------------Happy Accident*/
  .LP_page .sec_ha {
    padding: calc(180 * (var(--rate-pc))) 0 calc(185 * (var(--rate-pc))) !important;
    background-image: url(../img/ha_bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .LP_page .sec_ha .sec_ttl {
    font-family: var(--font_eng);
    font-size: calc(47 * (var(--rate-pc)));
    line-height: 1;
    letter-spacing: 0.17em;
    font-weight: 400;
    color: var(--color-pink);
  }

  .LP_page .sec_ha_text {
    margin: calc(57 * (var(--rate-pc))) auto 0;
    width: calc(670 * (var(--rate-pc)));
    font-size: calc(22 * (var(--rate-pc)));
    line-height: 2;
  }

  /*Happy Accident------------------------*/

  /*btn------------------------*/
  .LP_page .btn {
    display: block !important;
    border: none !important;
    background: none !important;
    min-width: auto !important;
    white-space: nowrap;
    padding: 0;
  }
  
  .LP_page .btn a {
    position: relative;
    display: flex;
    justify-content: flex-start;
    font-size: calc(30 * (var(--rate-pc)));
    border-bottom: 1px solid var(--color_regular);
  }
  
  .LP_page .btn a span {
    position: relative;
    width: 100%;
    text-align: left;
  }
  
  .LP_page .btn a span:before {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-top: 0.1rem;
    display: block;
    width: calc(14 * (var(--rate-pc)));
    height: calc(26 * (var(--rate-pc)));
    background: url(../img/icon_arrow01.svg) no-repeat;
    background-size: contain;
    content: "";
  }
  
  .LP_page .btn.btn_buynow a {
    margin: calc(80 * (var(--rate-pc))) auto 0;
    padding-bottom: calc(15 * (var(--rate-pc)));
    width: calc(190 * (var(--rate-pc)));
  }
  
  .LP_page .btn.btn_all a {
    margin: 0 auto;
    padding-bottom: calc(25 * (var(--rate-pc)));
    width: calc(600 * (var(--rate-pc)));
  }

  .LP_page .btn.btn_all a span {
    letter-spacing: 0;
    letter-spacing: 0.04em;
  }

  .LP_page .btn.btn_all a:before {
    position: absolute;
    bottom: calc(24 * (var(--rate-pc)));
    right: calc(0 * (var(--rate-pc)));
    transform: translateY(-50%);
    display: block;
    width: calc(14 * (var(--rate-pc)));
    height: calc(25 * (var(--rate-pc)));
    background: url(../img/icon_arrow04.svg) no-repeat;
    background-size: contain;
    content: "";
  }
  
  .LP_page .modal_btn {
    display: block;
    margin: calc(100 * (var(--rate-pc))) auto 0;
    padding: calc(40 * (var(--rate-pc))) 0 calc(30 * (var(--rate-pc)));
    width: calc(650 * (var(--rate-pc)));
    font-family: var(--font_mix);
    font-size: calc(26 * (var(--rate-pc)));
    line-height: 2;
    text-align: center;
    background-color: var(--color-light);
  }
  
  .LP_page .modal_btn span {
    position: relative;
    margin-left: calc(-106 * (var(--rate-pc)));
  }
  
  .LP_page .modal_btn span:before {
    position: absolute;
    bottom: 50%;
    right: calc(-100 * (var(--rate-pc)));
    margin-bottom: calc(3 * (var(--rate-pc)));
    transform: translateY(50%);
    display: block;
    width: calc(36 * (var(--rate-pc)));
    height: calc(36 * (var(--rate-pc)));
    background: url(../img/icon_plus.svg) no-repeat;
    background-size: contain;
    content: "";
  }
  /*---------------------------btn*/
}


/*------------------------------------------------------PC DESIGN*/




/*SP DESIGN------------------------------------------------------*/
@media (max-width: 769px) {
  .LP_page {
    overflow: hidden;
  }

  .LP_page .spOnly {
    display: block;
  }

  .LP_page .pcOnly {
    display: none;
  }
  
  
  .LP_page_inner {
    padding-bottom: calc(200 * (var(--rate-sp)));
  }

  /*shareボタン、shareテキスト---------------------------*/
  #share {
    transition: translate .5s;
  }
  
  #share.move {
    translate: 0 calc(-150 * (var(--rate-sp)));
  }
  
  .share-txt {
    display: none;
  }
  
  .only_pc {
    display: none;
  }
  /*---------------------------shareボタン、shareテキスト*/
  
  /*SP FIXED NAV------------------------*/
  .LP_page .fixed_btn {
    position: fixed;
    bottom: 0;
    display: block;
    width: 100%;
    /* translate: 0 100%;
    transition: translate .5s; */
    transform: translateY(100%);
    transition: all 0.6s 0.3s;
    z-index: 100;
  }
  
  .LP_page .fixed_btn.active {
    /* translate: 0 0; */
    transition: all 0.6s 0.3s;
    visibility: visible;
    transform: translateY(0);
    z-index: 100;
  }
  
  .LP_page .nav02 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color_gray);
    width: 100vw;
    height: calc(212 * (var(--rate-sp)));
  }

  .LP_page .nav02 ul {
    display: flex;
    justify-content: center;
    gap: calc(5 * (var(--rate-sp)));
  }

  .LP_page .nav02 li {
    position: relative;
    width: calc(143 * (var(--rate-sp)));
    height: calc(200 * (var(--rate-sp)));
    background-color: var(--color-white);
  }

  .LP_page .nav02 li:before {
    position: absolute;
    bottom: calc(11 * (var(--rate-sp)));
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: calc(21 * (var(--rate-sp)));
    height: calc(11 * (var(--rate-sp)));
    background: url(../img/icon_arrow02.svg) no-repeat;
    background-size: 100%;
    content: "";
  }
  
  .LP_page .nav02 li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(5 * (var(--rate-sp)));
    height: calc(200 * (var(--rate-sp)));
    font-family: var(--font_eng_serif);
    font-size: calc(22 * (var(--rate-sp)));
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-black);
  }

  .LP_page .nav02 .nav_img {
    width: calc(100 * (var(--rate-sp)));
    margin: 0 auto;
  }

  .LP_page .nav02 .nav_name {
    margin: calc(25 * (var(--rate-sp))) auto 0;
    font-size: calc(22 * (var(--rate-sp)));
    line-height: 1.5;
    text-transform: uppercase;
  }

  .LP_page .nav02 ul li:nth-of-type(1) .nav_name {
    margin: calc(10 * (var(--rate-sp))) auto 0;
  }

  .LP_page .nav02 ul li:nth-of-type(5) a {
    margin-top: calc(40 * (var(--rate-sp)));
  }
  /*------------------------SP FIXED NAV*/

  /*MV------------------------*/
  .LP_page .mv {
    position: relative;
  }

  .LP_page .mv .text_wrap {
    position: absolute;
    top: calc(-10 * (var(--rate-sp)));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

  .LP_page .mv .text {
    font-family: var(--font_eng);
    font-size: calc(70 * (var(--rate-sp)));
    line-height: 1;
    letter-spacing: 0.17em;
    text-align: center;
    color: var(--color-pink);
  }

  .LP_page .mv .alternative {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    inline-size: 4px !important;
    block-size: 4px !important;
    contain: strict !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* アニメーション前 */
  [data-text-animation="fadeIn"] span {
    opacity: 0;
    transition: opacity 1s;
  }

  /* アニメーション後 */
  [data-text-animation="fadeIn"] span.is-active {
    opacity: 1;
  }
  /*------------------------MV*/

  /*Sec Common------------------------*/
  .LP_page .sec:not(.sec_eyepalette) {
    padding-top: calc(85 * (var(--rate-sp)));
  }
  /*------------------------Sec Common*/

  /*Nav01(MV下)------------------------*/
  .LP_page .nav01 {
    padding: calc(100 * (var(--rate-sp))) 0;
  }

  .LP_page .nav01 ul {
    display: flex;
    justify-content: center;
    gap: calc(20 * (var(--rate-sp)));
  }

  .LP_page .nav01 ul li {
    position: relative;
    width: calc(165 * (var(--rate-sp)));
    height: calc(280 * (var(--rate-sp)));
  }

  .LP_page .nav01 ul li:before {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: calc(26 * (var(--rate-sp)));
    height: calc(14 * (var(--rate-sp)));
    background: url(../img/icon_arrow02.svg) no-repeat;
    background-size: 100%;
    content: "";
  }

  .LP_page .nav01 .nav_img {
    width: calc(165 * (var(--rate-sp)));
    margin: 0 auto;
  }

  .LP_page .nav01 .nav_name {
    margin: calc(36 * (var(--rate-sp))) auto 0;
    font-size: calc(26 * (var(--rate-sp)));
    line-height: 1.5;
    text-transform: uppercase;
  }

  .LP_page .nav01 ul li:nth-of-type(1) .nav_name {
    margin: calc(20 * (var(--rate-sp))) auto 0;
  }

  /*------------------------Nav01(MV下)*/

  /*Item Sec Common------------------------*/
  .LP_page .visual_slider img {
    width: calc(750 * (var(--rate-sp)));  
  }

  /* visual_slider の dots */
  .LP_page .visual_slider .slick-dots {
    display: flex !important;
    justify-content: center;
    gap: calc(0 * (var(--rate-sp)));
    bottom: calc(20 * (var(--rate-sp)));
    width: fit-content;
    right: calc(10 * (var(--rate-sp)));
  }

  .LP_page .visual_slider .slick-dots li {
    width: calc(110 * (var(--rate-sp)));
    height: calc(4 * (var(--rate-sp)));
    background: rgba(255,255,255,0.3);
    position: relative;
    overflow: hidden;
    margin: 0 calc(10 * (var(--rate-pc)));
  }

  .LP_page .visual_slider .slick-dots li button {
    display: none;
  }

  .LP_page .visual_slider .slick-dots li .progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--color-white)
  }

  .LP_page .item_blk {
    position: relative;
    display: flex;
  }

  .LP_page .item_name_en {
    position: absolute;
    font-family: var(--font_eng);
    font-size: calc(47 * (var(--rate-sp)));
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .LP_page .item_slider {
    width: calc(330 * (var(--rate-sp)));
  }

  .LP_page .item_slider img {
    width: calc(330 * (var(--rate-sp)));
  }

  .LP_page .item_name {
    margin-top: calc(70 * (var(--rate-sp)));
    font-size: calc(30 * (var(--rate-sp)));
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .LP_page .item_credit {
    margin-top: calc(23 * (var(--rate-sp)));
    display: flex;
    gap: calc(30 * (var(--rate-sp)));
    margin-left: calc(200 * (var(--rate-sp)));
  }

  .LP_page .item_label {
    display: block;
    width: calc(120 * (var(--rate-sp)));
    height: calc(38 * (var(--rate-sp)));
    padding: calc(19 * (var(--rate-sp))) 0 calc(1 * (var(--rate-sp)));
    font-family: var(--font_eng);
    font-size: calc(26 * (var(--rate-sp)));
    line-height: 0;
    letter-spacing: 0.04em;
    color: var(--color-white);
    background-color: var(--color-black);
  }

  .LP_page .item_price {
    font-size: calc(26 * (var(--rate-sp)));
  }

  .LP_page .modal_btn_list { 
    margin-top: calc(77 * (var(--rate-sp)));
    display: flex;
    justify-content: center;
    gap: calc(16 * (var(--rate-sp)));
  }

  .LP_page .modal_btn_list li {
    position: relative;
    width: calc(326 * (var(--rate-sp)));
    height: calc(277 * (var(--rate-sp)));
    background-color: var(--color_gray);
  } 

  .LP_page .modal_btn_name { 
    margin-top: calc(26 * (var(--rate-sp)));
    font-family: var(--font_eng);
    font-size: calc(26 * (var(--rate-sp)));
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .LP_page .modal_btn_list li img {
    margin: calc(34 * (var(--rate-sp))) auto 0; 
    width: calc(326 * (var(--rate-sp)));
  }

  .LP_page .plus { 
    position: absolute;
    width: calc(60 * (var(--rate-sp)));
    height: calc(60 * (var(--rate-sp)));
    right: 0;
    bottom: 0;
    background: url(../img/icon_plus.svg) no-repeat;
    background-position: center;
    background-size: 100%;
    content: "";
  }

  .LP_page .item_text { 
    margin: calc(64 * (var(--rate-sp))) auto 0; 
    font-size: calc(26 * (var(--rate-sp)));
    line-height: 2;
  }

  .LP_page .btn.btn_more a {
    position: relative;
    margin: calc(68 * (var(--rate-sp))) auto 0;
    width: calc(210 * (var(--rate-sp)));
    border-bottom: calc(2 * (var(--rate-sp))) var(--color-black) solid;
    padding-bottom: calc(20 * (var(--rate-sp)));
  }

  .LP_page .btn.btn_more a span { 
    display: block;
    font-size: calc(30 * (var(--rate-sp)));
    line-height: 1;
  }

  .LP_page .btn.btn_more a:before {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: calc(14 * (var(--rate-sp)));
    height:calc(25 * (var(--rate-sp)));
    background: url(../img/icon_arrow03.svg) no-repeat;
    background-size: 100%;
    content: "";
  } 
  /*------------------------Item Sec Common*/

  /*Item Sec Eye Palette------------------------*/
  .LP_page .sec_eyepalette .item_name_en {
    bottom: calc(-5 * (var(--rate-sp)));
    left: calc(-26 * (var(--rate-sp)));
    color: var(--color-green);
  }
  .LP_page .sec_eyepalette .item_pkg_img {
    width: calc(224 * (var(--rate-sp)));
  }
  .LP_page .sec_eyepalette .item_blk {
    margin-left: calc(80 * (var(--rate-sp)));
    margin-top: calc(103 * (var(--rate-sp)));
    gap: calc(77 * (var(--rate-sp)));
  }
  /*------------------------Item Sec Eye Palette*/

  /*Item Sec Mascara------------------------*/
  .LP_page .sec_mascara .item_name_en {
    bottom: calc(72 * (var(--rate-sp)));
    left: calc(-405 * (var(--rate-sp)));
    color: var(--color-orange);
  }
  .LP_page .sec_mascara .item_blk {
    margin-left: calc(472 * (var(--rate-sp)));
    margin-top: calc(73 * (var(--rate-sp)));
  }
  .LP_page .sec_mascara .item_blk ul li img {
    width: calc(210 * (var(--rate-sp)));
  }

  .LP_page .sec_mascara .modal_btn_list li img {
    width: calc(160 * (var(--rate-sp)));
  }
  /*------------------------Item Sec Mascara*/

  /*Item Sec Cheek------------------------*/
  .LP_page .sec_cheek {
    padding-top: calc(155 * (var(--rate-sp)));
  }
  .LP_page .sec_cheek .item_name_en {
    bottom: calc(-99 * (var(--rate-sp)));
    left: calc(-60 * (var(--rate-sp)));
    color: var(--color-pink);
    white-space: nowrap;
  }
  .LP_page .sec_cheek .item_blk {
    margin-left: calc(101 * (var(--rate-sp)));
    margin-top: calc(103 * (var(--rate-sp)));
    gap: calc(60 * (var(--rate-sp)));
  }

  .LP_page .sec_cheek .item_pkg_img {
    margin-top: calc(70 * (var(--rate-sp)));
    width: calc(210 * (var(--rate-sp)));
  }

  .LP_page .sec_cheek .item_blk ul li img {
    width: calc(340 * (var(--rate-sp)));
  }

  .LP_page .sec_cheek .modal_btn_list li img {
    width: calc(160 * (var(--rate-sp)));
  }

  .LP_page .sec_cheek .item_name {
    margin-top: calc(152 * (var(--rate-sp)));
  }
  /*------------------------Item Sec Cheek*/

  /*Item SecLip------------------------*/
  .LP_page .sec_lip {
    padding-top: calc(165 * (var(--rate-sp)));
  }
  .LP_page .sec_lip .item_name_en {
    bottom: calc(23 * (var(--rate-sp)));
    left: calc(-137 * (var(--rate-sp)));
    color: var(--color-yellow);
    line-height: 1.5;
  }
  .LP_page .sec_lip .item_blk {
    margin-left: calc(193 * (var(--rate-sp)));
    margin-top: calc(100 * (var(--rate-sp)));
    gap: calc(150 * (var(--rate-sp)));
  }
  .LP_page .sec_lip .item_pkg_img {
    margin-top: calc(0 * (var(--rate-sp)));
    width: calc(86 * (var(--rate-sp)));
  }
  .LP_page .sec_lip .item_blk ul li img {
    width: calc(260 * (var(--rate-sp)));
  }
  .LP_page .sec_lip .modal_btn_list li img {
    width: calc(160 * (var(--rate-sp)));
  }
  .LP_page .sec_lip .item_name {
    margin-top: calc(57 * (var(--rate-sp)));
  }
  .LP_page .sec_lip .item_label {
    margin-top: calc(16 * (var(--rate-sp)));
  }
  .LP_page .sec_lip .item_credit {
    margin-left: calc(130 * (var(--rate-sp)));
    margin-top: calc(6 * (var(--rate-sp)));
  }
  .LP_page .sec_lip .item_price:nth-of-type(2) {
    margin-top: calc(13 * (var(--rate-sp)));
  }
  /*------------------------Item SecLip*/

  /*Modal Common------------------------*/
  .LP_page .modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
  }

  .LP_page .modal__bg{
    background: rgba(0,0,0,0.4);
    height: 100vh;
    position: absolute;
    width: 100%;
  }

  .LP_page .modal__content{
    background: #ffffff;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    overflow-y: scroll;
    height: 100vh;
  }

  .LP_page .modal_inner{
    padding: calc(84 * (var(--rate-sp))) 0 calc(180 * (var(--rate-sp)));
  } 

  .LP_page #modal01 .modal_inner,
  .LP_page #modal02 .modal_inner{
    padding: calc(120 * (var(--rate-sp))) 0 calc(180 * (var(--rate-sp)));
  }

  .LP_page .modal__content .js-modal-close{
    position: sticky;
    width: calc(60 * (var(--rate-sp)));
    height: calc(60 * (var(--rate-sp)));
    top: calc(42 * (var(--rate-sp)));
    right: calc(55 * (var(--rate-sp)));
    float: right;
    cursor: pointer;
    z-index: 999;
  }

  .LP_page .modal__content .js-modal-close:before,
  .LP_page .modal__content .js-modal-close:after{
    content: '';
    display: block;
    width: calc(50 * (var(--rate-sp)));
    height: 1px;
    background: var(--color_regular);
    transform: rotate(45deg);
    position: absolute;
    top: calc(28 * (var(--rate-sp)));
    right: calc(0 * (var(--rate-sp)));
  }

  .LP_page .modal__content .js-modal-close:after{
    transform: rotate(-45deg);
  }


  .LP_page .modal_slider_inner {
    width: calc(750 * (var(--rate-sp)));
    margin: 0 auto;
  }

  .LP_page .modal_text {
    width: calc(590 * (var(--rate-sp)));
    margin: 0 auto;
    font-size: calc(26 * (var(--rate-sp)));
    line-height: 2;
      color: var(--color-black);
  }

  .LP_page .modal_zoom_area {
    position: relative;
    margin: calc(67 * (var(--rate-sp))) auto 0;
    width: calc(590 * (var(--rate-sp)));
    border: var(--color-black) solid calc(2 * (var(--rate-sp)));
    overflow: hidden;
  }

  .LP_page .modal_zoom_area img {
    margin: 0 auto;
    width: calc(590 * (var(--rate-sp)));
  }

  .LP_page .modal .slick-prev:before, 
  .LP_page .modal .slick-next:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: calc(29 * (var(--rate-sp)));
    height: calc(58 * (var(--rate-sp)));
    background: url(../img/icon_arrow05.svg) no-repeat;
    background-size: 100%;
    content: "";
  }

  .LP_page .modal .slick-prev, 
  .LP_page .modal .slick-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
  }

  .LP_page #modal03 .slick-prev, 
  .LP_page #modal03 .slick-next, 
  .LP_page #modal04 .slick-prev, 
  .LP_page #modal04 .slick-next, 
  .LP_page #modal05 .slick-prev, 
  .LP_page #modal05 .slick-next, 
  .LP_page #modal06 .slick-prev, 
  .LP_page #modal06 .slick-next, 
  .LP_page #modal07 .slick-prev, 
  .LP_page #modal07 .slick-next 
  {
    /* margin-top: calc(-205 * (var(--rate-sp))); */
  }

  .LP_page .modal .slick-prev {
    left: calc(20 * (var(--rate-sp)));
  }

  .LP_page .modal .slick-next {
    right: calc(20 * (var(--rate-sp)));
  }

  .LP_page .modal .slick-next:before {
    transform: rotate(180deg);
  }

  .LP_page .modal_blk01 {
    width: calc(590 * (var(--rate-sp)));
    margin: calc(16 * (var(--rate-sp))) auto 0;
    display: flex;
    justify-content: space-between;
  }

  .LP_page #modal03 .modal_blk01,
  .LP_page #modal04 .modal_blk01,
  .LP_page #modal05 .modal_blk01,
  .LP_page #modal06 .modal_blk01,
  .LP_page #modal07 .modal_blk01 {
    display: block;
    margin: calc(27 * (var(--rate-sp))) auto 0;
  }

  .LP_page #modal03 .modal_var_name,
  .LP_page #modal04 .modal_var_name,
  .LP_page #modal05 .modal_var_name,
  .LP_page #modal06 .modal_var_name,
  .LP_page #modal07 .modal_var_name {
    font-size: calc(26 * (var(--rate-sp)));
    margin: 0;
    text-align: center;
  }

  .LP_page #modal03 .modal_text,
  .LP_page #modal04 .modal_text,
  .LP_page #modal05 .modal_text,
  .LP_page #modal06 .modal_text,
  .LP_page #modal07 .modal_text {
    margin: calc(65 * (var(--rate-sp))) auto 0;
  }

  .LP_page .modal_var_name {
    font-size: calc(26 * (var(--rate-sp)));
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: left;
    margin-top: calc(20 * (var(--rate-sp)));
    color: var(--color-black);
  }

  .LP_page .modal_var_map {
    width: calc(142 * (var(--rate-sp)));
    margin-top: calc(15 * (var(--rate-sp)));
  }

  .LP_page .modal_var_detail {
    display: flex;
    flex-wrap: wrap;
    margin: calc(60 * (var(--rate-sp))) auto;
    width: calc(590 * (var(--rate-sp)));
    gap: calc(60 * (var(--rate-sp)));
    row-gap: calc(50 * (var(--rate-sp)));
  }

  .LP_page .modal_var_detail li {
    width: calc(265 * (var(--rate-sp)));
    color: var(--color-black);
  }

  .LP_page .modal_alphabet {
    display: flex;
    width: calc(32 * (var(--rate-sp)));
    height: calc(32 * (var(--rate-sp)));
    border-radius: 50%;
    background-color: var(--color-black);
    align-items: center;
    justify-content: center;
  }

  .LP_page .modal_alphabet span {
    margin-top: calc(-2 * (var(--rate-sp)));
    margin-left: calc(1 * (var(--rate-sp)));
    display: block;
    font-size: calc(22 * (var(--rate-sp)));
    line-height: 1;
    color: white;
  }

  .LP_page .modal_var_detail li:nth-of-type(1) .modal_alphabet span {
    margin-top: calc(-3 * (var(--rate-sp)));
  }

  .LP_page .modal_var_detail li:nth-of-type(2) .modal_alphabet span {
    margin-left: calc(2 * (var(--rate-sp)));
  }

  .LP_page .modal_var_detail li:nth-of-type(4) .modal_alphabet span {
    margin-left: calc(2 * (var(--rate-sp)));
  }
  

  .LP_page .modal_blk02 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .LP_page .modal_color_name {
    margin-top: calc(20 * (var(--rate-sp)));
    font-size: calc(22 * (var(--rate-sp)));
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
    color: var(--color-black);
  }

  .LP_page .modal_sample {
    margin-top: calc(-32 * (var(--rate-sp)));
    width: calc(110 * (var(--rate-sp)));
  }

  .LP_page .modal_var_text {
    margin-top: calc(18 * (var(--rate-sp)));
    font-size: calc(22 * (var(--rate-sp)));
    line-height: 2;
    letter-spacing: 0.05em;
    text-align: justify;
    color: var(--color-black);
  }

  .LP_page .btn.btn_buy a {
    position: relative;
    margin: calc(70 * (var(--rate-sp))) auto 0;
    width: calc(190 * (var(--rate-sp)));
    border-bottom: calc(2 * (var(--rate-sp))) var(--color-black) solid;
    padding-bottom: calc(20 * (var(--rate-sp)));
  }

  .LP_page .btn.btn_buy a span { 
    display: block;
    font-size: calc(30 * (var(--rate-sp)));
    line-height: 1;
    color: var(--color-black);
  }

  .LP_page .btn.btn_buy a:before {
    position: absolute;
    top: calc(-6 * (var(--rate-sp)));
    right: 0;
    display: block;
    width: calc(34 * (var(--rate-sp)));
    height: calc(35 * (var(--rate-sp)));
    background: url(../img/icon_cart.svg) no-repeat;
    background-size: 100%;
    content: "";
  }
  /*------------------------Modal Common/

  /* Zoom------------------------ */

    .LP_page .slick-slider {
      -ms-touch-action: auto !important;
      touch-action: auto !important;
    }
  
    .LP_page .modal_zoom_area {
  
    }
  
    .LP_page .zoom-btn {
      position: absolute;
      bottom: calc(30 * (var(--rate-sp)));
      right: calc(30 * (var(--rate-sp)));
      width: calc(35 * (var(--rate-sp)));
      height: calc(35 * (var(--rate-sp)));
      border: none;
      background-color: transparent;
      background-image: url('../img/icon_zoomin.svg');
      background-size: contain;
      background-repeat: no-repeat;
      cursor: pointer;
      z-index: 100;
    }
  
    .LP_page .zoom-btn.change {
      background-image: url('../img/icon_zoomout.svg');
    }
  
  /* ------------------------Zoom */

  /*Make up Look------------------------*/
  .LP_page .sec_mkup_ttl {
    margin-left: calc(40 * (var(--rate-sp)));
    font-family: var(--font_eng);
    font-size:calc(30 * (var(--rate-sp)));
    text-align: left;
    line-height: 0.5;
    text-transform: uppercase;
  }

  .LP_page .sec_mkup_ttl span {
    font-size:calc(60 * (var(--rate-sp)));
    letter-spacing: 0;
  }

  .LP_page .makeup_slider {
    position: relative;
    margin-top: calc(20 * (var(--rate-sp)));
  }

  .LP_page .thumbnail {
    position: absolute;
    right: 0;
    top: calc(-150 * (var(--rate-sp)));
  }

  .LP_page .thumbnail .slick-track {
    width: calc(416 * (var(--rate-sp))) !important;
    transform: unset !important;
    display: flex;
    justify-content: flex-end;
  }

  .LP_page .thumbnail li {
    width: calc(120 * (var(--rate-sp))) !important;
    margin-left: calc(17 * (var(--rate-sp)));
  }

  .LP_page .thumbnail .slick-current{
    position: relative;
  }

  .LP_page .thumbnail .slick-current:after {
    content: '';
    position: absolute;
    top:0; 
    left:0;
    width:calc(120 * (var(--rate-sp))); 
    height:calc(120 * (var(--rate-sp)));
    background: rgba(255,255,255,0.4);
  }

  .LP_page .makeup_slider .slider02 img {
    width: calc(750 * (var(--rate-sp)));
  }

  .LP_page .makeup_item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(40 * (var(--rate-sp)));
    row-gap: calc(30 * (var(--rate-sp)));
    margin-top: calc(80 * (var(--rate-sp)));
  }

  .LP_page .mkup_item_img {
    width: calc(170 * (var(--rate-sp)));
    margin: 0 auto;
  }

  .LP_page .mkup_item_name {
    margin-top:calc(33 * (var(--rate-sp)));
    font-size: calc(20 * (var(--rate-sp)));
    line-height: 2;
  }

  .LP_page .makeup_step {
    width: calc(630 * (var(--rate-sp)));
    margin: calc(53 * (var(--rate-sp))) 0 0 calc(65 * (var(--rate-sp)));
  }

  .LP_page .makeup_step li {
    font-size: calc(26 * (var(--rate-sp)));
    line-height: 2;
    text-align: justify;
  }

  .LP_page .accordion_outside {
    position: relative;
    margin-top: calc(0 * (var(--rate-sp)));
  }

  .LP_page .accordion_wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .8s;
  }

  .LP_page .open > .accordion_wrap {
    grid-template-rows: 1fr;
  }

  .LP_page .accordion_inner {
    position: relative;
    padding-bottom: 3.6rem;
    min-height: calc(520 * (var(--rate-sp)));;
    overflow: hidden;
  }

  .LP_page .accordion_inner::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(520 * (var(--rate-sp)));
    background: linear-gradient(transparent, var(--color-white));
    content: "";
    z-index: 3;
  }

  .LP_page .open .accordion_inner::before {
    background: transparent;
  }

  .LP_page .accordion_btn_area {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: calc(-2 * (var(--rate-sp)));
    z-index: 5;
  }

  .LP_page .open .accordion_btn_area {
    bottom: calc(-123 * (var(--rate-sp)));
  }

  .LP_page .accordion_btn {
    position: relative;
    width: calc(280 * (var(--rate-sp)));
    margin: 0 auto;
    font-family: var(--font_eng);
    font-size: calc(30 * (var(--rate-sp)));
    line-height: 1;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
  }

  .LP_page .accordion_btn span {
    letter-spacing: 0.04em;
  }

  .LP_page .accordion_btn .to_open {
    margin-top:calc(80 * (var(--rate-sp)));
  }

  .LP_page .accordion_btn .to_open:before,
  .LP_page .accordion_btn .to_close:before {
    position: absolute;
    top: calc(20 * (var(--rate-sp)));
    left: 0;
    display: block;
    width: calc(280 * (var(--rate-sp)));
    height: calc(110 * (var(--rate-sp)));
    background: url(../img/icon_arrow01.svg) no-repeat;
    background-size: contain;
    transform: rotate(180deg);
    content: "";
  }

  .LP_page .open .accordion_btn .to_close:before {
    top: calc(-70 * (var(--rate-sp)));
    transform: rotate(0);
  }

  .LP_page .accordion_btn .to_open,
  .LP_page .open .accordion_btn .to_close {
    display: block;
  }

  .LP_page .accordion_btn .to_close,
  .LP_page .open .accordion_btn .to_open {
    display: none;
  }

  .LP_page .mkup02 {
    margin-top: calc(170 * (var(--rate-sp)));
    padding-top: calc(120 * (var(--rate-sp)));
  }
  /*------------------------Make up Look*/

  /*Release Day------------------------*/
  .LP_page .sec_release {
    width:calc(670 * (var(--rate-sp)));
    margin: calc(240 * (var(--rate-sp))) auto 0;
    padding: calc(80 * (var(--rate-sp))) 0 calc(90 * (var(--rate-sp)))!important;
    border: var(--color-black) solid calc(2 * (var(--rate-sp)));
  }

  .LP_page .sec_release .sec_ttl {
    font-family: var(--font_eng);
    font-size: calc(47 * (var(--rate-sp)));
    line-height: 1;
    letter-spacing: 0.17em;
    font-weight: 400;
    text-transform: uppercase;
  }

  .LP_page .release_list {
    display: flex;
    flex-direction: column;
    margin: calc(70 * (var(--rate-sp))) auto 0;
    gap: calc(20 * (var(--rate-sp)));
  }

  .LP_page .release_list li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(40 * (var(--rate-sp)));
    width: calc(590 * (var(--rate-sp)));
    height: calc(100 * (var(--rate-sp)));
    background-color: var(--color_gray);
    font-size: calc(26 * (var(--rate-sp)));
    margin: 0 auto;
    line-height: 1;
  }

  .LP_page .release_txt, 
  .LP_page .release_date {
    height: fit-content;
  }

  .LP_page .release_decor {
    display: block;
    width: calc(170 * (var(--rate-sp)));
    height: calc(2 * (var(--rate-sp)));
    background-color: var(--color-black);
  }

  .LP_page .note {
    font-size: calc(20 * (var(--rate-sp)));
    margin: calc(43 * (var(--rate-sp))) auto 0;
    line-height: 2;
    color: var(--color_gray02);
  }
  /*------------------------Release Day*/

  /*------------------------Happy Accident*/
  .LP_page .sec_ha {
    padding: calc(180 * (var(--rate-sp))) 0 calc(185 * (var(--rate-sp))) !important;
    background-image: url(../img/ha_bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .LP_page .sec_ha .sec_ttl {
    font-family: var(--font_eng);
    font-size: calc(47 * (var(--rate-sp)));
    line-height: 1;
    letter-spacing: 0.17em;
    font-weight: 400;
    color: var(--color-pink);
  }

  .LP_page .sec_ha_text {
    margin: calc(57 * (var(--rate-sp))) auto 0;
    width: calc(670 * (var(--rate-sp)));
    font-size: calc(22 * (var(--rate-sp)));
    line-height: 2;
  }

  /*Happy Accident------------------------*/

  /*btn------------------------*/
  .LP_page .btn {
    display: block !important;
    border: none !important;
    background: none !important;
    min-width: auto !important;
    white-space: nowrap;
    padding: 0;
  }
  
  .LP_page .btn a {
    position: relative;
    display: flex;
    justify-content: flex-start;
    font-size: calc(30 * (var(--rate-sp)));
    border-bottom: 1px solid var(--color_regular);
  }
  
  .LP_page .btn a span {
    position: relative;
    width: 100%;
    text-align: left;
  }
  
  .LP_page .btn a span:before {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-top: 0.1rem;
    display: block;
    width: calc(14 * (var(--rate-sp)));
    height: calc(26 * (var(--rate-sp)));
    background: url(../img/icon_arrow01.svg) no-repeat;
    background-size: contain;
    content: "";
  }
  
  .LP_page .btn.btn_buynow a {
    margin: calc(80 * (var(--rate-sp))) auto 0;
    padding-bottom: calc(15 * (var(--rate-sp)));
    width: calc(190 * (var(--rate-sp)));
  }
  
  .LP_page .btn.btn_all a {
    margin: 0 auto;
    padding-bottom: calc(25 * (var(--rate-sp)));
    width: calc(600 * (var(--rate-sp)));
  }

  .LP_page .btn.btn_all a span {
    letter-spacing: 0;
    letter-spacing: 0.04em;
  }

  .LP_page .btn.btn_all a:before {
    position: absolute;
    bottom: calc(24 * (var(--rate-sp)));
    right: calc(0 * (var(--rate-sp)));
    transform: translateY(-50%);
    display: block;
    width: calc(14 * (var(--rate-sp)));
    height: calc(25 * (var(--rate-sp)));
    background: url(../img/icon_arrow04.svg) no-repeat;
    background-size: contain;
    content: "";
  }
  
  .LP_page .modal_btn {
    display: block;
    margin: calc(100 * (var(--rate-sp))) auto 0;
    padding: calc(40 * (var(--rate-sp))) 0 calc(30 * (var(--rate-sp)));
    width: calc(650 * (var(--rate-sp)));
    font-family: var(--font_mix);
    font-size: calc(26 * (var(--rate-sp)));
    line-height: 2;
    text-align: center;
    background-color: var(--color-light);
  }
  
  .LP_page .modal_btn span {
    position: relative;
    margin-left: calc(-106 * (var(--rate-sp)));
  }
  
  .LP_page .modal_btn span:before {
    position: absolute;
    bottom: 50%;
    right: calc(-100 * (var(--rate-sp)));
    margin-bottom: calc(3 * (var(--rate-sp)));
    transform: translateY(50%);
    display: block;
    width: calc(36 * (var(--rate-sp)));
    height: calc(36 * (var(--rate-sp)));
    background: url(../img/icon_plus.svg) no-repeat;
    background-size: contain;
    content: "";
  }
  /*---------------------------btn*/
  
}

/*------------------------------------------------------SP DESIGN*/