@charset "UTF-8";

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

Title : MK_BLACKFRIDAY_20231117 CSS

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


/* ========================================================
                      * Layout style *
========================================================= */

html {
  font-size: 62.5%;
}

main {
  width: 100%;
  max-width: 100%;
}

#Header,
#Foot {
  display: none;
}

#Contents {
  margin-bottom: 0;
}

.lp_contents a {
  text-decoration: none;
}

.lp_contents img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
}

.lp_contents p,
.lp_contents ul,
.lp_contents ol,
.lp_contents dl {
  margin: 0;
}

.topic-path {
  margin-right: 0;
  margin-left: 0;
}

#Contents .section {
  padding: 0;
}

/* ===================
      Roots / Font
=================== */
@font-face {
  font-family: "Transat W01 Medium";
  src: url("https://db.onlinewebfonts.com/t/67463784e8e9b427263bbc29f213dde5.eot");
  src: url("https://db.onlinewebfonts.com/t/67463784e8e9b427263bbc29f213dde5.eot?#iefix")format("embedded-opentype"),
  url("https://db.onlinewebfonts.com/t/67463784e8e9b427263bbc29f213dde5.woff2")format("woff2"),
  url("https://db.onlinewebfonts.com/t/67463784e8e9b427263bbc29f213dde5.woff")format("woff"),
  url("https://db.onlinewebfonts.com/t/67463784e8e9b427263bbc29f213dde5.ttf")format("truetype"),
  url("https://db.onlinewebfonts.com/t/67463784e8e9b427263bbc29f213dde5.svg#Transat W01 Medium")format("svg");
}

:root {
  --font-futura: "futura-pt", sans-serif;
  --font-noto: 'Noto Sans JP', sans-serif;
  /* --font-transat: "transat-text", sans-serif; */
  --font-transat: "Transat W01 Medium";
  --font-itc: "itc-avant-garde-gothic-pro", sans-serif;
  font-weight: 300;
  font-style: normal;
  --color-main: #BC932F;
  --color-black: #212121;
}

/* ===================
  LP Contents
=================== */

.lp_contents {
  margin: 0 auto;
  padding: 0;
  color: var(--color-black) !important;
  font-family: var(--font-noto);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.075em;
  overflow: hidden;
}

.lp_contents p {
  letter-spacing: 0.075em;
}

.lp_contents .inner_sec {
  margin: 0 auto;
  width: 100rem;
}

#FooterWrap {
  position: relative;
  z-index: 2;
}

.lp_contents *,
.lp_contents *:before,
.lp_contents *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.lp_contents ul,
.lp_contents li {
  list-style: none;
}


.lp_contents img {
  max-width: 100%;
}

.lp_contents sup {
  font-size: 1rem;
}

.lp_contents a,
.lp_contents a:before,
.lp_contents a:after,
.lp_contents a img {
  transition: opacity .3s ease-in-out,
  color .3s ease-in-out,
  background-color .3s ease-in-out,
  background-image .3s ease-in-out,
  border-color .3s ease-in-out,
  text-shadow .3s ease-in-out,
  text-weight .3s ease-in-out;
}

.lp_contents a:hover {
  opacity: 0.6;
}

.lp_contents h1 {
  padding: 0;
}

/* ===================
  　　　Animation
=================== */


/* -- keyframes -- */

@keyframes opa0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes tra1 {
  100% {
    transform: translateX(0);
  }
}

@keyframes tra2 {
  100% {
    transform: translateY(0);
  }
}

@keyframes tra3 {
  0% {
    transform: translateY(30px);
  }

  100% {
    transform: translateY(0);
  }
}


