@charset "UTF-8";

:root {
  --rate: 46.8rem / 780;
  --font-lp_eng: "lato", sans-serif;
  --font-lp_jpn: "ryo-gothic-plusn", serif;
  --font-lp_eng02: "linotype-didot", serif;
  --color_lightpink01: #f3d9e4;
  --color_lightpink02: #fceff3;
  --color_lightyellow: #f8f5e8;
  --color_lightyellow: ;
  --color_darkpink: #ea95b2;
  --color_black:#1f1f1f;
  --color_gray01:#979797;
  --color_gray02:#666666;
  --color_gray03:#828282;
  --color_gray04:#858585;
  --color_white: #ffffff;
}

/*--------------------------------
            CSS Animation
--------------------------------*/
#lp_contents .anim {
  opacity: 0;
}
#lp_contents .anim_enable {
  -webkit-animation: opa 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0.2s 1 forwards;
          animation: opa 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0.2s 1 forwards;
}
@-webkit-keyframes opa {
  2% {
    opacity: 0;
    filter: blur(0.8rem);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes opa {
  2% {
    opacity: 0;
    filter: blur(0.8rem);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* slider
==================================*/

#lp_contents .slick-track {
  display: flex;
}

#lp_contents .slick-slide {
  height: auto !important;
}

#lp_contents .bg01 {
  position: relative;
}

#lp_contents .bg01::before {
  position: absolute;
  top: calc(-180 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  width: calc(780 * (var(--rate)));
  height: calc(180 * (var(--rate)));
  background: url(../img/bg_select02.png?251022) no-repeat;
  background-size: 100%;
  content: "";
  z-index: 2;
}

#lp_contents .bg02 {
  background: url(../img/bg_renew.png?250908) no-repeat;
  background-size: 100%;
}

#lp_contents .bg03 {
  background-color: rgba(252, 252, 252, 0.7);
}

/* textAnime
==================================*/
#lp_contents .js-textAnime span {
  transition: all 0;
  opacity: 0;
}



/*--------------------------------
                共 通
 --------------------------------*/

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

#FooterWrap,
.archive_area{
  position: relative;
  z-index: 0;
  background-color: var(--color_white);
  z-index: 999;
}

#footer {
  margin-top: 0;
}

#header_txt_slider,
#header_img_slider {
  position: relative;
  z-index: 100;
}

#lp_contents *{
  box-sizing: border-box;
}

#lp_contents{
  font-family: 'Lato', 'ryo-gothic-plusn', sans-serif;
  font-feature-settings: "palt";
  font-size: calc(24 * (var(--rate)));
  letter-spacing: 0.125em;
  line-height: 2.2;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative;
  background-color: var(--color_lightpink01);
}

#lp_contents .sp_only{display: none;}
#lp_contents img{width: 100%;display: block;height: auto; image-rendering: -webkit-optimize-contrast; -webkit-backface-visibility: hidden;}
#lp_contents a{display: block;width: 100%;cursor: pointer;transition: all 0.5s;color: inherit;}
#lp_contents a:hover{opacity: .8}
#lp_contents ul li,#lp_contents ol li{list-style: none;}
#lp_contents section{
  position: relative;
}
#lp_contents .lp_inner{
  position: relative;
  z-index: 3;
  width: 46.8rem;
  order: 2;
  background-color: var(--color_lightpink01);
}

#lp_contents .sec {
  position: relative;
}

#lp_contents .link_none {
  pointer-events: none;
  display: inline-block;
  display: -webkit-inline-box;
}

/*------------ Text ------------*/
#lp_contents h1,
#lp_contents h2,
#lp_contents h3 {
  padding: 0;
  float: none;
  font-weight: normal; 
}

#lp_contents p {
  display: block;
  margin: 0;
  font-size: calc(24 * (var(--rate)));
  letter-spacing: 0.125em;
  line-height: 2.2;
}
#lp_contents sup{
  font-size: 70%;
  margin-top: -0.6rem;
}
#lp_contents .note{
  display: inline-block;
  font-size: calc(20 * (var(--rate)));
  line-height: 2;
}
#lp_contents .bold{
  font-weight: bold;
}


/*------------ MV ------------*/
#lp_contents .sec_mv {
  padding: calc(60 * (var(--rate))) 0;
  background-color: var(--color_lightpink01);
}

