@charset "UTF-8";

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

  CV_AW Collection '25 | Celvoke Website

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

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

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

@media (min-width: 1400px) {
  html {
    font-size: 62.5%
  }
}



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

/*------------------------------------
≡≡≡≡≡≡≡≡≡≡ ▼ S e t U p SP ▼ ≡≡≡≡≡≡≡≡≡≡
------------------------------------*/
#Wrap {
  width: 100%;
}

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

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

@media screen and (max-width: 768px) {
  #share.move {
    translate: 0 calc(-186 * 42rem / 750);
  }
}

div,
form,
h1,
h2,
h3,
h4,
ul,
li,
dl,
dt,
dd,
p {
  line-height: 1.75;
}

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

.lp_contents {
  width: 100%;
  max-width: 42rem;
  height: 100%;
  line-height: 1.65;
  letter-spacing: 0.05em;
  --color1: #f4efe9;
  --color2: #000000;
  --color3: #ffff;
  --color4: #f9f6f2;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  --font-jp: "Noto Sans JP";
  --font-europa: "europa", "Noto Sans JP", sans-serif;
  --font-liebling: "liebling", "Noto Sans JP", sans-serif;
  font-weight: normal;
}

.lp_contents a:hover {
  opacity: 1;
}

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

.lp_contents .pcOnly {
  display: none;
}

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

.lp_contents_inner {
  font-family: var(--font-jp);
  background: var(--color1);
  overflow-x: hidden;
  position: relative;
}

.lp_contents_inner,
.lp_contents_inner section {
  width: 100%;
  color: var(--color2);
}

.ttl {
  font-family: var(--font-liebling);
  font-size: calc(58 * 42rem / 750);
  font-weight: 300;
}

.ttl_sub {
  font-family: var(--font-europa);
  font-size: calc(26 * 42rem / 750);
}




/*------------------------------------
≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ ▼ PC ▼ ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡
 ------------------------------------*/