@keyframes tra3_2 {
  0% {
    transform: translateY(2px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes tra4 {
  0% {
    transform: translateX(6%);
  }

  100% {
    transform: translateX(0);
  }
}


@keyframes tra5 {
  0% {
    transform: translateX(-30%);
  }

  100% {
    transform: translateX(0);
  }
}


@keyframes tra6 {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.ef {
  opacity: 0;
}

.ef.effect {
  animation: opa1 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef2 {
  opacity: 0;
}

.ef2.effect {
  animation: opa2 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-top {
  opacity: 0;
  transform: translateY(50px);
}

.ef-top.effect {
  animation: opa1 .8s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-top-head {
  opacity: 0;
  transform: translateY(50px);
}

.ef-top-head.effect {
  animation: tra3 .8s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-top2 {
  opacity: 0;
  transform: translateY(40px);
}

.ef-top2.effect {
  animation: opa2 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra3_2 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-right {
  opacity: 0;
  transform: translateX(6%);
}

.ef-right.effect {
  animation: opa1 1.2s ease-in 0s 1 forwards, tra4 1.2s ease-in-out 0s 1 forwards;
}

.ef-left {
  opacity: 0;
}

.ef-left.effect {
  animation: opa1 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra5 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-lg.effect {
  animation: opa1 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra6 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

/* ===================
      Button Setting
=================== */
.lp_contents .btn {
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  width: 46rem;
  border-radius: 0.8rem;
  margin: 0 auto;
}


.lp_contents .btn a,
.lp_contents .btn_backtotop > span {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2rem 1rem;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.075em;
  color: #fff !important;
  font-feature-settings: "palt";
  border-radius: 0.8rem;
  transition: all 0.1s ease-in-out;
}

/* buy survey */
.lp_contents .btn_survey {
  margin-bottom: 5.2rem;
  background:  var(--color-main);
}

/* buy backtotop */
.lp_contents .btn_backtotop {
  background: var(--color-black);
  cursor: pointer;
}

/* ===================
  　　　 MV
=================== */
.lp_contents .mv_sec {
  background: #000;
  padding: 4.5rem 0 6.6rem 0;
}

.lp_contents .mv {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
}

.lp_contents .mv::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  width: 58rem;
  height: 36.8rem;
  margin-top: 3rem;
  background: radial-gradient(#fff, transparent 60%, transparent);
  opacity: .2;
  content: "";
}

.lp_contents .mv::after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  width: 58rem;
  height: 36.8rem;
  margin-top: 3rem;
  background: radial-gradient(var(--color-main), transparent 60%, transparent);
  opacity: .2;
  content: "";
}

.lp_contents picture {
  display: block;
  width: 66rem;
  margin: 0 auto;
}

/* schedule countdown */

.lp_contents .set_schedule_group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5.5rem calc(50% - 50vw) 0;
  width: 100vw;
  height: 10rem;
  padding: 1rem 0;
  background-color: var(--color-main);
}

.lp_contents .set_schedule {
  margin-right: 1rem;
  font-size: 1.6rem;
  line-height: 1.68;
  font-feature-settings: "palt";
  letter-spacing: 0.075em;
  color: #fff;
}

.lp_contents .txt_time {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 3rem;
}

.lp_contents .time_text {
  margin: 0 2rem;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  font-feature-settings: "pkna";
  letter-spacing: 0.075em;
  color: #fff;
}

.lp_contents .time_num {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8rem;
  height: 8rem;
  font-family: var(--font-transat);
  font-weight: 400; 
  font-size: 4.7rem;
  line-height: 1;
  font-feature-settings: "pkna";
  letter-spacing: 0.075em;
  color: var(--color-black);
  background-color: #fff;
}

/* What's BlackFrdiay */

.lp_contents .intro_bf {
  position: relative;
  width: 80rem;
  margin: 0 auto;
  padding: 7rem 0 6.5rem;
  text-align: center;
}

.lp_contents .intro_bf::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("../img/border_out.svg");  
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/border_out.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  background: var(--color-main);
  content: "";
  filter: drop-shadow(5px 5px 5px var(--color-main));
}

.lp_contents .intro_bf::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/border_in.svg) center center / 99.4% 99.4% no-repeat;
  content: "";
  filter: drop-shadow(-5px -5px 5px var(--color-main));
}

.lp_contents .intro_inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 80rem;
  padding: 7.2rem 0 6.5rem;
}

.lp_contents .intro_ttl {
  margin-bottom: 4.4rem;
  font-family: var(--font-itc);
  font-weight: 300;
  font-size: 3.4rem;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.075em;
}

.lp_contents .intro_detail {
  font-size: 1.6rem;
  line-height: 2;
  font-feature-settings: "palt";
  letter-spacing: 0.075em;
  color: #fff;
}

/* ===================
  　　　 Date
=================== */

.lp_contents .date_of_event {
  padding: 4.6rem 0 5.5rem;
  text-align: center;
}

.lp_contents .date {
  margin-bottom: 0.8rem;
  font-size: 1.6rem;
  line-height: 1.6875;
  color: var(--color-main);
  letter-spacing: 0.075em;
  font-feature-settings: "palt";
}

.lp_contents .date_2item10off_pic {
  margin: 0 auto .9rem;
  width: 62.5rem;
  filter: drop-shadow(5px 5px 4px rgb(0,0,0,0.3));
}

.lp_contents .date_notice {
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-main);
  font-feature-settings: "palt";
}

/* ===================
  　　　 Nav
=================== */
.lp_contents .nav_area {
  padding: 2rem 0 6rem;
  background-color: var(--color-main);
}

.lp_contents .nav_ttl {
  margin: 4rem 0 4.4rem;
  font-size: 3rem;
  line-height: 0.9;
  color: #fff;
  text-align: center;
  letter-spacing: 0.075em;
  font-feature-settings: "palt";
}

.lp_contents .nav_ttl span {
  font-family: var(--font-itc);
  font-weight: 700;
}

.lp_contents .nav_list {
  display: flex;
  justify-content: center;
  gap: 2.7rem;
  filter: drop-shadow(5px 5px 4px rgb(114,114,114,0.3) );
  
}

.lp_contents .nav_group {
  width: 23rem;
}

.lp_contents .nav_num {
  margin-bottom: 0.2rem;
  font-family: var(--font-transat);
  font-weight: 300;
  font-size: 6rem;
  line-height: 1;
  color: #fff;
  text-align: center;
}

.lp_contents .nav_link_area {
  border-radius: 0.8rem;
  background: #fff;
}

.lp_contents .nav_link_area a {
  position: relative;
  display: block;
  width: 23rem;
  height: 15.3rem;
  border-radius: 0.8rem;
  background-color: #fff;
}

.lp_contents .nav_link_area a::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1.5rem;
  height: 2.77rem;
  margin-bottom: 1.5rem;
  transform: translateX(-50%) rotate(90deg);
  mask-image: url("../img/icn_next.svg");  
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/icn_next.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  background: var(--color-main);
  content: "";
}

.lp_contents .nav_link_area a p {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 11.3rem;
}
.lp_contents .nav_txt {
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: center;
  font-feature-settings: "palt";
}

.lp_contents .txt_color {
  color: var(--color-main);
}

/* ===================
  　　　 Step1
=================== */

.lp_contents .sec_step1 {
  padding: 8.6rem 0 10.5rem !important;
}

.lp_contents .step_ttl {
  display: flex;
  align-items: center;
  margin-bottom: 5rem;
  border-bottom: 1.11px solid var(--color-main);
}

.lp_contents .sec_ttl_num {
  margin: 0 5.7rem 0.5rem 2.5rem;
  font-family: var(--font-transat);
  font-weight: 400;
  font-size: 7rem;
  line-height: 1;
  color: var(--color-main);
}

.lp_contents .sec_ttl_txt {
  margin-bottom: 1.1rem;
  font-size: 2rem;
  font-feature-settings: "palt";
}

.lp_contents .step_cont_wrap {
  display: flex;
  gap: 9.8rem;
  justify-content: flex-start;
  margin-left: 13.1rem;
}

.lp_contents .step1_group{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp_contents .step_phone{
  margin-bottom: 4rem;
  width: 21rem;
}

.lp_contents .step1_group:first-of-type {
  position: relative;
}

.lp_contents .step1_group:first-of-type::after {
  position: absolute;
  right: -5rem;
  top: 27%;
  transform: translateY(50%);
  width: 3rem;
  height: 5.5rem;
  mask-image: url("../img/icn_next.svg");  
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/icn_next.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  background: var(--color-main);
  content: "";
}

.lp_contents .step_txt{
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: left;
  font-feature-settings: "palt";
}

/* .lp_contents .step1_group:first-of-type .step_txt {
  padding-left: 1.4rem;
} */

.lp_contents .step1_group:last-of-type .step_txt {
  padding-left: 0.8rem;
}

.lp_contents .step_notice{
  font-size: 1.3rem;
  line-height: 1;
  text-align: left;
}

/* ===================
  　Step2(Ranking)
=================== */

.lp_contents .sec_step2 {
  border-top: 1px solid #DCDCDC;
  padding: 8rem 0 10rem !important;
}

.lp_contents .sec_step2 .step_ttl {
  margin-bottom: 12rem;
}

.lp_contents .rank_ttl {
  margin-bottom: 6.2rem;
  font-family: var(--font-futura);
  font-weight: 400;
  font-size: 3.9rem;
  line-height: 1;
  color: #606060;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-feature-settings: "palt";
  text-align: center;
}

.ranking_slider {
  width: 100rem;
  margin: 0 auto;
}

.each_ranking {
  width: 100rem;
  margin-right: 20rem;
}

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

.item_list__inner {
  display: flex;
  gap: 1rem;
}

.ranking_list_wrap .item_list__item {
  position: relative;
  border-radius: 1rem;
  width: 19rem;
  padding-bottom: 1.8rem;
  background: #fff;
  box-shadow: 0 3px 6px rgb(0, 0, 0, 0.2);
  overflow: hidden;
}

.ranking_list_wrap .icn_rank {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  font-family: var(--font-base);
  font-size: 2rem;
  color: #fff;
  pointer-events: none;
}

.ranking_list_wrap .icn_rank::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  border-top: solid var(--color-main);
  border-left: solid transparent;
  border-width: 5rem;
  content: "";
}

.ranking_list_wrap .icn_rank span {
  margin-right: .8rem;
}

.ranking_list_wrap .item_list__img a {
  display: block;
}


.ranking_list_wrap .item_list__img img {
  vertical-align: bottom;
}

.ranking_list_wrap .item_list__cat {
  padding: .6rem;
  background: #ebebeb;
  font-size: 1.2rem;
  text-align: center;
}

.ranking_list_wrap .item_list__title {
  margin: 1.2rem 0 1rem;
  padding: 0 1rem;
  font-size: 1.4rem;
  line-height: 1.7;
}

.ranking_list_wrap .item_list__price {
  padding: 0 1rem;
  font-size: 2rem;
  font-weight: 300;
  font-family: var(--font-base);
}

.ranking_list_wrap .item_list__price .txt_sale {
  color: #de4e36;
}

.ranking_list_wrap .item_list__review {
  margin: 1rem 0 0.5rem;
  padding: 0.2rem 1rem 0;
  font-weight: 300;
  font-family: var(--font-base);
}

.ranking_list_wrap .item_list__review a {
  justify-content: flex-start;
  gap: .5rem;
}

.ranking_list_wrap .item_list__review .rate {
  position: relative;
  display: block;
  width: 10rem;
  height: 1.8rem;
  font-size: 1.8rem;
  margin-right: 0;
}

.ranking_list_wrap .item_list__review .num {
  display: none;
}

.ranking_list_wrap .item_list__review .ken {
  margin-left: 0;
}

.ranking_list_wrap .soldout {
  display: none;
}

.rate0:after {width: 0;}
.rate0-1:after,.rate0-2:after,.rate0-3:after,.rate0-4:after.rate0-5:after {width: 0.9rem;}
.rate0-6:after,.rate0-7:after,.rate0-8:after,.rate0-9:after,.rate1:after {width: 2rem;}
.rate1-1:after,.rate1-2:after,.rate1-3:after,.rate1-4:after,.rate1-5:after {width: 3rem;}
.rate1-6:after,.rate1-7:after,.rate1-8:after,.rate1-9:after,.rate2:after {width: 4rem;}
.rate2-1:after,.rate2-2:after,.rate2-3:after,.rate2-4:after,.rate2-5:after {width: 5.1rem;}
.rate2-6:after,.rate2-7:after,.rate2-8:after,.rate2-9:after,.rate3:after {width: 6rem;}
.rate3-1:after,.rate3-2:after,.rate3-3:after,.rate3-4:after,.rate3-5:after {width: 7.2rem;}
.rate3-6:after,.rate3-7:after,.rate3-8:after,.rate3-9:after,.rate4:after {width: 8rem;}
.rate4-1:after,.rate4-2:after,.rate4-3:after,.rate4-4:after,.rate4-5:after {width: 9.3rem;}
.rate4-6:after,.rate4-7:after,.rate4-8:after,.rate4-9:after,.rate5:after {width: 10rem;}

.comment_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  border-radius: 1.2rem;
  width: 80rem;
  margin: 8rem auto 0;
  padding: 3rem 0;
  background: #EAEAEA;
}

.staff_img_wrap {
  width: fit-content;
}

.staff_img {
  border-radius: 50%;
  width: 16.3rem;
  height: 16.3rem;
  margin: 0 auto 1rem !important;
  overflow: hidden;
}

.staff_name {
  margin-top: 1rem !important;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.5;
}

.staff_comment {
  width: 47.4rem;
  font-size: 1.6rem;
  line-height: 1.8;
}

/* ▼ arrow ▼ */
.ranking_slider .slick-arrow:before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  border-top: solid;
  border-right: solid;
  border-width: 2px;
  border-color: var(--color-main);
  width: 100%;
  height: 100%;
  content: "";  
}

.ranking_slider .slick-arrow {
  z-index: 1;
  width: 4rem;
  height: 4rem;
}

.ranking_slider .slick-next {
  top: 50%;
  right: 0;
  margin-right: -5rem;
  transform: translateY(0);
}

.ranking_slider .slick-prev {
  top: 50%;
  left: 0;
  margin-left: -5rem;
  transform: translateY(0);
}

.ranking_slider .slick-prev:before {
  transform: rotate(-135deg);
}

.ranking_slider .slick-next:before {
  transform: rotate(45deg);
}

/* ▲ arrow ▲ */

/* ▼ dots ▼ */
.ranking_slider.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.ranking_slider .slick-dots {
  display: flex !important;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0;
  bottom: 100%;
  margin-bottom: 3rem;
}

.ranking_slider .slick-dots li {
  width: 20rem;
  height: 4rem;
  margin: 0;
}

.ranking_slider .slick-dots li button {
  width: 100%;
  height: 100%;
  padding: 0;
}

.ranking_slider .slick-dots li button::before {
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  border: solid 1px var(--color-main);
  width: 100%;
  height: 100%;
  font-family: var(--font-noto);
  font-size: 1.6rem;
  letter-spacing: .05em;
  color: var(--color-main);
  opacity: 1;
}

.ranking_slider .slick-dots li:nth-of-type(1) button::before {
  content: "バイヤー 大地";
}

.ranking_slider .slick-dots li:nth-of-type(2) button::before {
  content: "PR 山本";
}

.ranking_slider .slick-dots li:nth-of-type(3) button::before {
  content: "アプリ担当 柳川";
}

.ranking_slider .slick-dots li.slick-active button::before {
  background: var(--color-main);
  color: #fff;
}
/* ▲ dots ▲ */

/* ===================
  　　　 Step3
=================== */

.lp_contents .sec_step3 {
  border-top: 1px solid #DCDCDC;
  padding: 8rem 0 11rem !important;
}

.lp_contents .feature_list {
  width: 94rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  row-gap: 6rem;
  column-gap: 3.8rem;
}

.lp_contents .feature_group {
  
}

.lp_contents .feature_link {
  width: 100%;
  height: 100%;
}

.lp_contents .feautre_bnr {
  margin-bottom: 2rem;
  width: 45rem;
  border-radius: 0.9rem;
  font-size: 0;
  overflow: hidden;
}

.lp_contents .feature_num {
  display: block;
  margin-bottom: 1rem;
  padding: 0.8rem 0;
  width: 9rem;
  font-size: 1.6rem;
  line-height: 1;
  background-color: var(--color-main);
  color: #fff;
  border-radius: 0.441rem;
  text-align: center;
}

.lp_contents .feature_cont {
  font-size: 1.6rem;
  line-height: 1.8;
  font-feature-settings: "palt";
}

/* ===================
  　　　 Step4
=================== */

.lp_contents .sec_step4 {
  border-top: 1px solid #DCDCDC;
  padding: 8rem 0 9.5rem !important;
}

.lp_contents .sec_step4 .step_ttl {
  margin-bottom: 9rem;
}

.lp_contents .step4_cont {
  position: relative;
  width: fit-content;
  margin: 0 auto 7.8rem;
  padding-left: 16rem;
  font-size: 2rem;
  line-height: 1.45;
  letter-spacing: 0.075em;
  font-feature-settings: "palt";
}

.lp_contents .step4_cont::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 12.2rem;
  height: 9.3rem;
  margin-top: -.8rem;
  mask-image: url("../img/icn_gift.svg");  
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/icn_gift.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  background: var(--color-main);
  content: "";
}