#lp_contents .sec_mv:before {
  position: absolute;
  bottom:calc(0 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: calc(780 * (var(--rate)));
  height: calc(20 * (var(--rate)));
  background: url(../img/decor02.png) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .sec_mv .decor {
  margin: 0 auto calc(60 * (var(--rate)));
}

#lp_contents .mv {

}

#lp_contents .title {
  width: calc(780 * (var(--rate)));
  margin: calc(50 * (var(--rate))) auto 0;
}

#lp_contents .lead {
  margin: calc(45 * (var(--rate))) auto 0;
  font-size: calc(26 * (var(--rate)));
  color: var(--color_white);
  text-align: center;
}

/*------------ Main Image ------------*/
#lp_contents .main_img_blk {
  position: relative;
  padding: calc(190 * (var(--rate))) 0 calc(300 * (var(--rate))) 0;
  background-color: var(--color_lightpink01);
}

#lp_contents .main_img_blk:before {
  position: absolute;
  bottom: calc(180 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: calc(780 * (var(--rate)));
  height: calc(20 * (var(--rate)));
  background: url(../img/decor03.png) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .main_img_flex {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: calc(100 * (var(--rate)));
}

#lp_contents .main_img_flex:before {
  position: absolute;
  bottom: calc(84 * (var(--rate)));
  left: calc(-57 * (var(--rate)));
  display: block;
  width: calc(275 * (var(--rate)));
  height: calc(260 * (var(--rate)));
  background: url(../img/ribbon01.png) no-repeat;
  background-size: 100%;
  content: "";
  z-index: 5;
}

#lp_contents .main_img_group {
  position: relative;
}

#lp_contents .main_img {
  width: calc(442 * (var(--rate)));
}

#lp_contents .main_img_flex .main_img:not(.main_img_group .main_img) {
  margin-left: calc(180 * (var(--rate)));
  margin-top: calc(-6 * (var(--rate)));
}

#lp_contents .main_decor {
  position: absolute;
}

#lp_contents .text_decor01 {
  top: calc(-69 * (var(--rate)));
  left: calc(44 * (var(--rate)));
  width: calc(354 * (var(--rate)));
}

#lp_contents .text_decor02 {
  top: calc(45 * (var(--rate)));
  right: calc(169 * (var(--rate)));
  width: calc(44.58 * (var(--rate)));
}

#lp_contents .charm_indicate {
  position: absolute;
  z-index: 10;
}

#lp_contents .indicator01 {
  left: calc(161 * (var(--rate)));
  bottom: calc(-73 * (var(--rate)));
}

#lp_contents .indicator02 {
  right: calc(258 * (var(--rate)));
  bottom: calc(25 * (var(--rate)));
}

#lp_contents .indicator01 img{
  width: calc(80 * (var(--rate)));
}

#lp_contents .indicator02 img{
  width: calc(27.5 * (var(--rate)));
}

#lp_contents .charm_name_anim {
  font-size: calc(20 * (var(--rate)));
  color: var(--color_white);
  text-align: left;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#lp_contents .indicator01 .charm_name_anim {
  margin-top: calc(-4 * (var(--rate)));
  margin-left: calc(52 * (var(--rate)));
}

#lp_contents .indicator02 .charm_name_anim {
  margin-top: calc(-4 * (var(--rate)));
  margin-left: calc(-74 * (var(--rate)));
}

/*------------ Choose Your Own Rouge & Charm ------------*/
#lp_contents .sec_select {
  padding: calc(5 * (var(--rate))) 0 calc(180 * (var(--rate)));
  margin-top: calc(190 * (var(--rate)));
  background-color: var(--color_white);
}

#lp_contents .sec_select .sec_ttl {
  width: calc(636 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .sec_select .text {
  margin: calc(35 * (var(--rate))) auto 0 !important;
  font-size: calc(24 * (var(--rate))) !important;
  color: var(--color_gray02) !important;
}

#lp_contents .sec_select .note {
  width: calc(670 * (var(--rate)));
  margin: calc(30 * (var(--rate))) auto calc(102 * (var(--rate))) !important;
  font-size: calc(18 * (var(--rate))) !important;
  color: var(--color_gray02) !important;
  text-align: left !important;
  line-height: 2.4;
}