@media (min-width: 769px) {
  .lp_contents .grid_area {
    display: grid;
    grid-template-columns: 1fr 42rem 1fr;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  .lp_contents .grid_area .fixed_nav {
    position: -webkit-sticky;
    position: sticky;
    display: grid;
    place-items: center;
    pointer-events: all;
    height: 100vh;
  }

  .lp_contents .grid_area .fixed_left {
    top: 0;
    grid-column: 1;
    background: var(--color4);
    -webkit-clip-path: border-box;
    clip-path: border-box;
    /* align-items: center;
    justify-content: flex-end; */
  }

  .lp_contents .grid_area .fixed_right {
    top: 0;
    grid-column: 3;
    background: var(--color4);
    -webkit-clip-path: border-box;
    clip-path: border-box;
  }

  .fixed_right .menu_list {
    display: flex;
    gap: 3.4rem;
    /* margin-left: 12.9rem; */
  }

  .fixed_right .menu_list_item {
    width: 9.8rem;
    height: 12.8rem;
  }

  .fixed_right .menu_list_item span {
    display: none;
  }

  .fixed_right .menu_list_item a {
    display: block;
    width: 100%;
    height: 100%;
  }


  .fixed_right .menu_list_item:nth-of-type(1) a {
    background: url(../img/menu_list_item01_pc.png) no-repeat;
    background-position: center;
    background-size: 100%;
  }

  .fixed_right .menu_list_item:nth-of-type(2) a {
    background: url(../img/menu_list_item02_pc.png) no-repeat;
    background-position: center;
    background-size: 100%;
  }

  .fixed_right .menu_list_item:nth-of-type(3) a {
    background: url(../img/menu_list_item03_pc.png) no-repeat;
    background-position: center;
    background-size: 100%;
  }

  .fixed_right .menu_list_item:nth-of-type(4) a {
    background: url(../img/menu_list_item04_pc.png) no-repeat;
    background-position: center;
    background-size: 100%;
  }

  .fixed_left_inner {
    /* margin-right: 6.5rem; */

  }

  .fixed_left_inner .logo {
    width: 36rem;
    text-align: center;
  }

  .fixed_left_txt_wrap {
    font-family: var(--font-liebling);
    margin-top: 3.5rem;
    font-weight: 400;
  }

  .fixed_left_txt_ttl {
    font-size: 1.2rem;
    display: block;
  }

  .fixed_left_txt_ttl_sub {
    font-size: 2.2rem;
    display: block;
  }
}


/* ========================================================
            * fixed_nav fixed_right   *
========================================================= */
@media (max-width: 768px) {
  .lp_contents .grid_area .fixed_right.js-scrollStatus {
    transform: translateY(100%);
    transition: all 0.6s 0.3s;
  }

  .lp_contents .grid_area .fixed_right.js-scrollStatus.scrolled-up {
    transition: all 0.6s 0.3s;
    visibility: visible;
    transform: translateY(0);
    z-index: 100;
  }

  .lp_contents .grid_area .fixed_right {
    position: fixed;
    bottom: 0;
    display: block;
    /* translate: 0 100%; */
    /* transition: translate .5s; */
    /* z-index: 100; */

  }

  .fixed_right .menu_list {
    display: flex;
    flex-direction: row;
    gap: 1px;
    background: var(--color2);
    border-top: 1px solid var(--color2);
  }

  .fixed_right .menu_list_item {
    width: calc(100vw / 3);
    height: calc(225 * 42rem / 750);
    background: var(--color1);
  }

  .fixed_right .menu_list_item span {
    display: none;
  }

  .fixed_right .menu_list_item a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .fixed_right .menu_list_item:nth-of-type(1) a {
    background: url(../img/menu_list_item01_sp.png) no-repeat;
    background-position: center;
    background-size: 100%;
  }

  .fixed_right .menu_list_item:nth-of-type(2) a {
    background: url(../img/menu_list_item02_sp.png) no-repeat;
    background-position: center;
    background-size: 100%;
  }

  .fixed_right .menu_list_item:nth-of-type(3) a {
    background: url(../img/menu_list_item03_sp.png) no-repeat;
    background-position: center;
    background-size: 100%;
  }

  .fixed_right .menu_list_item:nth-of-type(4) a {
    background: url(../img/menu_list_item04_sp.png) no-repeat;
    background-position: center;
    background-size: 100%;
  }


}

/* ========================================================
                      * アニメーション  *
========================================================= */

@keyframes slideIn {
  from {
    transform: translateY(20px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-20px);
  }
}

.lp_contents .opacity {
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  -webkit-transition: 1500ms cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: 1500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.lp_contents .opacity_enable {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* -webkit-animation: opa 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;
  }
} */

/* @keyframes opa {
  0% {
    opacity: 0;
    transform: translateY(10%);

  }

  100% {
    opacity: 1;
    transform: translateY(0);

  }
} */


/* ========================================================
                      * sec_mv  *
========================================================= */
#NAIL {
  padding-bottom: calc(190 * 42rem / 750);
}

.sec_mv {}

.sec_mv_top {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  position: relative;
}

.sec_mv_img {
  width: calc(750 * 42rem / 750);
  height: calc(1000 * 42rem / 750);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.mv_ttl {
  margin-top: calc(25 * 42rem / 750);
  margin-bottom: calc(44 * 42rem / 750);
  font-family: var(--font-liebling);
  font-size: calc(34 * 42rem / 750);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: .05em;
  text-align: center;
}

.mv_ttl small {
  font-size: calc(20 * 42rem / 750);
}

.mv_logo {
  width: calc(670 * 42rem / 750);
  margin: 0 auto 0;
  padding-top: calc(40 * 42rem / 750);
  position: relative;
  z-index: 2;
}



/* ========================================================
                      * sec_intro  *
========================================================= */

.sec_intro {
  padding-top: calc(0 * 42rem / 750);
  margin-top: calc(50 * 42rem / 750);
}

.intro_txt {
  font-size: calc(26 * 42rem / 750);
  font-family: var(--font-europa);
}

.intro_list {
  display: flex;
  justify-content: center;
}

.intro_item {
  position: relative;
  padding-bottom: calc(40 * 42rem / 750);
  width: calc(243 * 42rem / 750);
}

.intro_item a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.intro_item::after {
  content: "";
  margin: auto;
  background: url(../img/arrow_bottom.svg) no-repeat;
  background-position: center;
  background-size: 100%;
  width: calc(20 * 42rem / 750);
  height: calc(13 * 42rem / 750);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  cursor: pointer;
}

.intro_item_img {
  margin-inline: auto;
  margin-bottom: calc(41 * 42rem / 750);
  width: calc(232 * 42rem / 750);
}

.intro_item_text {
  font-size: calc(26 * 42rem / 750);
  font-family: var(--font-liebling);
  line-height: 1.25;
}



/* ========================================================
                      * sec_2nd  *
========================================================= */

.sec_2nd {
  text-align: center;
  padding-top: calc(37 * 42rem / 750);
  padding-bottom: calc(174 * 42rem / 750);
}

.sec_2nd .visual {
  width: 100%;
  aspect-ratio: 750 / 938;
}

.sec_2nd .visual01 {
  margin-top: calc(129 * 42rem / 750);
}

.sec_2nd .visual02 {
  margin-top: calc(196 * 42rem / 750);
}

.sec_2nd .visual03 {
  margin-top: calc(190 * 42rem / 750)
}

.sec_2nd .visual04 {
  margin-top: calc(190 * 42rem / 750)
}


.sec_2nd .ttl {
  letter-spacing: .05em;
}

.sec_2nd .ttl_sub {
  margin-top: calc(17 * 42rem / 750);
}


#KIT.item_detail_wrap {
  padding-top: calc(100 * 42rem / 750);
}