/* ===================
  　　　 Nav
=================== */
.lp_contents .bottom_nav {
  position: relative;
}

.lp_contents .bottom_nav.fixed {
  opacity: 1;
}

.lp_contents .bottom_nav {
  position: fixed;
  width: 100%;
  left: 50%;
  right: 0;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 6;
  padding: 1.8rem 0 2rem;
  background-color: var(--color-black);
  transition: opacity .4s ease-in-out;
  opacity: 0;
  

}

.lp_contents .bottom_nav_list {
  display: flex;
  justify-content: center;
}


.lp_contents .bottom_nav_list li {
  padding: 0 4rem;
  position: relative;
}

.lp_contents .bottom_nav_list li:after {
  position: absolute;
  top: 50%;
  right: 0;
  height: 4.5rem;
  transform: translateY(-50%);
  border-left: 1px solid #fff;
  content: "";
}

.lp_contents .bottom_nav_list li:first-child::before {
  position: absolute;
  top: 50%;
  left: 0;
  height: 4.5rem;
  transform: translateY(-50%);
  border-left: 1px solid #fff;
  content: "";
}

.lp_contents .bottom_nav_list a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  letter-spacing: 0.075em;
  font-feature-settings: "palt";
} 



/*=======================================
               Responsive
========================================*/