/*------------ Renewal Open ------------*/
#lp_contents .sec_renewal {
  padding: calc(180 * (var(--rate))) 0 calc(70 * (var(--rate)));
}

#lp_contents .date {
  width: calc(198 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .ribbon {
  width: calc(45 * (var(--rate)));
  margin: calc(60 * (var(--rate))) auto 0;
}

#lp_contents .sec_renewal .sec_subttl {
  margin: calc(15 * (var(--rate))) auto 0;
  font-size: calc(40 * (var(--rate)));
  color: var(--color_black);
  text-align: center;
}

#lp_contents .sec_renewal .sec_ttl {
  width: calc(518 * (var(--rate)));
  margin: calc(25 * (var(--rate))) auto 0;
}

#lp_contents .sec_renewal .text {
  margin: calc(30 * (var(--rate))) auto 0;
  font-size: calc(26 * (var(--rate)));
  line-height: 2.4;
  color: var(--color_gray02);
  text-align: center;
}

#lp_contents .sec_renewal .more {
  margin: calc(20 * (var(--rate))) auto 0;
  font-size: calc(26 * (var(--rate)));
  color: var(--color_gray02);
  text-align: center;
  text-decoration: underline;
}

/*------------ Limited Charm ------------*/

#lp_contents .sec_limit {
  padding: calc(130 * (var(--rate))) 0 calc(110 * (var(--rate)));
}

#lp_contents .sec_limit:before {
  position: absolute;
  top:calc(7 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: calc(780 * (var(--rate)));
  height: calc(20 * (var(--rate)));
  background: url(../img/decor05.png) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .sec_limit .date {
  width: calc(365 * (var(--rate)));
  margin: 0 auto;
}


#lp_contents .sec_limit .sec_ttl {
  width: calc(548 * (var(--rate)));
  margin: calc(45 * (var(--rate))) auto 0;
}

#lp_contents .sec_limit .text {
  margin: calc(60 * (var(--rate))) auto 0;
  font-size: calc(24 * (var(--rate)));
  color: var(--color_black);
  text-align: center;
}

#lp_contents .sec_limit .text:nth-of-type(2) {
  margin: calc(35 * (var(--rate))) auto 0;
}
#lp_contents .sec_limit .text:nth-of-type(3) {
  margin: calc(65 * (var(--rate))) auto 0;
}


#lp_contents .sec_limit .text .pink{
  color: var(--color_darkpink);
}

#lp_contents .sec_limit .slider {
  margin: calc(70 * (var(--rate))) auto 0;
}

#lp_contents .sec_limit .slider_img {
  width: calc(460 * (var(--rate))) !important;
  margin: 0 calc(7.5 * (var(--rate)));

}

#lp_contents .sec_limit .detail {
  width: calc(720 * (var(--rate)));
  margin: calc(50 * (var(--rate))) auto 0;
  padding: calc(30 * (var(--rate)));
  font-size: calc(20 * (var(--rate)));
  color: var(--color_gray02);
  line-height: 2.2;
  text-align: center;
  border: var(--color_darkpink) dashed 1px;
}

#lp_contents .sec_limit .note {
  margin: calc(50 * (var(--rate))) auto 0;
  font-size: calc(18 * (var(--rate)));
  color: var(--color_gray02);
  line-height: 2.2;
  text-align: center;
}

/*------------ Limited Kit ------------*/
#lp_contents .sec_kit {
  padding: calc(130 * (var(--rate))) 0 calc(130 * (var(--rate)));
}

#lp_contents .sec_kit:before, 
#lp_contents .sec_kit:after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: calc(780 * (var(--rate)));
  height: calc(20 * (var(--rate)));
  background: url(../img/decor05.png) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .sec_kit:before {
  top:calc(-10 * (var(--rate)));
}

#lp_contents .sec_kit:after {
  bottom:calc(10 * (var(--rate)));
}

#lp_contents .sec_kit .sec_ttl {
  width: calc(375 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .sec_kit .kit {
  width: calc(720 * (var(--rate)));
  margin: calc(70 * (var(--rate))) auto 0;
}

#lp_contents .sec_kit .text {
  margin: calc(65 * (var(--rate))) auto 0;
  font-size: calc(24 * (var(--rate)));
  color: var(--color_black);
  text-align: center;
}

