@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;
}

@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: #f2e4cd;
  --color2: #000000;
  --color3: #ffff;
  --color4: #f4efe9;
  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;
}

@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 {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.lp_contents p {
  /* font-family: var(--font-jp);
  font-size: 1.6rem;
  line-height: 1.75; */
}

.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;
    flex-direction: column;
    gap: 2rem;
    /* margin-left: 12.9rem; */
  }

  .fixed_right .menu_list_item {
    width: 23.3rem;
    height: 6.5rem;
  }

  .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 / 4);
    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  *
========================================================= */

.sec_mv {}

.sec_mv_top {
  aspect-ratio: 750 / 1000;
  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);
  aspect-ratio: 750 / 1000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.mv_ttl {
  width: calc(307 * 42rem / 750);
  height: calc(59 * 42rem / 750);
  position: absolute;
  bottom: calc(55 * 42rem / 750);
  left: calc(40 * 42rem / 750);
  z-index: 2;
}

@media (min-width: 769px) {
  .mv_ttl {
    bottom: 2.3rem;
  }
}

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

.mv_ttl_sub {
  font-size: calc(34 * 42rem / 750);
  display: block;
  margin-top: calc(6 * 42rem / 750);
}

@media (min-width: 769px) {

  .mv_ttl_sub {
    margin-top: -1rem;
  }
} */

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



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

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

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

.intro_list {
  display: flex;
  justify-content: center;
  margin-top: calc(123 * 42rem / 750);
  margin-top: calc(123 * 42rem / 750);
  margin-left: calc(16 * 42rem / 750);
}

.intro_item {
  position: relative;
  height: calc(287 * 42rem / 750);
}

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

.intro_item:nth-of-type(2) {
  margin-left: calc(69 * 42rem / 750);
}

.intro_item:nth-of-type(3) {
  margin-left: calc(84 * 42rem / 750);
}

.intro_item:nth-of-type(4) {
  margin-left: calc(70 * 42rem / 750);
}

.intro_item::after {
  content: "";
  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;
  bottom: 0;
  left: 31%;
  pointer-events: none;
  cursor: pointer;
}

.intro_item:nth-of-type(2)::after {
  left: 35%;
}

.intro_item:nth-of-type(3)::after {
  left: 32%;
}

.intro_item:nth-of-type(4)::after {
  left: 35%;
}

.intro_item_img {
  width: calc(100 * 42rem / 750);

}

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

.intro_item:nth-of-type(1) .intro_item_text {
  margin-left: calc(-19 * 42rem / 750);
}

.intro_item:nth-of-type(2) .intro_item_text {
  margin-left: calc(-6 * 42rem / 750);
}

.intro_item:nth-of-type(3) .intro_item_text {
  margin-left: calc(-13 * 42rem / 750);
}

.intro_item:nth-of-type(4) .intro_item_text {
  margin-left: calc(-12 * 42rem / 750);
}



/* ========================================================
                      * sec_1st  *
========================================================= */

.sec_1st {
  text-align: center;
  padding-top: calc(105 * 42rem / 750);
}

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

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

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

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

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


.sec_1st .ttl {}

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


.item_detail_wrap {
  padding-top: calc(104 * 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(340 * 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: calc(68 * 42rem / 750) auto 0;
}

.item_detail_head::before,
.item_detail_head::after {
  content: "";
  width: calc(16 * 42rem / 750);
  height: 1px;
  background: var(--color2);
  position: absolute;
  top: 42%;
  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(18 * 42rem / 750);
  font-weight: 300;
}

.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;
}

.item_detail_price {
  font-size: calc(24 * 42rem / 750);
  font-family: var(--font-europa);
  text-align: center;
  margin-top: calc(50 * 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(1 * 42rem / 750) calc(10 * 42rem / 750);
  margin-right: calc(19 * 42rem / 750);
}

.item_detail_btn {
  font-size: calc(30 * 42rem / 750);
  margin-top: calc(55 * 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);
  line-height: 1.75;
  margin-top: calc(77 * 42rem / 750);
}

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

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

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

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

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



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

.item_color_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.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_list.lip .item_color_img {
  width: calc(260 * 42rem / 750);
}

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

.item_color_list.palette .item_color_img {
  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: 0;
  bottom: 0;
}

.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);
  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);
}

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

.novelty_head {
  font-size: calc(26 * 42rem / 750);

}

.novelty_ttl {
  font-size: calc(58 * 42rem / 750);
  font-family: var(--font-europa);
  font-weight: 300;
  margin-top: calc(34 * 42rem / 750);
  color: transparent;
  position: relative;
}

.novelty_ttl.before::before,
.novelty_ttl.after::before {
  content: "";
  width: calc(670 * 42rem / 750);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.novelty_ttl.before::before {
  content: "";
  background: url(../img/novelty_frame_before.png) no-repeat;
  background-position: center top;
  background-size: 100%;
  height: calc(1134 * 42rem / 750);
}

.novelty_ttl.after::before {
  background: url(../img/novelty_frame_after.png) no-repeat;
  background-position: center top;
  background-size: 100%;
  height: calc(1026 * 42rem / 750);
}

.novelty_img_wrap {
  width: calc(670 * 42rem / 750);
  height: calc(1031 * 42rem / 750);
  margin: 0 auto;
  /* margin-top: calc(7 * 42rem / 750); */
  padding-top: calc(39 * 42rem / 750);
}

@media (min-width: 769px) {
  .novelty_img_wrap {
    margin-top: -0.2rem;
  }
}

.novelty_img {
  width: calc(670 * 42rem / 750);
}

.novelty_txt {
  font-family: var(--font-europa);
  font-size: calc(28 * 42rem / 750);
  margin-top: calc(55 * 42rem / 750);
  line-height: 1.75;
}

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

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

.sec_2nd {
  padding-top: calc(182 * 42rem / 750);
}

.sec_2nd .ttl {}

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

.sec_2nd .coming_soon {
  width: calc(748 * 42rem / 750);
  margin: calc(73 * 42rem / 750) auto 0;
}

/* ========================================================
                      * 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;
}


/* ========================================================
                      * 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 {
  margin-top: calc(371 * 42rem / 750);
  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);
  ;
}

.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(7 * 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);

}

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

.lp_contents .modal_outside {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  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: 100%;
}

.lp_contents .modal_wrap {
  width: calc(672 * (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 {
  width: calc(469 * 42rem / 750);
  margin: 0 auto;
}

.lp_contents .modal_img.palette {
  width: calc(590 * 42rem / 750);
}


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

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

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

.lp_contents .modal_content .btn_buy a {
  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);
}


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

.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 .swiper-pagination {
  width: 100%;
}

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

@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;
}