@charset 'utf-8';

.cnt {
  position: relative;
}

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

.pankuzu,
.page_ttl {
  display: none;
}

.page_body .wrapper {
  padding: 0;
}

.lp_cnt button {
  appearance: none;
  border-radius: 0;
  border: 0;
  background: transparent;
  text-indent: -9999px;
  cursor: pointer;
}

.cnt1 {
  height: 496px;/*620*/
  background: url(cnt1_bg.webp) no-repeat center top;
  background-size: 100% auto;
}
.cnt1_txt1 {
  padding : 48px 0 ;/*60*/
}
.cart_area1 {
  min-height: 2216px;/*2770*/
  background: url(cart_area1_bg.webp) no-repeat center top;
  background-size: 100% auto;
}
.cart_area1_ttl {
  padding-top: 24px;/*30*/
  margin-bottom: 16px;/*20*/
}
.cart_area2 {
  min-height: 4918px;/*6148*/
  background: url(cart_area2_bg.webp) no-repeat center top;
  background-size: cover;
  padding-bottom: 40px;
}
.cart_area2_ttl {
  padding-top: 80px;/*100*/
  margin-bottom: 60px;/*80*/
}
.cart1 {
  margin-bottom: 20px;
}
.cart {
  position: relative;
}

.cart .info {
  width: 89%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 76%;
}
.cart .info dt {
  width: 50%;
  background: #8f8378;
  color: #fff;
  font-size: 22px;/*28*/
  line-height: 1;
  padding: 0.5em 0;
  text-align: center;
  float: left;
  cursor: pointer;
  user-select: none;
}
.cart .info .on {
  background: #372b2b;
  cursor: default;
}
.cart .info dd {
  display: none;
  width: 100%;
  position: absolute;
  top: 44px;
  left: 0;
  font-size: 16px;/*21*/
  line-height: 1.5;
  padding: 1em 1em 0 1.2em;
}
.cart .info .on+dd {
  display: block;
}
.cart .info li {
  color: #372b2b;
  font-size: 17px;/*21*/
  margin-left: 0.8em;
  line-height: 1.5;
  list-style: decimal;
}

.cart .slick-arrow {
  width: 45px;/*57*/
  height: 45px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
}
.cart .slick-prev {
  background: url(arrow_prev.webp) no-repeat;
  background-size: cover;
  left: 0;
}
.cart .slick-next {
  background: url(arrow_next.webp) no-repeat;
  background-size: cover;
  right: 0;
}
.cart .slick-dots {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
  position: absolute;
  left: 0;
  bottom: -50px;
}
.cart .slick-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8c8c8c;
}
.cart .slick-dots .slick-active button {
  background: #333;
}
.cart .slick-list {
  width: 89.33%;
  margin: auto;
}

.cart .btn_cart {
  display: block;
  position: absolute;
  transition: 0.2s;
}
.cart .btn_cart:hover {
  opacity: 0.8;
  transition: 0.2s;
}
.cart .btn_l {
  width: 436px;/*546*/
  height: 110px;/*137*/
  background: url(btn_l.webp) no-repeat center top;
  background-size: contain;
  left: 0;
  right: 0;
  margin: auto;
}
.cart .btn_s {
  width: 204px;/*256*/
  height: 95px;/*118*/
  background: url(btn_s.webp) no-repeat center top;
  background-size: contain;
  left: 59.73%;
}
.cart .btn1 {
  top: 62.5%;
}
.cart .btn2 {
  top: 63%;
}
.cart .btn3 {
  top: 82%;
}
.cart .btn4 {
  top: 81%;
}

.cart .btn5 {
  top: 69.5%;
}
.cart .btn6 {
  top: 84%;
}
.cart .btn10 {
  top: 70%;
}

.cart .btn7 {
  width: 491px;/*614*/
  height: 123px;/*153*/
  background: url(btn_cart_cool.webp) no-repeat center top;
  background-size: contain;
  position: absolute;
  top: 72.5%;
  left: 8.5%;
}
.cart .btn8 {
  width: 252px;/*316*/
  height: 119px;/*148*/
  background: url(btn_cart_beige.webp) no-repeat center top;
  background-size: contain;
  position: absolute;
  top: 84.5%;
  left: 10%;
}
.cart .btn9 {
  width: 252px;/*316*/
  height: 119px;/*148*/
  background: url(btn_cart_white.webp) no-repeat center top;
  background-size: contain;
  position: absolute;
  top: 84.5%;
  left: 48.5%;
}