#lp_contents .sec_kit .detail {
  width: calc(640 * (var(--rate)));
  margin: calc(60 * (var(--rate))) auto 0;
  font-size: calc(20 * (var(--rate)));
  color: var(--color_gray02);
  line-height: 2;
  text-align: justify;
}

#lp_contents .sec_kit .note {
  width: calc(640 * (var(--rate)));
  margin: calc(40 * (var(--rate))) auto 0;
  font-size: calc(20 * (var(--rate)));
  color: var(--color_darkpink);
  line-height: 2;
  text-align: left;
}

/*------------ Shop ------------*/
#lp_contents .sec_shop {
  padding: calc(115 * (var(--rate))) 0 calc(160 * (var(--rate)));
  background-color: #fbf9f1;
}

#lp_contents .sec_shop .sec_inner {
  position: relative;
  width: calc(680 * (var(--rate)));
  padding: calc(80 * (var(--rate))) calc(60 * (var(--rate))) calc(66 * (var(--rate)));
  margin: 0 auto;
  border: 1px solid var(--color_darkpink);
}

#lp_contents .sec_shop .decor {
  position: absolute;
  display: block;
  content: "";
  background-color: #fbf9f1;
}

#lp_contents .sec_shop .decor img {
  position: relative;
  z-index: 5;
}

#lp_contents .sec_shop .decor01 {
  top: calc(-18 * (var(--rate)));
  right: calc(207 * (var(--rate)));
  width: calc(72 * (var(--rate)));
  height: calc(48 * (var(--rate)));
}

#lp_contents .sec_shop .decor02 {
  bottom: calc(-33 * (var(--rate)));
  left: calc(47 * (var(--rate)));
  width: calc(66 * (var(--rate)));
  height: calc(44 * (var(--rate)));
}

#lp_contents .sec_shop .sec_inner:after {
  position: absolute;
  display: block;
  top: calc(25 * (var(--rate)));
  right: calc(27 * (var(--rate)));
  width: calc(161 * (var(--rate)));
  height: calc(74 * (var(--rate)));
  background: url(../img/box_ribbon02.png) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .sec_shop .sec_ttl {
  width: calc(228 * (var(--rate)));
  margin: 0;
}

#lp_contents .sec_shop .sec_subttl {
  margin-top: calc(30 * (var(--rate)));
  font-size: calc(30 * (var(--rate)));
  color: var(--color_black);
  text-align: left;
  letter-spacing: 0.125em;
}

#lp_contents .sec_shop .map {
  margin: calc(40 * (var(--rate))) auto 0;
  width: calc(560 * (var(--rate)));
  height: calc(280 * (var(--rate)));
  border-radius: calc(20 * (var(--rate)));
  filter: drop-shadow(0 0 10px rgba(145, 98, 108, 0.2));
  overflow: hidden;
}

#lp_contents .sec_shop .map iframe{
  width: calc(560 * (var(--rate)));
  height: calc(280 * (var(--rate)));
}

#lp_contents .sec_shop .info {
  position: relative;
  margin: calc(37 * (var(--rate))) auto 0;
  font-size: calc(24 * (var(--rate)));
  color: var(--color_black);
  text-align: left;
  letter-spacing: 0.1em;
  line-height: 2.2;
}

#lp_contents .sec_shop .info a {
  display: inline-block;
}

#lp_contents .sec_shop .info:after {
  position: absolute;
  display: block;
  width: calc(66 * (var(--rate)));
  height: calc(44 * (var(--rate)));
  content: "";
}

#lp_contents .sec_shop .info:after {
  bottom: calc(-142 * (var(--rate)));
  left: calc(79 * (var(--rate)));
  background: url(../img/box_ribbon04.png) no-repeat;
  background-size: 100%;
}

/*--------------------------------
            Layout  PC
--------------------------------*/
@media screen and (min-width: 768px){

  #lp_contents .pc_bg {
    background: #f3d9e4;
  }

  #lp_contents .pc_bg::before {
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
    background: url(../img/bg.png) no-repeat;
    background-size: 100%;
    content: "";
    top: 0;
    left: 0;
    z-index: 1;
  }

  #lp_contents .full_area{
    position: fixed;
    top: 0;
    bottom: 0;
    margin: auto;

    width: calc(calc(100% - 46.8rem) / 2);

    padding: 3rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #lp_contents .left_area{
    left: 0;
    order: 1;
  }

  #lp_contents .right_area{
    right: 0;
    order: 3;
  }



}


