.cnt {
  position: relative;
}

.lp_cnt * {
  line-height: 1;
  margin: 0;
  padding: 0;
}

.lp_cnt img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.page_ttl,
.pankuzu {
  display: none !important;
}

.page_body .wrapper {
  padding: 0;
}

/*fv*/
.cnt_fv .fv_ttl {
  position: absolute;
  top: 4%;
  left: 0%;
}

.cnt_fv .fv_maru1 {
  width: 22.13%;
  position: absolute;
  top: 31.67%;
  left: 10.93%;
}

.cnt_fv .fv_maru2 {
  width: 25.87%;
  position: absolute;
  top: 46.11%;
  left: 10.48%;
}

.cnt_fv .fv_txt2 {
  position: absolute;
  top: 77.2%;
  left: 0%;
}

.cnt_fv .fv_kikan {
  width: 100%;
  position: absolute;
  top: 82.5%;
  left: 0;
}

.cnt_osusume {
  margin-top: -55px;
  position: relative;
  z-index: 2;
}

/*nav*/
.nav {
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin: auto;
  background: #00102b;
}

.nav ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.nav li {
  width: 100%;
}

.nav li + li {
  border-left: 1px solid #fff;
}

.nav li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 1.5em 0 1em;
}

.nav li a::after {
  display: block;
  content: "";
  background: url(sankaku.webp) no-repeat center;
  background-size: contain;
  margin-top: 1em;
}

/*cnt1*/
.cnt1 {
  width: 600px;
  overflow-x: hidden;
}
.cnt1_txt1 {
  width: 100%;
  position: absolute;
  top: 7.5%;
  left: 0;
}

.cnt1_txt2 {
  width: 100%;
  position: absolute;
  top: 12.74%;
  left: 0;
}

.cnt1_txt3 {
  width: 100%;
  position: absolute;
  top: 17.5%;
  left: 0;
}

.cnt1_txt4 {
  width: 100%;
  position: absolute;
  top: 22.2%;
  left: 0;
}

.cnt1_txt5 {
  width: 100%;
  position: absolute;
  top: 27.2%;
  left: 0;
}

.cnt1_subttl {
  width: 100%;
  position: absolute;
  top: 37.2%;
  left: 0;
}

.cnt1_kaori1 {
  width: 100%;
  position: absolute;
  top: 41.4%;
  left: 0;
}

.cnt1_kaori2 {
  width: 100%;
  position: absolute;
  top: 70.5%;
  left: 0;
}

.cnt1 .hanabira1 {
  width: 13.33%;
  position: absolute;
  top: 5.91%;
  left: 2.27%;
}

.cnt1 .hanabira2 {
  width: 17.33%;
  position: absolute;
  top: 6.34%;
  right: 2%;
}

/*cnt2*/
.cnt2to3 {
  margin-top: -280px;
  position: relative;
  z-index: 3;
}
.cnt2 {
  height: 1190px;
  background: url(cnt2_bg.webp) no-repeat left top;
  background-size: cover;
}

.cnt2_ttl {
  width: 100%;
  position: absolute;
  top: 21.4%;
  left: 0;
}

.slide_wrapper {
  width: 100%;
  position: absolute;
  top: 37%;
  left: 0;
}

.slide_wrapper ul {
  width: 100%;
}

.slide_wrapper .slick-list .slick-slide img {
  mix-blend-mode: hard-light;
  opacity: 0.9;
}

.slide_wrapper .slick-arrow {
  display: block;
  width: 40px;
  /*50*/
  height: 40px;
  border-radius: 0;
  border: 0;
  appearance: none;
  text-indent: -9999px;
  position: absolute;
  top: 45%;
}

.slide_wrapper .slick-prev {
  background: transparent url(icon_prev.webp) no-repeat center;
  background-size: contain;
  left: 2%;
  z-index: 2;
}

.slide_wrapper .slick-next {
  background: transparent url(icon_next.webp) no-repeat center;
  background-size: contain;
  right: 2%;
  z-index: 2;
}

.slide_wrapper .slick-dots {
  display: flex;
  justify-content: space-between;
  width: 29.33%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 105%;
}

.slide_wrapper .slick-dots li {
  width: 16px;
  /*20*/
  height: 16px;
  border-radius: 50%;
  background: #fff;
}

.slide_wrapper .slick-dots .slick-active {
  background: #fdd212;
}