#CHEEK .item_detail_wrap {
  padding-top: calc(83 * 42rem / 750);
}

.item_detail_wrap#eyePalette .item_detail_ttl {
  margin-top: calc(34 * 42rem / 750);
}

.item_detail_wrap.lash {
  padding-top: calc(124 * 42rem / 750);
}

.item_detail_wrap.liner {
  padding-top: calc(115 * 42rem / 750);
}

.item_detail_img {
  width: calc(670 * 42rem / 750);
  margin: 0 auto;
}

.item_detail_wrap.lash .item_detail_img,
.item_detail_wrap.liner .item_detail_img {
  width: calc(590 * 42rem / 750);
}

.item_detail_wrap.lash .item_detail_img {
  margin-bottom: calc(70 * 42rem / 750);
}

.item_detail_wrap.liner .item_detail_img {
  margin-left: calc(93 * 42rem / 750);
}

.item_detail_head {
  position: relative;
  font-size: calc(30 * 42rem / 750);
  font-family: var(--font-liebling);
  width: fit-content;
  margin: 0 auto;
}

.item_detail_head::before,
.item_detail_head::after {
  content: "";
  width: calc(16 * 42rem / 750);
  height: 1px;
  background: var(--color2);
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
}

.item_detail_head::before {
  left: calc(-35 * 42rem / 750);
}

.item_detail_head::after {
  right: calc(-35 * 42rem / 750);
}

.item_detail_ttl {
  font-size: calc(53 * 42rem / 750);
  font-family: var(--font-liebling);
  margin-top: calc(34 * 42rem / 750);
  font-weight: 300;
  letter-spacing: .04em;
}

#KIT .item_detail_ttl {
  margin-top: calc(34 * 42rem / 750);
}

#CHEEK .item_detail_ttl {
  margin-top: calc(21 * 42rem / 750);
}

#NAIL .item_detail_ttl {
  margin-top: calc(61 * 42rem / 750);
}

.item_detail_ttl_sub {
  font-size: calc(24 * 42rem / 750);
  font-family: var(--font-europa);
  margin-top: calc(2 * 42rem / 750);
  letter-spacing: 0.05em;
  font-feature-settings: normal;
}

.item_detail_price {
  font-size: calc(24 * 42rem / 750);
  font-family: var(--font-europa);
  font-feature-settings: normal;
  text-align: center;
  margin-top: calc(48 * 42rem / 750);
}

.item_detail_price.refill {
  margin-top: calc(5 * 42rem / 750);
}

.item_detail_price span {
  font-size: calc(22 * 42rem / 750);
  font-family: var(--font-liebling);
  border: 1px solid #000;
  display: inline-block;
  padding: calc(8 * 42rem / 750) calc(6 * 42rem / 750) calc(5 * 42rem / 750) calc(8 * 42rem / 750);
  margin-right: calc(19 * 42rem / 750);
  line-height: 1;
}

.item_detail_btn {
  font-size: calc(30 * 42rem / 750);
  margin-top: calc(64 * 42rem / 750);
}

.item_detail_btn a {
  position: relative;
  border-bottom: 1px solid var(--color2);
  padding-right: calc(37 * 42rem / 750);
  padding-bottom: calc(11 * 42rem / 750);
}

.item_detail_btn a::after {
  content: "";
  background: url(../img/arrow_right.svg) no-repeat;
  background-position: center;
  background-size: 100%;
  width: calc(12 * 42rem / 750);
  height: calc(22 * 42rem / 750);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(-5 * 42rem / 750);
}