/* only PC */

@media screen and (min-width: 769px) {
  .sp_only {
    display: none;
  }
}



/*=======================================
                    PC
========================================*/

@media screen and (min-width: 769px) {

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


  .lp_contents {
    overflow: hidden;
  }
}




/* only tablet */

@media screen and (min-width: 769px) and (max-width: 1600px) {

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

}



/*=======================================
                    SP
========================================*/


/* only SP */

@media only screen and (max-width: 768px) {
  .pc_only {
    display: none;
  }

  .lp_contents {
    overflow: hidden;
    margin: 0 auto;
  }

  .lp_contents .inner_sec {
    width: calc(700 * (100vw / 750));
  }

  #share {
    transition: transform .3s;
  }

  #share.move {
    transform: translateY(calc(-100 * (100vw / 750)));
  }


  /* ===================
      Button Setting
=================== */
.lp_contents .btn {
  width: calc(450 * (100vw / 750));
  height: calc(120 * (100vw / 750));
  border-radius: calc(10.97 * (100vw / 750));
}


.lp_contents .btn a {
  align-items: center;
  padding: calc(20 * (100vw / 750)) calc(10 * (100vw / 750));
  font-size: calc(26 * (100vw / 750));
  line-height: 1.38;
  text-align: center;
}

/* buy survey */
.lp_contents .btn_survey {
  margin-bottom: calc(50 * (100vw / 750));
}

  /* ===================
  　　　 MV
=================== */
.lp_contents .mv_sec {
  padding: calc(40 * (100vw / 750)) 0 calc(60 * (100vw / 750)) 0;
}