/*--------------------------------
            Responsive
 --------------------------------*/

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



/*--------------------------------
            Layout  SP
 --------------------------------*/
@media (max-width: 767px) {

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

  .page-share-btn{
    height: 0;
  }

  #share{
    z-index: 100 !important;
    bottom: calc(200 * (100vw / 750)) !important;
  }

  #FooterWrap {
    margin-top: -7rem;
  }

  #lp_contents .sp_only{display: block;}
  #lp_contents .pc_only{display: none;}
  #lp_contents a:hover{opacity: 1}


}


/* accordion
==================================*/

#lp_contents .accordion_area .accordion:first-of-type {
  margin-bottom: calc(30 * (var(--rate)));
}

#lp_contents .accordion_ttl {
  position: relative;
  display: flex;
  gap: calc(45 * (var(--rate)));
  width: calc(780 * (var(--rate)));
  margin: 0 auto;
  padding: calc(20 * (var(--rate))) 0;
  background-color: var(--color_lightpink02);
  cursor: pointer;
}

#lp_contents .accordion_ttl:before,
#lp_contents .accordion_ttl:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(98 * (var(--rate)));
  margin-top: calc(1 * (var(--rate)));
  width: calc(32 * (var(--rate)));
  height: 1px;
  border-bottom: 1px solid var(--color_gray02);
  border-radius: 5px;
  z-index: 0;
  content: "";
}

#lp_contents .accordion_ttl:after {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

#lp_contents .accordion_ttl.is-active:after {
  transform: rotate(0deg);
}

#lp_contents .accordion_area .accordion:first-of-type .accordion_ttl img {
  width: calc(100 * (var(--rate))) !important;
  margin-left: calc(100 * (var(--rate)));
}

#lp_contents .accordion_area .accordion:last-of-type .accordion_ttl img {
  width: calc(102 * (var(--rate))) !important;
  margin-left: calc(99 * (var(--rate)));
}

#lp_contents .accordion_ttl .ttl_text {
  width: calc(370 * (var(--rate)));
  font-size: calc(36 * (var(--rate)));
  text-align: center;
  margin-top: calc(7 * (var(--rate)));
  letter-spacing: 0.125em;
}

#lp_contents .accordion_inner {
  display: none; /* 初期状態はすべて閉じる */
  margin: calc(60 * (var(--rate))) auto calc(80 * (var(--rate)));
}

#lp_contents .charm_accordion .accordion_inner {
  margin: calc(60 * (var(--rate))) auto 0;;
}

#lp_contents .charm_list_wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

#lp_contents .charm_list_wrap::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

#lp_contents .charm_list {
  display: flex;
  justify-content: center;
  gap: calc(10 * (var(--rate)));
  margin-left:calc(190 * (var(--rate)));
  flex-wrap: nowrap; 
}

#lp_contents .charm {
  flex: 0 0 auto;              /* 横幅固定、縮まない */
  padding-bottom: calc(15 * (var(--rate)));
  width: calc(220 * (var(--rate)));
  border: 1px solid transparent; /* デフォルト */
  cursor: pointer;
}

#lp_contents .charm.is-selected {
  border: 1px solid var(--color_darkpink); /* 選択時は赤枠 */
}

#lp_contents .charm_img {
  display: block;
  width: calc(200 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .charm_name {
  margin: calc(20 * (var(--rate))) auto 0;
  font-size: calc(22 * (var(--rate)));
  line-height: 1.6;
  color: var(--color_gray03);
}

/* Preview */
#lp_contents .preview {
  position: relative;
  text-align: center;
  width: calc(670 * (var(--rate)));
  margin: calc(70 * (var(--rate))) auto 0;
  padding: calc(100 * (var(--rate))) 0 calc(115 * (var(--rate)));
  border: 1px solid var(--color_darkpink);
}

#lp_contents .preview:before,
#lp_contents .preview:after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: calc(670 * (var(--rate)));
  height: calc(18 * (var(--rate)));
  background: url(../img/decor_preview.png?250827) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .preview:before {
  top:calc(17 * (var(--rate)));
}