.item_detail_txt {
  font-size: calc(26 * 42rem / 750);
  font-feature-settings: normal;
  line-height: 1.75;
  margin-top: calc(77 * 42rem / 750);
}

#KIT .item_color_wrap {
  padding-top: calc(138 * 42rem / 750);
}

#CHEEK .item_color_wrap {
  padding-top: calc(102 * 42rem / 750);
}

#NAIL .item_color_wrap {
  padding-top: calc(108 * 42rem / 750);
}

.item_look_wrap {
  margin-bottom: calc(190 * 42rem / 750);
  padding-top: calc(47 * 42rem / 750);
}


.item_color_headWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(-10 * 42rem / 750);
  margin-bottom: calc(80 * 42rem / 750);
}

.list1Wrap .item_color_headWrap {
  column-gap: calc(63 * 42rem / 750);
}

.list2Wrap .item_color_headWrap {
  column-gap: calc(38 * 42rem / 750);
}

.item_color_headWrap::before {
  content: '';
  width: calc(198 * 42rem / 750);
  height: calc(198 * 42rem / 750);
  background-image: url(../img/item_color_head1.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 0;
}

.item_color_head {
  margin-top: calc(-12 * 42rem / 750);
  font-size: calc(52 * 42rem / 750);
  font-family: var(--font-liebling);
  letter-spacing: .05em;
  line-height: 1.25;
  width: fit-content;
  font-weight: 300;
  text-align: center;
}

.item_color_ttl_sub {
  font-size: calc(26 * 42rem / 750);
  font-feature-settings: normal;
  font-weight: 400;
  letter-spacing: .05em;
}

.item_color_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: calc(68 * 42rem / 750);
}

.item_color_list.lip {
  gap: calc(32 * 42rem / 750) calc(70 * 42rem / 750);
  margin-top: calc(71 * 42rem / 750);
}

.item_color_list.pencil {
  gap: calc(32 * 42rem / 750) calc(71 * 42rem / 750);
  margin-top: calc(71 * 42rem / 750);
}

.item_color_list.palette {
  gap: calc(32 * 42rem / 750) calc(70 * 42rem / 750);
  margin-top: calc(71 * 42rem / 750);
}

.item_color_item {
  display: flex;
  flex-direction: column;
}

.item_color_list.lip .item_color_item {
  width: calc(260 * 42rem / 750);
  position: relative;
}

.item_color_list.pencil .item_color_item {
  width: calc(176 * 42rem / 750);
}

.item_color_list.palette .item_color_item {
  width: calc(260 * 42rem / 750);
}

.item_color_img {
  position: relative;
}

.item_color_button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: calc(30 * 42rem / 750);
  margin-top: calc(72 * 42rem / 750);
  margin-left: calc(4 * 42rem / 750);
  font-feature-settings: normal;
  letter-spacing: 0.1em;
}

.item_look_button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: calc(32 * 42rem / 750);
  margin-top: calc(68 * 42rem / 750);
  margin-right: calc(25 * 42rem / 750);
  font-feature-settings: normal;
  letter-spacing: .125em;
}

.item_color_list.collection .item_color_img {
  margin-bottom: calc(42 * 42rem / 750);
  width: calc(260 * 42rem / 750);
}

.item_color_img::after {
  content: "";
  background: url(../img/btn_plus.svg) no-repeat;
  background-position: center;
  background-size: 100%;
  width: calc(44 * 42rem / 750);
  height: calc(44 * 42rem / 750);
  position: absolute;
  right: calc(-21 * 42rem / 750);
  bottom: 0;
}

.item_color_button::after,
.item_look_button::after {
  content: "";
  background: url(../img/btn_plus.svg) no-repeat;
  width: calc(44 * 42rem / 750);
  height: calc(44 * 42rem / 750);
}


#KIT .item_color_img::after {
  display: none;
}

.item_color_list.lip .item_color_item .item_color_img::after {
  right: calc(-19 * 42rem / 750);
  bottom: 0;
}


.item_color_list.pencil .item_color_item .item_color_img::after {
  right: calc(-20 * 42rem / 750);
  bottom: 0;
}

.item_color_list.palette .item_color_item .item_color_img::after {
  right: calc(-20 * 42rem / 750);
  bottom: 0;
}


.item_color_name {
  font-size: calc(26 * 42rem / 750);
  font-family: var(--font-liebling);
  line-height: 1.25;
  white-space: nowrap;
}