.cart3 {
  height: 936px;/*1170*/
  background: url(cart3.webp) no-repeat center top;
  background-size: 100% auto;
}
.cart4 {
  height: 936px;/*1170*/
  background: url(cart4.webp) no-repeat center top;
  background-size: 100% auto;
}
.cart5 {
  height: 936px;/*1170*/
  background: url(cart5.webp) no-repeat center top;
  background-size: 100% auto;
}
.cart6 {
  height: 1056px;/*1320*/
  background: url(cart6.webp) no-repeat center top;
  background-size: 100% auto;
}
.cart7 {
  height: 496px;/*620*/
  background: url(cart7.webp) no-repeat center top;
  background-size: 100% auto;
}

.cart .item_text {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  z-index: -1;
}

.cart + .txt {
  color: #888;
  font-size: 16px;/*20*/
  line-height: 1;
  text-align: right;
  margin-right: 2em;
  margin-bottom: 56px;/*70*/
  position: relative;
  z-index: 2;
}
.cart3 + .txt {
  margin-top: -10px;
}
.cart4 + .txt {
  margin-top: -18px;
}
.cart5 + .txt {
  margin-top: -3px;
}
.cart6 + .txt {
  margin-top: 0px;
}
.cart7 + .txt {
  margin-top: -4px;
}
.cart + .txt a {
  color: inherit;
  text-decoration: underline;
}

.cart_area2_subttl {
  padding-top: 28px;
  padding-bottom: 8px;
}
.anchor {
  position: absolute;
  top: -20px;
}

@media (min-width: 768px) {
  .lp_cnt {
    width: 600px;
    margin: auto;
  }
  .page_body {
    background: url(pc_bg.webp) no-repeat fixed center top;
    background-size: cover;
  }
}

@media (max-width: 767px) {
  .cnt1 {
    height: 82.67vw;
  }
  .cnt1_txt1 {
    padding : 8vw 0 ;
  }
  .cart_area1 {
    min-height: 369.33vw;
  }
  .cart_area1_ttl {
    padding-top: 4vw;
    margin-bottom: 6vw;
  }
  .cart_area2 {
    min-height: 819.73vw;
    padding-bottom: 5.33vw;
  }
  .cart_area2_ttl {
    padding-top: 10.67vw;
    margin-bottom: 10.67vw;
  }
  .cart1 {
    margin-bottom: 2.67vw;
  }
  
  .cart .info dt {
    font-size: 3.73vw;
  }
  .cart .info dd {
    top: 7.73vw;
    font-size: 2.8vw;
  }
  .cart .info li {
    font-size: 2.8vw;
  }
  
  .cart .slick-arrow {
    width: 8vw;
    height: 8vw;
  }
  .cart .slick-dots {
    gap: 2.8vw;
    bottom: -11vw;
  }
  .cart .slick-dots button {
    width: 1.5vw;
    height: 1.5vw;
  }

  .cart .btn_l {
    width: 72.8vw;
    height: 18.23vw;
  }
  .cart .btn_s {
    width: 34.13vw;
    height: 15.74vw;
  }
  
  .cart .btn7 {
    width: 81.87vw;
    height: 20.4vw
  }
  .cart .btn8 {
    width: 42.13vw;
    height: 19.73vw;
  }
  .cart .btn9 {
    width: 42.13vw;
    height: 19.73vw;
  }

  .cart3 {
    height: 156vw;
  }
  .cart4 {
    height: 156vw;
  }
  .cart5 {
    height: 156vw;
  }
  .cart6 {
    height: 176vw;
  }
  .cart7 {
    height: 82.67vw;
  }

  .cart + .txt {
    font-size: 2.67vw;
    margin-bottom: 8vw;
  }
  .cart3 + .txt {
    margin-top: -1.33vwpx;
  }
  .cart4 + .txt {
    margin-top: -2.4vw;
  }
  .cart5 + .txt {
    margin-top: -0.4vw;
  }
  .cart6 + .txt {
    margin-top: 0px;
  }
  .cart7 + .txt {
    margin-top: -0.53vw;
  }

  .cart_area2_subttl {
    padding-top: 4.53vw;
    padding-bottom: 1.6vw;
  }
  
  .anchor {
    top: -34vw;
  }
}