.lp_contents .mv {
  margin: 0 auto;
}

.lp_contents .mv::before {
  width: calc(700 * (100vw / 750));
  height: calc(700 * (100vw / 750));
  margin-top: calc(10 * (100vw / 750));
}

.lp_contents .mv::after {
  width: calc(670 * (100vw / 750));
  height: calc(398 * (100vw / 750));
  margin-top: calc(44 * (100vw / 750));
}

.lp_contents picture {
  width: calc(682 * (100vw / 750));
}

/* schedule countdown */

.lp_contents .set_schedule_group {
  flex-direction: column;
  align-items: center;
  margin: calc(60 * (100vw / 750)) calc(50% - 50vw) 0;
  height: auto;
  padding: calc(40 * (100vw / 750)) 0;
}

.lp_contents .set_schedule {
  margin-right: calc(0 * (100vw / 750));
  margin-bottom: calc(36 * (100vw / 750));
  font-size: calc(26 * (100vw / 750));
  line-height: 1.03;
}

.lp_contents .txt_time {
  margin-left: calc(30 * (100vw / 750));
}

.lp_contents .time_text {
  margin: 0 calc(18 * (100vw / 750));
  font-size: calc(26 * (100vw / 750));
}

.lp_contents .time_num {
  width: calc(92.7 * (100vw / 750));
  height: calc(92.7 * (100vw / 750));
  font-size: calc(55 * (100vw / 750));
}