.item_color_list.lip .item_color_name {
  padding-top: calc(33 * 42rem / 750);

}

.item_color_list.pencil .item_color_name {
  padding-top: calc(42 * 42rem / 750);
  line-height: 1.3;
}

.item_color_list.palette .item_color_name {
  padding-top: calc(34 * 42rem / 750);
}

/* ========================================================
                      * sec_release  *
========================================================= */

.sec_release {
  padding-top: calc(176 * 42rem / 750);
  padding-bottom: calc(281 * 42rem / 750);
  position: relative;
}

.sec_release::after {
  content: "";
  width: calc(670 * 42rem / 750);
  height: calc(87 * 42rem / 750);
  background: url(../img/heart_line.svg) no-repeat;
  background-position: center;
  background-size: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}


.sec_release .ttl {}

.table_ttl {
  font-size: calc(28 * 42rem / 750);
  font-family: var(--font-liebling);
  margin-top: calc(38 * 42rem / 750);
}

.table_ttl.second {
  margin-top: calc(72 * 42rem / 750);

}

.release_table {
  width: calc(670 * 42rem / 750);
  margin: calc(26 * 42rem / 750) auto 0;
  border-collapse: collapse;
  text-align: center;
}

.release_table th,
.release_table td {
  font-size: calc(28 * 42rem / 750);
  font-family: var(--font-europa);
  border: 1px solid var(--color2);
  font-weight: 400;
  padding: calc(21 * 42rem / 750) 0;
}

.release_table th {
  width: 50%;
}

.release_table td {
  width: 50%;
}

.release_note {
  font-size: calc(20 * 42rem / 750);
  font-family: var(--font-europa);
  margin-top: calc(75 * 42rem / 750);
  line-height: 1.7;
}

.release_note a{
  text-decoration: underline;
}

/* ========================================================
                      * sec_message  *
========================================================= */

.sec_message {
  padding-top: calc(83 * 42rem / 750);
  padding-bottom: calc(171 * 42rem / 750);
}

.sec_message .ttl {
  font-size: calc(48 * 42rem / 750);
}

.message_text_wrap {
  margin-top: calc(65 * 42rem / 750);
  position: relative;
}

.message_text_wrap::after {
  content: "";
  width: calc(670 * 42rem / 750);
  height: calc(87 * 42rem / 750);
  background: url(../img/heart_line.svg) no-repeat;
  background-position: center;
  background-size: 100%;
  position: absolute;
  bottom: calc(-178 * 42rem / 750);
  left: 50%;
  transform: translateX(-50%);
}

.message_text {
  font-size: calc(26 * 42rem / 750);
  font-family: var(--font-europa);
  line-height: 1.75;
}

.message_text:not(:first-of-type) {
  margin-top: calc(45 * 42rem / 750);
}
.btn_all.lp_foot {
  margin-top: calc(371 * 42rem / 750);
}

.btn_all.look_button {}

.btn_all.look_button a {
  display: inline-block;
  padding-bottom: calc(8 * 42rem / 750);
  text-align: left;
  width: calc(484 * 42rem / 750);
}

.btn_all.look_button + .btn_all.look_button {
  margin-top: calc(31 * 42rem / 750);
}

.btn_all {
  font-size: calc(30 * 42rem / 750);
  font-family: var(--font-liebling);
  font-weight: 400;
}

.btn_all a {
  position: relative;
  border-bottom: 1px solid #000;
  padding-bottom: calc(13 * 42rem / 750);
  padding-right: calc(40 * 42rem / 750);
  font-feature-settings: normal;
}

.btn_all a::after {
  content: "";
  width: calc(10 * 42rem / 750);
  height: calc(20 * 42rem / 750);
  background: url(../img/arrow_right.svg) no-repeat;
  background-position: center;
  background-size: 100%;
  position: absolute;
  top: calc(14 * 42rem / 750);
  right: 0;
}

/* ========================================================
                      * modal  *
========================================================= */

.lp_contents .modal_toggle {
  cursor: pointer;
  transition: opacity .3s ease-in-out;
}

.lp_contents .modal_toggle:hover {
  opacity: 0.8;
}

body.no_scroll {
  overflow: hidden;
}

.lp_contents .modal_button {
  position: relative;
  cursor: pointer;
  z-index: 10;
}