.slide_wrapper .slick-dots li button {
  opacity: 0;
}

/*cnt3*/
.message {
  margin: 2em 8% 0;
  position: relative;
  padding-bottom: 12%;
  height: 280px;
  overflow-y: hidden;
}
.cnt3_2 {
  height: 1240px;
  background: url(cnt3_2_bg.webp) no-repeat left center;
  background-size: cover;
  margin-top: 58px;
}
.cnt3_1 .message_txt p {
  color: #fff;
  font-size: calc(28px * 0.8);
  line-height: 2.14;
}

.cnt3_1 .message_txt span {
  display: block;
}

.txt_grad {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0.2%, rgba(255, 255, 255, 0) 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.no_txt_grad {
  opacity: 0;
}

.btn_more {
  width: 48%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}


.cnt3_btl {
  margin-top: 80px;
}

.cnt3_btl [class^="seibun"] {
  width: calc(251px * 0.8);
  position: absolute;
}

.seibun1 {
  top: -4.5%;
  right: 1%;
}

.seibun2 {
  top: 32%;
  left: 4.2%;
}

.seibun3 {
  top: 47%;
  right: 1%;
}

.cnt3_2 .cnt3_txt_btm {
  margin-bottom: calc(130px * 0.8);
  margin-top: -9%;
}

.link_bnr {
  display: block;
  width: 89.33%;
  margin: auto;
  margin-bottom: calc(60px * 0.8);
}

.seibun_area {
  z-index: 2;
}

.seibun {
  width: 89.33%;
  height: 200px;
  overflow-y: hidden;
  font-size: 18px;
  border: 1px solid #fff;
  padding: 0 1em 1.5em;
  position: relative;
  transition: 0.3s;
  margin: auto;
}

.seibun p {
  color: #fff;
  line-height: 1.66;
}

.seibun p b {
  font-size: 24px;
  display: block;
  color: #fff;
  font-weight: normal;
  text-align: center;
  padding-top: 1em;
  margin-bottom: 0.5em;
}

.btn_seibun {
  width: 28%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  margin: auto;
  cursor: pointer;
}

.hikari {
  position: relative;
  z-index: 2;
  mix-blend-mode: screen;
  margin-top: 40px;
}

/*cart*/
.cart_area {
  padding-top: 430px;
  margin-top: -45px;
  background: url(cart_bg_bottom.webp) center bottom / 100% auto no-repeat , url(cart_bg.webp) left top / cover no-repeat;
  padding-bottom: 200px;
  /*バナーが追加された時の背景の指定
  background: url(cart_bg.webp) no-repeat left top;
  padding-bottom: 500px;
  background-size: cover;*/
  position: relative;
}

.cart_area .cart_ttl {
  margin-bottom: 10px;
}
.cart_area .cart_ttl2 {
  width: 90.27%;
  margin-left: 4.8%;
}

/*cart*/
.cart1,
.cart2,
.cart3,
.cart4,
.cart5,
.cart6,
.cart7,
.cart8 {
  margin-bottom: 38px;
}
.cart_box {
  overflow: hidden;
}
.cart_box .cart {
  width: 50%;
  float: left;
}

.cart {
  position: relative;
}
.cart form button {
  appearance: none;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  text-indent: -9999px;
  position: absolute;
  cursor: pointer;
}
.btn_l {
  width: calc(360px * 0.8);
  height: calc(81px * 0.8);
  background: url(btn_cart_l.webp) no-repeat center;
  background-size: contain;
}
.btn_m {
  width: calc(280px * 0.8);
  height: calc(80px * 0.8);
  background: url(btn_cart_m.webp) no-repeat center;
  background-size: contain;
}
.btn_sm {
  width: calc(220px * 0.8);
  height: calc(75px * 0.8);
  background: url(btn_cart_sm.webp) no-repeat center;
  background-size: contain;
}
.btn_s {
  width: calc(200px * 0.8);
  height: calc(75px * 0.8);
  background: url(btn_cart_s.webp) no-repeat center;
  background-size: contain;
}
.cs .btn_l {
  background: url(btn_cs_l.webp) no-repeat center top;
  background-size: contain;
  pointer-events: none;
}
.cs .btn_m {
  background: url(btn_cs_m.webp) no-repeat center top;
  background-size: contain;
  pointer-events: none;
}
.cs .btn_sm {
  background: url(btn_cs_sm.webp) no-repeat center top;
  background-size: contain;
  pointer-events: none;
}
.cs .btn_s {
  background: url(btn_cs_s.webp) no-repeat center top;
  background-size: contain;
  pointer-events: none;
}
.btn1 {
  top: 84%;
  left: 0;
  right: 0;
  margin: auto;
}
.btn2 {
  top: 60%;
  left: 8%;
}
.btn3 {
  top: 60%;
  left: 37.33%;
}
.btn4 {
  top: 60%;
  left: 65.73%;
}
.btn5 {
  top: 90%;
  left: 0;
  right: 0;
  margin: auto;
}
.btn6 {
  top: 70.8%;
  left: 0;
  right: 0;
  margin: auto;
}
.btn7 {
  top: 90.4%;
  left: 11.33%;
}
.btn8 {
  top: 90.4%;
  left: 52.8%;
}
.btn9 {
  top: 81.5%;
  left: 65%;
}
.btn10 {
  top: 81.5%;
  left: 65%;
}
.btn11 {
  top: 72.3%;
  left: 41.5%;
}
.btn12 {
  top: 92%;
  left: 41.5%;
}
.btn13 {
  top: 60.8%;
  left: 65%;
}
.btn14 {
  top: 88.5%;
  left: 65%;
}
.btn15 {
  top: 68%;
  left: 41.5%;
}
.btn16 {
  top: 69.5%;
  left: 24.5%;
}
.btn17 {
  top: 69.5%;
  left: 18%;
}

.cart .maru50off {
  width: 24.27%;
  position: absolute;
  top: -3%;
  left: 1.3%;
}

.cart_area .cart_ttl3 {
  width: 59.07%;
  margin-left: 20%;
  margin-bottom: 10px;
}

.set_list {
  width: calc(590px * 0.8);
  appearance: none;
  background: #fff url(sankaku_bk.webp) no-repeat right 15px center;
  background-size: 14px auto;
  font-size: 17px; /*22*/
  padding: 10px 0 10px 10px;
  border-radius: 0;
  border: 1px solid #adadad;
  position: absolute;
  top: 66%;
  left: 0;
  right: 0;
  margin: auto;
  color: #000;
}
.cs .set_list {
  pointer-events: none;
  background-color: #adadad;
  background-image: none;
  color: #fff;
}

.cart_txt {
  width: 100%;
  color: #777;
  font-size: calc(20px * 0.8);
  line-height: 1;
  text-align: right;
  position: absolute;
  padding-right: 3.5em;
}
.cart_txt a {
  color: inherit;
  text-decoration: underline;
}
.cart3 .cart_txt {
  top: 46.5%;
}
.cart4 .cart_txt {
  top: 64.5%;
}
.cart5 .cart_txt {
  top: 64%;
}
.cart6 .cart_txt {
  top: 46%;
}
.cart7 .cart_txt {
  top: 49.5%;
}

/*anchor*/
#anchor1 {
  position: absolute;
  top: 80px;
}