#lp_contents .preview:after {
  bottom:calc(12 * (var(--rate)));
}

#lp_contents .preview_inner {
  position: relative;
  display: flex;
  justify-content: center;
  gap: calc(60 * (var(--rate)));
}

#lp_contents .preview_inner:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin-top: calc(-42 * (var(--rate)));
  display: block;
  width: calc(50 * (var(--rate)));
  height: calc(50 * (var(--rate)));
  background: url(../img/icn_plus.svg) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .preview_img img {
  width: calc(250 * (var(--rate)));
}

#lp_contents .preview_name {
  width: calc(240 * (var(--rate)));
  margin: calc(30 * (var(--rate))) auto 0;
  font-size: calc(22 * (var(--rate)));
  line-height: 1.8;
}

#lp_contents .btn_cart {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(60 * (var(--rate))) auto 0;
  width: calc(440 * (var(--rate)));
  height: calc(80 * (var(--rate)));
  background-color: var(--color_darkpink);
}

#lp_contents .btn_cart span {
  position: relative;
  display: block;
  font-size: calc(32 * (var(--rate)));
  color: var(--color_white);
  margin-left: calc(60 * (var(--rate)));
  margin-top: calc(-5 * (var(--rate)));
  letter-spacing: 0.125em;
}

#lp_contents .btn_cart span:before {
  position: absolute;
  top: 50%;
  left: calc(-60 * (var(--rate)));
  transform: translateY(-50%);
  display: block;
  width: calc(40 * (var(--rate)));
  height: calc(40 * (var(--rate)));
  background: url(../img/icn_cart.svg) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .btn_cart.btn_comingsoon {
  background-color: var(--color_gray01);
  font-weight: 300;
  cursor: none;
}

#lp_contents .btn_cart.btn_comingsoon:hover {
  opacity: 1;
}

#lp_contents .reset {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(25 * (var(--rate))) auto 0;
  width: calc(440 * (var(--rate)));
  height: calc(67 * (var(--rate)));
  border: 1px solid var(--color_gray04);
  background-color: var(--color_white);
}

#lp_contents .reset span {
  position: relative;
  display: block;
  font-size: calc(22 * (var(--rate)));
  color: var(--color_gray04);
  margin-left: calc(53 * (var(--rate)));
  letter-spacing: 0.125em;
}

#lp_contents .reset span:before {
  position: absolute;
  top: 50%;
  left: calc(-50 * (var(--rate)));
  transform: translateY(-50%);
  display: block;
  width: calc(30 * (var(--rate)));
  height: calc(30 * (var(--rate)));
  background: url(../img/icn_reset.svg) no-repeat;
  background-size: 100%;
  content: "";
}

/* PC Preview Fixed */
#lp_contents .right_area .preview {
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  margin: 0 auto;
  padding: 1.4rem 1rem 2rem 1rem;
  width: 29rem;
  background-color: var(--color_white);
  border: none;
}

#lp_contents .right_area .preview:before,
#lp_contents .right_area .preview:after {
  display: none;
}

#lp_contents .right_area .preview_inner {
  gap: 1rem;
}

#lp_contents .right_area .preview_inner:before {
  margin-top: -2rem;
  display: block;
  width: 2rem;
  height: 2rem;
}

#lp_contents .right_area .preview_item {
  width: 13rem;
  margin: 0 auto;
}

#lp_contents .right_area .preview_img img {
  width: 5.5rem;
  margin: 0 auto;
}

#lp_contents .right_area .preview_name {
  width: 13rem;
  margin-top: .7rem;
  font-size: 1.2rem;
  line-height: 1.6;
}

#lp_contents .right_area .btn_cart {
  margin: 1.7rem auto 0;
  width: 16rem;
  height: 4rem;
}

#lp_contents .right_area .btn_cart span {
  font-size: 1.2rem;
  margin-left: 3rem;
  margin-top: 0.1rem;
}

#lp_contents .right_area .btn_cart span:before {
  left: -3rem;
  width: 2rem;
  height: 2rem;
}

#lp_contents .right_area .reset {
  margin: 1rem auto 0;
  width: 16rem;
  height: 3rem;
}