.lp_contents .modal_button.btn_modalClose {
  width: calc(31 * 42rem / 750);
  height: calc(31 * 42rem / 750);
  background: url(../img/btn_close.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border: none;
  float: right;
  position: sticky;
  top: calc(52 * 42rem / 750);
  right: calc(52 * 42rem / 750);
}

#KIT .list2Wrap {
  margin-top: calc(148 * 42rem / 750);
}

.lp_contents .modal_outside.hide {
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
}

.lp_contents .modal_outside {
  position: fixed;
  z-index: 1000;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  transition: opacity .5s;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.lp_contents .modal_outside::-webkit-scrollbar {
  display: none;
}

.lp_contents .modal_outside::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color3);
  opacity: .5;
  content: "";
}

.lp_contents .modal_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.lp_contents .modal_wrap {
  padding-inline: calc(40 * 42rem / 750);
  margin: 0 auto;
  max-height: calc(100% - calc(200 * (42rem / 750)));
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* background: var(--color2); */
  will-change: transform;
}

.lp_contents .modal_outside.hide .modal_wrap {
  animation: slideOut 0.8s cubic-bezier(0.34, 0.07, 0.095, 0.995);
}

.lp_contents .modal_outside .modal_wrap {
  animation: slideIn 0.8s cubic-bezier(0.34, 0.07, 0.095, 0.995);
}


.lp_contents .modal_wrap::-webkit-scrollbar {
  display: none;
}

.lp_contents .modal_inner {
  position: relative;
  background: var(--color1);
}

.lp_contents .modal_content {
  padding: calc(100 * 42rem / 750) 0 calc(107 * 42rem / 750);
}

.lp_contents .modal_img {
  margin-inline: auto;
  width: calc(590 * 42rem / 750);
}


.lp_contents .item_look_wrap .modal_img {
  margin-bottom: calc(34 * 42rem / 750);
  width: calc(170 * 42rem / 750);
}

.lp_contents .item_look_wrap .modal_img img {
  width: calc(120 * 42rem / 750);
  margin-inline: auto;
}

.lp_contents .item_look_wrap .modal_name {
  font-size: calc(20 * 42rem / 750);
  line-height: 1.75;
  letter-spacing: .05em;
  font-family: var(--font-liebling);
  font-feature-settings: normal;
}

.lp_contents .modal_head {
  display: inline-block;
  font-size: calc(30 * 42rem / 750);
  margin-top: calc(71 * 42rem / 750);
  font-family: var(--font-liebling);
  font-weight: 400;
}

.lp_contents .modal_text {
  font-size: calc(26 * 42rem / 750);
  margin-top: calc(13 * 42rem / 750);
  padding-inline: calc(40 * 42rem / 750);
  font-weight: 400;
}

.lp_contents .modal_model {
  margin-inline: auto;
  margin-bottom: calc(80 * 42rem / 750);
  width: calc(570 * 42rem / 750);
}

.lp_contents .each_variation,
.lp_contents .each_look {
  width: calc(670 * 42rem / 750);
}


.lp_contents .modal_items_list {
  display: flex;
  justify-content: center;
  column-gap: calc(30 * 42rem / 750);
}

.lp_contents .modal_content .btn_buy {
  margin: calc(55 * 42rem / 750) auto 0;
}

.lp_contents .modal_content .btn_buy a {
  display: inline-block;
  border-bottom: 1px solid #000;
  font-size: calc(30 * 42rem / 750);
  padding-right: calc(42 * 42rem / 750);
  padding-bottom: calc(8 * 42rem / 750);
  position: relative;
}

.lp_contents .modal_content .btn_buy a::after {
  content: "";
  background: url(../img/arrow_right.svg) no-repeat;
  background-position: center;
  background-size: 100%;
  width: calc(12 * 42rem / 750);
  height: calc(22 * 42rem / 750);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(-5 * 42rem / 750);
}

@media (min-width: 769px) {
  .lp_contents .modal_outside .modal_wrap {
    width: 42rem;
  }
}


/* ========================================================
                      * スライダー設定 *
========================================================= */

.lp_contents .slick-slide {
  opacity: 0;
  transition: opacity 1.5s ease;
}

.lp_contents .slick-current {
  opacity: 1;
}

.lp_contents .slick-dotted.slick-slider {
  margin-bottom: 0;
}

.lp_contents .item_look_wrap .slick-slide {
  opacity: 1;
}

.lp_contents .slider {
  z-index: 0;
}