#anchor2 {
  position: absolute;
  top: 160px;
}

#anchor3 {
  position: absolute;
  top: 160px;
}

@media (min-width: 768px) {
  .lp_cnt {
    width: 600px;
    margin: auto;
  }

  .pc_bg {
    display: block;
    content: "";
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    background: url(pc_bg.webp) no-repeat center;
    background-size: cover;
  }

  .nav li a {
    font-size: calc(26px * 0.8);
  }

  .nav li a::after {
    width: calc(29px * 0.8);
    height: calc(15px * 0.8);
  }
}

@media (max-width: 767px) {
  .pc_bg {
    display: block;
    content: "";
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    background: url(pc_bg.webp) no-repeat center;
    background-size: cover;
  }
  
  .cnt_osusume {
    margin-top: -6vw;
  }

  .nav li a {
    font-size: 3.47vw;
  }

  .nav li a::after {
    width: 3.87vw;
    height: 2vw;
  }

  .message_txt p {
    font-size: 3.73vw;
  }

  .cnt1 {
    width: 100vw;
  }

  /*cnt2*/
  .cnt2to3 {
    margin-top: -45vw;
  }
  .cnt2 {
    height: 198.4vw;
  }
  .cnt3_2 {
    height: 194vw;
    margin-top: 8vw;
  }

  .slide_wrapper .slick-arrow {
    width: 6.67vw;
    height: 6.67vw;
  }
  .slide_wrapper .slick-dots li {
    width: 2.67vw;
    height: 2.67vw;
  }

  /*cnt3*/
  .cnt3 {
    margin-top: -2vw;
  }
  .message {
    height: 44vw;
  }
  .cnt3_1 .message_txt p {
    font-size: 3.73vw;
  }

  .cnt3_2 {
    margin-top: 10vw;
  }

  .cnt3_btl {
    margin-top: 8.4vw;
  }

  .cnt3_btl [class^="seibun"] {
    width: 32.53vw;
  }
  .message_txt p {
    font-size: 3.73vw;
  }
  .cnt3_2 .cnt3_txt_btm {
    margin-bottom: 14vw;
  }
  .link_bnr {
    margin-bottom: 8vw;
  }

  .seibun {
    height: 26.6vw;
  }

  .seibun p {
    font-size: 2.4vw;
  }

  .seibun p b {
    font-size: 3.2vw;
  }

  .hikari {
    margin-top: 6.67vw;
  }

  /*cart*/
  .cart1,
  .cart2,
  .cart3,
  .cart4,
  .cart5,
  .cart6,
  .cart7,
  .cart8 {
    margin-bottom: 4vw;
  }
  .cart_box .cart {
    width: 48.27vw;
  }
  .cart2_top {
    height: 146vw;
  }
  .btn_l {
    width: 48vw;
    height: 10.8vw;
  }
  .btn_m {
    width: 37.33vw;
    height: 10vw;
  }
  .btn_sm {
    width: 29.33vw;
    height: 10vw;
  }
  .btn_s {
    width: 26.67vw;
    height: 10vw;
  }
  .set_list {
    width: 78.667vw;
    background: #fff url(sankaku_bk.webp) no-repeat right 2.5vw center;
    background-size: 2.333vw auto;
    font-size: 2.933vw;
    padding: 1.667vw 0 1.667vw 1.667vw;
  }

  /*cart*/
  .cart_area {
    padding-top: 70.5vw;
    padding-bottom: 30vw;
    /*バナーがあるときの背景の余白
    padding-bottom: 70vw;*/
    margin-top: -10vw;
  }

  .cart_area .cart_ttl {
    margin-bottom: 5vw;
  }
  .cart_area .cart_ttl2 {
    margin-bottom: 5vw;
    margin-bottom: 1.5vw;
  }
  .cart_area .cart_ttl3 {
    margin-bottom: 1.5vw;
  }
  .cart_txt {
    font-size: 2.67vw;
  }
  .cart7 .cart_txt {
    top: 48%;
  }

  /*anchor*/
  #anchor1 {
    position: absolute;
    top: 10vw;
  }

  #anchor2 {
    position: absolute;
    top: 20vw;
  }

  #anchor3 {
    position: absolute;
    top: 30vw;
  }
}