#lp_contents .right_area .reset span {
  font-size: 1rem;
  margin-left: 2.6rem;
}

#lp_contents .right_area .reset span:before {
  left: -2.6rem;
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 767px) {
/* SP Preview Follow */
#lp_contents .preview_follow {
  display: flex;
  position: fixed;
  transform: translateX(-50%) translateY(100%);
  visibility: hidden;
  bottom: 0;
  left:50%;
  width: 100%;
  z-index: -2;
  background-color: #ffffff;
}
#lp_contents .preview_follow.hidden {
  transition: all 0.6s 0.3s;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  z-index: 100;
}
#lp_contents .preview_follow.visible {
  transition: all 0.6s 0.2s ease;
  transform: translateX(-50%) translateY(100%);
  z-index: -2;
}

#lp_contents .preview_follow .preview {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%;
  border-top: 1px solid var(--color_darkpink);
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding: 0;
}

#lp_contents .preview_follow .preview:before,
#lp_contents .preview_follow .preview:after {
  display: none;
}

#lp_contents .preview_follow .preview_inner {
  gap: calc(50 * (var(--rate)));
  width: calc(520 * (var(--rate)));
  padding: calc(15 * (var(--rate))) 0 calc(20 * (var(--rate))) calc(7 * (var(--rate)));
}

#lp_contents .preview_follow .preview_inner:before {
  margin-top: calc(-32 * (var(--rate)));
  margin-left: calc(2 * (var(--rate)));
  display: block;
  width: calc(30 * (var(--rate)));
  height: calc(30 * (var(--rate)));
}

#lp_contents .preview_follow .preview_item {
  width: calc(195 * (var(--rate)));
  margin: 0;
}

#lp_contents .preview_follow .preview_img img {
  width: calc(65 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .preview_follow .preview_name {
  width: calc(200 * (var(--rate)));
  margin-top: calc(6 * (var(--rate)));
  font-size: calc(20 * (var(--rate)));
  line-height: 1.6;
}

#lp_contents .preview_follow .preview_btn_area {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color_darkpink);
}

#lp_contents .preview_follow .btn_cart {
  margin: 0 auto;
  width: calc(260 * (var(--rate)));
  height: calc(87 * (var(--rate)));
}

#lp_contents .preview_follow .btn_cart span {
  font-size: calc(20 * (var(--rate)));
  margin-left: calc(60 * (var(--rate)));
  margin-top: calc(1 * (var(--rate)));
}

#lp_contents .preview_follow .btn_cart span:before {
  left: calc(-58 * (var(--rate)));
  width: calc(40 * (var(--rate)));
  height: calc(40 * (var(--rate)));
}

#lp_contents .preview_follow .reset {
  margin: 0 auto;
  width: calc(260 * (var(--rate)));
  height: calc(87 * (var(--rate)));
  border: none;
}

#lp_contents .preview_follow .reset span {
  font-size: calc(20 * (var(--rate)));
  margin-left:calc(47 * (var(--rate)));
}

#lp_contents .preview_follow .reset span:before {
  left: calc(-48 * (var(--rate)));
  width: calc(30 * (var(--rate)));
  height: calc(30 * (var(--rate)));
}
}

/* Tab */
#lp_contents .thumbnail_list_wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

#lp_contents .thumbnail_list_wrap::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

#lp_contents .thumbnail_list {
  display: flex;
  justify-content: center;
  gap: calc(10 * (var(--rate)));
  margin-left:calc(110 * (var(--rate)));
  flex-wrap: nowrap; 
}

#lp_contents .thumbnail_list li {
  flex: 0 0 auto;              /* 横幅固定、縮まない */
  width: calc(200 * (var(--rate)));
  padding: calc(10 * (var(--rate))) 0 calc(15 * (var(--rate)));
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

#lp_contents .thumbnail_list li.selected {
  border: 1px solid var(--color_darkpink);
}

#lp_contents .thumbnail_list .thumbnail_img {
  width: calc(125 * (var(--rate)));
}

#lp_contents .thumbnail_list .thumbnail_name {
  margin: calc(12 * (var(--rate))) auto 0;
  font-size: calc(22 * (var(--rate)));
  line-height: 1.6;
  color: var(--color_gray03);
  white-space: nowrap;

}