/* What's BlackFrdiay */


.lp_contents .intro_bf {
  width: calc(680 * (100vw / 750));
  padding: calc(95 * (100vw / 750)) 0 calc(95 * (100vw / 750));
}

.lp_contents .intro_bf::before {
  mask-image: url("../img/border_out_sp.svg");  
  -webkit-mask-image: url("../img/border_out_sp.svg");
  filter: drop-shadow(5px 5px 5px var(--color-main));
}

.lp_contents .intro_bf::after {
  background: url(../img/border_in_sp.svg) center center / 99.4% 99.4% no-repeat;
  filter: drop-shadow(-5px -5px 5px var(--color-main));
}


.lp_contents .intro_inner {
  margin: 0 auto;
  padding: calc(90 * (100vw / 750)) 0 calc(85 * (100vw / 750));
  width: calc(680 * (100vw / 750));
}

.lp_contents .intro_ttl {
  margin-bottom: calc(64 * (100vw / 750));
  font-size: calc(43 * (100vw / 750));
}

.lp_contents .intro_detail {
  font-size: calc(26 * (100vw / 750));
  line-height: 1.69;
}

/* ===================
  　　　 Date
=================== */

.lp_contents .date_of_event {
  padding: calc(113 * (100vw / 750)) 0 calc(143 * (100vw / 750));
}

.lp_contents .date {
  margin-bottom: calc(22 * (100vw / 750));
  font-size: calc(30 * (100vw / 750));
  line-height: 1.5;
  letter-spacing: 0.075em;
}

.lp_contents .date_2item10off_pic {
  margin: 0 auto calc(40 * (100vw / 750));
  width: calc(705 * (100vw / 750))
}

.lp_contents .date_notice {
  font-size: calc(22 * (100vw / 750));
}

/* ===================
  　　　 Nav
=================== */
.lp_contents .nav_area {
  padding: calc(53 * (100vw / 750)) 0 calc(102 * (100vw / 750));
}

.lp_contents .nav_ttl {
  margin: calc(40 * (100vw / 750)) 0 calc(51 * (100vw / 750));
  font-size: calc(41 * (100vw / 750));
  line-height: 1.56;
  letter-spacing: 0.03em;
}


.lp_contents .nav_list {
  flex-wrap: wrap;
  width: calc(700 * (100vw / 750));
  margin: 0 auto;
  gap: calc(30 * (100vw / 750));
  row-gap: calc(73 * (100vw / 750));
}

.lp_contents .nav_group {
  width: calc(334 * (100vw / 750));
}

.lp_contents .nav_num {
  margin-bottom: calc(5 * (100vw / 750));
  font-size: calc(70 * (100vw / 750));
}

.lp_contents .nav_link_area a {
  width: calc(334 * (100vw / 750));
  height: calc(222 * (100vw / 750));
  border-radius: calc(12 * (100vw / 750));
}

.lp_contents .nav_link_area a::before {
  width: calc(22 * (100vw / 750));
  height: calc(40 * (100vw / 750));
  margin-bottom: calc(8 * (100vw / 750));
}

.lp_contents .nav_link_area a p {
  height: calc(180 * (100vw / 750));
}

.lp_contents .nav_txt {
  font-size: calc(26 * (100vw / 750));
  line-height: 1.46;
}


/* ===================
  　　　 Step1
=================== */

.lp_contents .sec_step1 {
  padding: calc(100 * (100vw / 750)) 0 calc(120 * (100vw / 750)) !important;
}

.lp_contents .step_ttl {
  margin-bottom: calc(121 * (100vw / 750));
  border-bottom: 1.11px solid var(--color-main);
}


.lp_contents .sec_ttl_num {
  margin: 0 calc(30 * (100vw / 750)) calc(10 * (100vw / 750)) calc(0 * (100vw / 750));
  font-size: calc(120 * (100vw / 750));
}

.lp_contents .sec_ttl_txt {
  margin-bottom: 0;
  font-size: calc(36 * (100vw / 750));
  text-wrap: nowrap;
  letter-spacing: 0.075em;
}

.lp_contents .step_cont_wrap {
  flex-direction: column;
  gap: calc(135 * (100vw / 750));
  justify-content: center;
  margin-left: 0;
}


.lp_contents .step_phone{
  margin-bottom: calc(57 * (100vw / 750));
  width: calc(333 * (100vw / 750))
}