/*-------------------------
終売対応
-------------------------*/
.end form button {
  pointer-events: none;
}

.end form button::after {
  display: flex;
  justify-content: center;
  align-items: center;
  content: "販売期間は終了しました";
  width: 100%;
  height: 100%;
  background: #aaa;
  color: #fff;
  text-indent: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.end .btn_l {
  font-size: 20px;
}

.end .btn_m,
.end .btn_s {
  font-size: 13px;
}

.end .dousen {
  display: none;
}
.end .set_list {
  pointer-events: none;
  background: #999;
}

@media (max-width: 767px) {
  .end .btn_l {
    font-size: 3.33vw;
  }

  .end .btn_m,
  .end .btn_s {
    font-size: 2.2vw;
  }
}

.end_txt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 64px;
  background: #aaa;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  font-family: serif;
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  .end_txt {
    height: 14vw;
    font-size: 5.3vw;
  }
}

@media (min-width: 768px) {
  .dousen {
    margin: 48px auto 0;
    width: 540px;
  }
  .dousen p {
    color: #fff;
    text-align: center;
    font-size: 20px;
    padding-bottom: 1em;
  }
}
@media (max-width: 767px) {
  .dousen {
    padding: 8vw 0 0;
    margin: auto;
    width: 90vw;
  }
  .dousen p {
    color: #fff;
    text-align: center;
    font-size: 4vw;
    padding-bottom: 2vw;
  }
}