.lp_contents .thumbnail {
  position: relative;
  margin-top: calc(-75 * 42rem / 750);
  width: fit-content;
  z-index: 1;
}

.lp_contents .thumbnail .slick-slide {
  position: relative;
  margin-right: calc(20 * 42rem / 750);
  width: calc(100 * 42rem / 750)!important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 0;
}


.lp_contents .thumbnail .slick-slide::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: #000;
  z-index: 1;
}

.lp_contents .thumbnail .slick-slide.slick-current::before {
  animation: extend 2.5s ease-in forwards;
}

@keyframes extend {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }



.lp_contents .thumbnail .slick-track {
  transform: unset !important;
  width:100% !important;
}

.lp_contents .swiper-pagination {
  margin-top: calc(-1 * 42rem / 750);
  padding: 0;
  width: 100%;
}

.lp_contents .slick-dots {
  width: 100%;
  height: 1px;
  font-size: 0;
  position: relative;
  display: flex;
  bottom: 0;
}

.lp_contents .slide-arrow {
  position: absolute;
  top: 49%;
  width: calc(58 * 42rem / 750);
  height: calc(58 * 42rem / 750);
  z-index: 0;
}

.lp_contents .prev-arrow {
  transform: translateY(-50%);
  left: calc(-30 * 42rem / 750);
}

.lp_contents .next-arrow {
  transform: translateY(-50%) scale(-1, 1);
  right: calc(-30 * 42rem / 750);
}

@media (min-width: 769px) {
  .lp_contents .slick-dots {
    height: 1px;
  }
}

.lp_contents .slick-dots li {
  width: auto;
  height: 1px;
  margin: 0;
}

.lp_contents .slick-dot {
  cursor: pointer;
  width: 100%;
  height: 1px;
  position: relative;
  display: inline-block;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
}

@media (min-width: 769px) {
  .lp_contents .slick-dot {
    height: 1px;
  }
}

.lp_contents .slick-dot .bulletInner {
  content: "";
  display: block;
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: var(--color2);
}

.lp_contents .slick-active .slick-dot .bulletInner {
  animation: progressAnimation 3s linear forwards;
}



@-webkit-keyframes progressAnimation {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@keyframes progressAnimation {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

.lp_contents .js-fade {
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  -webkit-transition: 1500ms cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: 1500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.lp_contents .js-fade.active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.lp_contents .js-delay.mv_ttl,
.lp_contents .js-delay.mv_logo,
.lp_contents .js-delay.intro_txt_wrap {
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  -webkit-transition: 1500ms cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: 1500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.lp_contents .js-delay.mv_ttl.active,
.lp_contents .js-delay.mv_logo.active,
.lp_contents .js-delay.intro_txt_wrap.active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.lp_contents .js-delay.mv_logo {
  transition-delay: .5s;
}

.lp_contents .js-delay.mv_ttl {
  transition-delay: .8s;
}

.lp_contents .js-delay.intro_txt_wrap {
  transition-delay: 1.5s;
}


/* ========================================================
                      * ムービー設定 *
========================================================= */

.lp_contents iframe {
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.lp_contents .p-date_music_btn {
  position: absolute;
  width: fit-content;
  height: fit-content;
  bottom: calc(7 * 42rem / 750);
  right: calc(10 * 42rem / 750);
  z-index: 10;
  cursor: pointer;
}

.lp_contents .mv_date_movie {
  position: relative;
  z-index: 0;
}

.lp_contents .mv_date_movie .bg {
  position: absolute;
  top: calc(1 * 42rem / 750);
  left: 0;
  z-index: -1;
}

.lp_contents .p-date_movie {
  position: relative;
  margin-inline: auto;
  width: calc(750 * 42rem / 750);
}

.lp_contents .p-date_music_btn > span.is-active {
  display: block;
  padding: calc(30 * 42rem / 750);
  width: calc(90 * 42rem / 750);
}

.lp_contents .p-date_music_btn > span {
  display: none;
}

.lp_contents .p-date_play_btn {
  position: absolute;
  display: grid;
  place-content: center;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  cursor: pointer;
}

.lp_contents .p-date_play_btn .btn_play {
  width: calc(120 * 42rem / 750);
  height: calc(120 * 42rem / 750);
}

.lp_contents .p-date_play_btn:has(.btn_play.is-active) {
  display: none;
  pointer-events: none;
}

.lp_contents .p-date_play_btn .btn_play {
  display: block;
}


@media (min-width: 769px) {}