#lp_contents .area {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity .8s;
}

#lp_contents .area.selected {
  opacity: 1;
  height: auto;
  overflow: visible;
}

/* Lip */

#lp_contents .slider02 {
  width: calc(570 * (var(--rate)));
}

#lp_contents .lip_var_list {
  display: flex;
  justify-content: center;
  margin: calc(60 * (var(--rate))) auto 0;
  cursor: pointer;
  
}

#lp_contents .slick-prev, 
#lp_contents .slick-next {
  width: calc(20 * (var(--rate)));
  height: calc(38 * (var(--rate)));
}

#lp_contents .slick-arrow::before {
  position: absolute;
  top: calc(-24 * (var(--rate)));
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/arrow.svg) center center / cover no-repeat;
  content: "";
}

#lp_contents .slick-prev::before {
  transform: scaleX(-1);
}


#lp_contents .lip_var {
  position: relative;
  width: calc(70 * (var(--rate)));
  margin: 0 calc(15 * (var(--rate)));
}


#lp_contents .lip_var .sample_img {
  position: relative;
}

#lp_contents .var_num {
  font-size: calc(20 * (var(--rate)));
  color: var(--color_gray03);
  padding: calc(15 * (var(--rate))) 0;
  line-height: 1; 
}

#lp_contents .lip_var.is-selected:before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(50 * (var(--rate)));
  height: calc(4 * (var(--rate)));
  background-color: var(--color_darkpink);
  content: "";
}

#lp_contents .lip_var.is-selected .var_num {
  color: var(--color_darkpink);
}

#lp_contents .lip_var_list .lip_ex .sample_img:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: calc(60 * (var(--rate)));
  color: var(--color_white);
  font-size: calc(20 * (var(--rate)));
  white-space:nowrap;
  text-align: center;
  content: "限定";

}


/* Popup */

#lp_contents .popup {
  /* display: none; */
  position: fixed;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background-color: rgba(256, 256, 256, 0.5);  
  opacity: 0;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#lp_contents .popup.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#lp_contents .popup.close {
  display: none;
}

#lp_contents .popup_inner {
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%);
  width: calc(684 * (var(--rate)));
  margin: 0 auto;
  padding: calc(60 * (var(--rate))) 0 calc(80 * (var(--rate)));
  border: 1px solid var(--color_darkpink);
  background-color: var(--color_white);
}

#lp_contents .popup_ttl {
  width: calc(623 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .step_list {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: calc(82 * (var(--rate)));
  margin: calc(65 * (var(--rate))) auto 0;
}

#lp_contents .step_list li {
  position: relative;
}

#lp_contents .step_list li:first-of-type:before {
  position: absolute;
  top: calc(142 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  display: block;
  width: calc(14 * (var(--rate)));
  height: calc(26 * (var(--rate)));
  background: url(../img/arrow.svg) no-repeat;
  background-size: 100%;
  content: "";

}

#lp_contents .step {
  display: flex;
  justify-content: center;
  font-size: calc(30 * (var(--rate)));
  letter-spacing: 0.05em;
}

#lp_contents .step_list li .num {
  display: block;
  margin-left: calc(8 * (var(--rate)));
}

#lp_contents .step_list li:first-of-type .num {
  width: calc(21.2 * (var(--rate)));
}

#lp_contents .step_list li:last-of-type .num {
  width: calc(27.4 * (var(--rate)));
}

#lp_contents .step_text {
  margin: calc(-4 * (var(--rate))) auto 0;
  font-size: calc(30 * (var(--rate)));
  text-align: center;
}

#lp_contents .start_btn a {
  width: calc(400 * (var(--rate)));
  margin: calc(40 * (var(--rate))) auto 0;
  height: calc(72 * (var(--rate)));
  font-size: calc(30 * (var(--rate)));
  text-transform: uppercase;
  text-align: center;
  background-color: var(--color_black);
  color: var(--color_white);
}


#lp_contents .close_btn {
  position: absolute;
  top: calc(-20 * (var(--rate)));
  right: calc(-20 * (var(--rate)));
  width: calc(40 * (var(--rate)));
  height: calc(40 * (var(--rate)));
  background: url(../img/close.svg) no-repeat;
  background-size: 100%;
  border: none;
}