.lp_contents .step1_group:first-of-type {
  position: relative;
}

.lp_contents .step1_group:first-of-type::after {
  right: auto;
  left: 50%;
  top: 100%;
  width: calc(48 * (100vw / 750));
  height: calc(88 * (100vw / 750));
  margin-top: calc(30 * (100vw / 750));
  transform: translateX(-50%) rotate(90deg) ;
}

.lp_contents .step_txt{
  width: calc(620 * (100vw / 750));
  font-size: calc(26 * (100vw / 750));
  line-height: 1.69;
}

.lp_contents .step1_group:last-of-type .step_txt {
  width: calc(660 * (100vw / 750));
  padding-left: calc(0 * (100vw / 750));
}

.lp_contents .step_notice{
  font-size: calc(26 * (100vw / 750));
}

/* ===================
  　　Step2(Ranking)
=================== */

.lp_contents .sec_step2 {
  padding: calc(114 * (100vw / 750)) 0 calc(100 * (100vw / 750)) !important;
}

.lp_contents .sec_step2 .step_ttl {
  margin-bottom: calc(170 * (100vw / 750))
}

.lp_contents .rank_ttl {
  font-size: calc(66 * (100vw / 750));
  margin-bottom: calc(86 * (100vw / 750));
}

.ranking_slider {
  width: 100%;
}

.each_ranking {
  width: auto;
  padding: 0 calc(20 * (100vw / 750));
  margin-right: calc(20 * (100vw / 750));
  padding: 0 0 0 calc(25 * (100vw / 750));
}

.ranking_list_wrap {
  width: calc(750 * (100vw / 750));
}

.item_list__inner {
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * (100vw / 750));
}

.ranking_list_wrap .item_list__item {
  border-radius: calc(10 * (100vw / 750));
  width: calc(340 * (100vw / 750));
  padding-bottom: calc(30 * (100vw / 750));
}

.ranking_list_wrap .item_list__item:nth-of-type(n+3) {
  width: calc(220 * (100vw / 750));
}

.ranking_list_wrap .icn_rank {
  font-size: calc(26 * (100vw / 750));
}

.ranking_list_wrap .icn_rank::before {
  border-width: calc(60 * (100vw / 750));
}

.ranking_list_wrap .icn_rank span {
  margin-right: calc(8 * (100vw / 750));
}

.ranking_list_wrap .item_list__cat {
  padding: calc(10 * (100vw / 750));
  font-size: calc(22 * (100vw / 750));
}

.ranking_list_wrap .item_list__title {
  margin: calc(10 * (100vw / 750)) 0 calc(10 * (100vw / 750));
  padding: 0 calc(10 * (100vw / 750));
  font-size: calc(22 * (100vw / 750));
}

.ranking_list_wrap .item_list__price {
  padding: 0 calc(10 * (100vw / 750));
  font-size: calc(30 * (100vw / 750));
}

.ranking_list_wrap .item_list__review {
  margin: calc(15 * (100vw / 750)) 0 calc(10 * (100vw / 750));
  padding: calc(5 * (100vw / 750)) calc(10 * (100vw / 750)) 0;
}

.ranking_list_wrap .item_list__review a {
  gap: calc(10 * (100vw / 750));
}

.ranking_list_wrap .item_list__review .rate {
  width: calc(130 * (100vw / 750));
  height: calc(20 * (100vw / 750));
  font-size: calc(22 * (100vw / 750));
}

.ranking_list_wrap .item_list__review .ken {
  font-size: calc(20 * (100vw / 750));
}

.rate0:after {width: 0;}
.rate0-1:after,.rate0-2:after,.rate0-3:after,.rate0-4:after.rate0-5:after {width: calc(11 * (100vw / 750));}
.rate0-6:after,.rate0-7:after,.rate0-8:after,.rate0-9:after,.rate1:after {width: calc(24 * (100vw / 750));}
.rate1-1:after,.rate1-2:after,.rate1-3:after,.rate1-4:after,.rate1-5:after {width: calc(38 * (100vw / 750));}
.rate1-6:after,.rate1-7:after,.rate1-8:after,.rate1-9:after,.rate2:after {width: calc(48 * (100vw / 750));}
.rate2-1:after,.rate2-2:after,.rate2-3:after,.rate2-4:after,.rate2-5:after {width: calc(65 * (100vw / 750));}
.rate2-6:after,.rate2-7:after,.rate2-8:after,.rate2-9:after,.rate3:after {width: calc(75 * (100vw / 750));}
.rate3-1:after,.rate3-2:after,.rate3-3:after,.rate3-4:after,.rate3-5:after {width: calc(92 * (100vw / 750));}
.rate3-6:after,.rate3-7:after,.rate3-8:after,.rate3-9:after,.rate4:after {width: calc(105 * (100vw / 750));}
.rate4-1:after,.rate4-2:after,.rate4-3:after,.rate4-4:after,.rate4-5:after {width: calc(120 * (100vw / 750));}
.rate4-6:after,.rate4-7:after,.rate4-8:after,.rate4-9:after,.rate5:after {width: calc(130 * (100vw / 750));}

.comment_wrap {
  display: block;
  border-radius: calc(22 * (100vw / 750));
  width: calc(700 * (100vw / 750));
  margin: calc(150 * (100vw / 750)) 0 0;
  padding: calc(40 * (100vw / 750)) calc(30 * (100vw / 750));
}

.staff_img_wrap {
  position: relative;
  margin-bottom: calc(60 * (100vw / 750));
  padding-left: calc(250 * (100vw / 750));
}

.staff_img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(225 * (100vw / 750));
  height: calc(225 * (100vw / 750));
  margin: 0 !important;
}

.staff_name {
  margin-top: 0 !important;
  text-align: left;
  font-size: calc(30 * (100vw / 750));
}

.staff_comment {
  width: auto;
  font-size: calc(26 * (100vw / 750));
}

/* ▼ arrow ▼ */
.ranking_slider .slick-arrow {
  width: calc(40 * (100vw / 750));
  height: calc(40 * (100vw / 750));
}

.ranking_slider .slick-next {
  top: 100%;
  right: 0;
  margin: calc(60 * (100vw / 750)) calc(40 * (100vw / 750)) 0 0;
}

.ranking_slider .slick-prev {
  top: auto;
  left: 0;
  margin: calc(60 * (100vw / 750)) 0 0 calc(40 * (100vw / 750));
}

/* ▲ arrow ▲ */

/* ▼ dots ▼ */
.ranking_slider .slick-dots {
  margin-bottom: calc(40 * (100vw / 750));
  gap: calc(10 * (100vw / 750));
}

.ranking_slider .slick-dots li {
  width: calc(220 * (100vw / 750));
  height: calc(80 * (100vw / 750));
}

.ranking_slider .slick-dots li button::before {
  border-radius: calc(10 * (100vw / 750));
  font-size: calc(22 * (100vw / 750));
}

/* ▲ dots ▲ */

/* ===================
  　　　 Step3
=================== */

.lp_contents .sec_step3 {
  padding: calc(120 * (100vw / 750)) 0 calc(105 * (100vw / 750)) !important;
}

.lp_contents .sec_step3 .step_ttl {
  margin-bottom: calc(100 * (100vw / 750));
}

.lp_contents .feature_list {
  width: calc(680 * (100vw / 750));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  row-gap: 0;
  gap: calc(63 * (100vw / 750));
  column-gap: 0;
}

.lp_contents .feautre_bnr {
  margin-bottom: calc(30 * (100vw / 750));
  width: calc(680 * (100vw / 750));
  border-radius: calc(13.6 * (100vw / 750));
}

.lp_contents .feature_num {
  margin-bottom: calc(20 * (100vw / 750));
  padding: calc(8 * (100vw / 750)) 0 calc(11 * (100vw / 750));
  width: calc(135 * (100vw / 750));
  font-size: calc(26 * (100vw / 750));
  border-radius: calc(6.6 * (100vw / 750));
}

.lp_contents .feature_cont {
  font-size: calc(26 * (100vw / 750));
  line-height: 1.69;
  letter-spacing: 0;
}

/* ===================
  　　　 Step4
=================== */

.lp_contents .sec_step4 {
  padding: calc(121 * (100vw / 750)) 0 calc(98 * (100vw / 750)) !important;
}

.lp_contents .sec_step4 .step_ttl {
  margin-bottom: calc(103 * (100vw / 750));
}
.lp_contents .step4_group {
  margin: 0 0  calc(110 * (100vw / 750)) calc(-5 * (100vw / 750));
  gap: calc(39 * (100vw / 750));
}

.lp_contents .step4_img {
  width: calc(180 * (100vw / 750));

}

.lp_contents .step4_cont {
  margin: 0 auto calc(108 * (100vw / 750));
  padding-left: calc(220 * (100vw / 750));
  font-size: calc(26 * (100vw / 750));
  line-height: 1.65;
}

.lp_contents .step4_cont::before {
  width: calc(163 * (100vw / 750));
  height: calc(124 * (100vw / 750));
  margin-top: calc(-5 * (100vw / 750));
}

/* ===================
  　　　 Nav
=================== */
.lp_contents .bottom_nav {
  padding: calc(30 * (100vw / 750)) 0 calc(31 * (100vw / 750));
  overflow-x: scroll;
  overflow-y: hidden;
}

.lp_contents .bottom_nav_list {
  width: calc(1350 * (100vw / 750));
  justify-content: flex-start;
}



.lp_contents .bottom_nav_list li {
  padding: 0 calc(30 * (100vw / 750));
}

.lp_contents .bottom_nav_list li:after {
  height: calc(85 * (100vw / 750));
}

.lp_contents .bottom_nav_list li:first-child::before {
  height: 0;
}

.lp_contents .bottom_nav_list li:last-child::after {
  height: 0;
}

.lp_contents .bottom_nav_list a {
  font-size: calc(26 * (100vw / 750));
  line-height: 1.46;
} 






}