@charset "UTF-8";

/* =============================================================

   サイトジャック用 CSS

============================================================= */


/* 2026.2.25 10:00 〜 2026.3.31 23:59 | SAKURA Collection 2026
============================================================= */
footer {
  background-color: #e7dcdd;
}

/* -- ボタン -- */
.btn_01 {
  border-color: #daa6ac;
  background-color: #daa6ac;
  color: #fff !important;
}

.btn_01:hover {
  opacity: .9;
  border-color: #daa6ac;
  background-color: #daa6ac;
}

.top_hdg1 {
  position: relative;
  z-index: 1;
}

/* -- 非表示 -- */
/*.ranking .top_hdg1,
.ranking .ranking_tab,
.newArrival .top_hdg1,
.topics .top_hdg1,
.lineUp .top_hdg1,
.recommend .top_hdg1,
.top_news .top_hdg1,
.top-insta .top_hdg1,
.topics .topics_inner .topics_item .topics_ttl{
  position: relative;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}*/

/* -- メインビジュアル -- */
.MainVisual {
  position: relative;
  z-index: 0;
  padding: 12rem 5% 10rem;
}

.MainVisual::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.MainVisual::before {
  top: -11rem;
  left: 0;
  width: 41rem;
  height: 80.7rem;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_1.png) no-repeat 0 0;
  background-size: 100%;
}

.MainVisual .mv_slider_inner {
}

.MainVisual .slick-slide {
  padding: 0 1.25rem 1rem;
}

/* -- 定期便 -- */
.subscription {
  position: relative;
  background: #fcf5f7;
  z-index: 1;
}

.subscription::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18rem;
  right: 0;
  width: 22.6rem;
  height: 28rem;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_2.png) no-repeat 0 0;
  background-size: 100%;
  pointer-events: none;
}

.subscription .txt_wrap .privilege dd {
  background-color: #a7be9c;
  color: #fff;
}

.subscription .sec_inner .bnr {
  position: relative;
}

/* -- NEW ARRIVAL -- */
.newArrival {
  position: relative;
  z-index: 1;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_12.png) no-repeat left 0% bottom 61%;
  background-size: auto 76rem;
}

.newArrival::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -29rem;
  left: 0;
  width: 22.8rem;
  height: 59.4rem;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_3.png) no-repeat 0 0;
  background-size: 100%;
  pointer-events: none;
}

.newArrival::after {
  content: "";
  position: absolute;
  bottom: -19rem;
  right: 0;
  z-index: 1;
  width: 22.8rem;
  height: 31.4rem;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_4.png) no-repeat 0 0;
  background-size: 100%;
  pointer-events: none;
}

.dvRecommend {
  z-index: 1;
}

/* -- RANKING -- */
.ranking {
  position: relative;
  background: #fcf8f9;
  z-index: 0;
}

.ranking::before,
.ranking::after {
  /* content: ""; */
  /* position: absolute; */
  z-index: -1;
}

/* .ranking::before {
  top: 0;
  left: 50%;
  margin-left: -45rem;
  width: 100rem;
  height: 130.2rem;
  background: url(/Contents/ImagesPkg/sightjack/260225/240301_img_6.png) no-repeat 0 0;
  background-size: 100%;
}

.ranking::after {
  top: -11rem;
  left: 50%;
  margin-left: -64rem;
  width: 35.4rem;
  height: 33.3rem;
  background: url(/Contents/ImagesPkg/sightjack/260225/240301_img_7.png) no-repeat 0 0;
  background-size: 100%;
} */

/* -- TOPICS -- */
.topics {
  position: relative;
  z-index: 1;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_13.png) no-repeat 50% 55%;
  background-size: auto 74rem;
}

.topics .topics_inner {
  position: relative;
  z-index: 2;
}

.topics::before,
.topics::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.topics::before {
  top: -26rem;
  left: 0;
  width: 32rem;
  height: 36rem;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_5.png) no-repeat 0 0;
  background-size: 100%;
}

.topics::after {
  bottom: -18rem;
  right: 0;
  width: 30rem;
  height: 45rem;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_6.png) no-repeat 0 0;
  background-size: 100%;
}

/* -- LINE UP -- */
.lineUp {
  position: relative;
  z-index: 0;
  background-color: #fcf8f9;
}

.lineUp::before,
.lineUp::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.lineUp::before {
  left: 0;
  bottom: -8rem;
  width: 21rem;
  height: 61rem;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_7.png) no-repeat 0 0;
  background-size: 100%;
}

.lineUp::after {
  right: 0;
  bottom: -50rem;
  z-index: 1;
  width: 38rem;
  height: 56rem;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_8.png) no-repeat 0 0;
  background-size: 100%;
}

/* -- RECOMMEND -- */
.recommend {
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_14.png) no-repeat right 0% top 1%;
  background-size: auto 70.4rem;
}

.recommend .rcmd_item {
  background-color: #fff;
}

/* -- NEWS -- */
.top_news {
  position: relative;
  background: #fcf8f9;
  z-index: 0;
}

.top_news::before,
.top_news::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.top_news::before {
  top: -7rem;
  left: 0;
  width: 21.4rem;
  height: 19rem;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_9.png) no-repeat 0 0;
  background-size: 100%;
}

.top_news::after {
  bottom: -21rem;
  right: 0;
  z-index: 1;
  width: 23rem;
  height: 61rem;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_10.png) no-repeat 0 0;
  background-size: 100%;
}

/* -- INSTAGRAM -- */
.top-insta {
  position: relative;
  background-color: transparent;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_14.png) no-repeat right 0% top 75%;
  background-size: auto 72.7rem;
  z-index: 0;
  padding-bottom: 31rem;
}

.top-insta::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.top-insta::before {
  top: 0;
  left: 0;
  width: 26rem;
  height: 31rem;
  background: url(/Contents/ImagesPkg/sightjack/260225/img-pc_11.png) no-repeat 0 0;
  background-size: 100%;
}

.sightjack_logo {
  position: relative;
  margin: -12rem auto 7rem;
  width: 33rem;
  z-index: 2;
}

.page-top-btn-sightjack {
  display: grid;
  place-content: center;
  position: fixed;
  padding-top: .4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
  bottom: 10%;
  right: 4%;
  background-color: #e8c4ce;
  border-radius: 50%;
  color: #fff !important;
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: center;
  width: 8.6rem;
  height: 8.6rem;
  z-index: 2;
}

.page-top-btn-sightjack.is-show {
  opacity: 1;
  visibility: visible;
}

.page-top-btn-sightjack::before {
  content: '';
  position: absolute;
  top: -.8rem;
  right: -2.4rem;
  width: 4.6rem;
  height: 7.3rem;
  background-image: url(/Contents/ImagesPkg/sightjack/260225/panda.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 0;
}

/* PC用*/
@media (min-width: 769px) {

  header {
    background-color: #fcf8f9;
  }

  .subscription{
    padding: 10rem 0 10rem;
  }

  .ranking {
    padding: 9.2rem 0 9rem;
  }

  .newArrival,
  .lineUp,
  .recommend,
  .top_news {
    padding: 11rem 0 10rem;
  }

  .topics {
    padding: 10rem 0 8rem;
  }

  .top_news .btn_01 {
    margin-top: 6rem;
  }

  .topics .topics_inner .topics_item .topics_ttl{
    position: relative;
    z-index: -1;
  }
}

/* SP用*/
@media (max-width: 768px) {
  #Wrap {
    /* background-image: url(/Contents/ImagesPkg/sightjack/260225/bg_sp.png);
    background-size: contain;
    background-position: top center;
    background-repeat: repeat-y; */
  }

  header .header_inner {
    background-color: #fcf8f9;
  }

  footer .footer_inner .footer_utility .footer_directory-column:not(#link) .footer_list li {
    background-color: #ece4e5;
  }

  /* -- メインビジュアル -- */
  .MainVisual {
    padding: calc(80 * (100vw / 390)) calc(20 * (100vw / 390)) calc(80 * (100vw / 390));
  }

  .MainVisual::before {
    top: 0;
    width: calc(334 * (100vw / 390));
    height: calc(350 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260225/img-sp_1.png) no-repeat 0 0;
    background-size: 100%;
  }

  .MainVisual .mv_slider_inner {
    width: 100%;
    margin: auto;
    /* padding: 0 calc(20 * (100vw / 390)); */
  }

  .MainVisual .slick-dots {
    width: auto;
    right: calc(20 * (100vw / 390));
    left: calc(20 * (100vw / 390));
  }

  .MainVisual .slick-slide {
    padding: 0;
  }

  /* -- 定期便 -- */
  .subscription {
    padding: calc(60 * (100vw / 375 )) 0 calc(56 * (100vw / 375 ));
  }

  .subscription::before {
    top: calc(-66 * (100vw / 390));
    width: calc(78 * (100vw / 390));
    height: calc(130 * (100vw / 390));
    background-image: url(/Contents/ImagesPkg/sightjack/260225/img-sp_2.png);
    background-size: 100%;
  }

  /* -- NEW ARRIVAL -- */
  .newArrival {
    padding: calc(56 * (100vw / 375 )) 0 calc(60 * (100vw / 375 ));
    background: url(/Contents/ImagesPkg/sightjack/260225/img-sp_14.png) no-repeat left 0% bottom 70%;
    background-size: 100%;
    z-index: 1;
  }

  .newArrival::before {
    top: calc(-200 * (100vw / 390));
    width: calc(82 * (100vw / 390));
    height: calc(384 * (100vw / 390));
    background-image: url(/Contents/ImagesPkg/sightjack/260225/img-sp_3.png);
    background-size: 100%;
  }

  .newArrival::after {
    top: calc(494 * (100vw / 390));
    width: calc(101 * (100vw / 390));
    height: calc(172 * (100vw / 390));
    background-image: url(/Contents/ImagesPkg/sightjack/260225/img-sp_4.png);
    z-index: -1;
  }

  /* -- RANKING -- */
  .ranking {
    padding: calc(56 * (100vw / 375 )) 0 calc(60 * (100vw / 375 ));
  }

  /* .ranking::before {
    top: calc(-60 * (100vw / 390));
    right: 0;
    left: auto;
    margin-left: 0;
    width: calc(320 * (100vw / 390));
    height: calc(500 * (100vw / 390));
    background-image: url(/Contents/ImagesPkg/sightjack/260225/240301_img_6_sp.png);
    background-size: 100%;
  }

  .ranking::after {
    top: -11rem;
    left: 50%;
    margin-left: -64rem;
    width: 35.4rem;
    height: 33.3rem;
    background: url(/Contents/ImagesPkg/sightjack/260225/240301_img_7.png) no-repeat 0 0;
    background-size: 100%;
  } */

  .ranking .top_hdg1 {
    /* top: calc(60 * (100vw / 390)); */
  }

  /* -- TOPICS -- */
  .topics {
    padding: calc(68 * (100vw / 375 )) 0 calc(60 * (100vw / 375 ));
    background: url(/Contents/ImagesPkg/sightjack/260225/img-sp_14.png) no-repeat left 0% top 19%, url(/Contents/ImagesPkg/sightjack/260225/img-sp_15.png) no-repeat left 0% bottom 37%;
    background-size: 100% auto, 100% auto;
  }

  .topics::before {
    top: calc(-70 * (100vw / 390));
    width: calc(390 * (100vw / 390));
    height: calc(858 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260225/img-sp_5.png) no-repeat 0 0, url(/Contents/ImagesPkg/sightjack/260225/img-sp_6.png) no-repeat right 0% bottom 0%;
    background-size: calc(152 * (100vw / 390)) auto, calc(114 * (100vw / 390)) auto;
  }

  .topics::after {
    bottom: calc(-140 * (100vw / 390));
    z-index: -1;
    width: calc(390 * (100vw / 390));
    height: calc(711 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260225/img-sp_7.png) no-repeat 0 0, url(/Contents/ImagesPkg/sightjack/260225/img-sp_9.png) no-repeat right 0% bottom 0%;
    background-size: calc(94 * (100vw / 390)) auto, calc(146 * (100vw / 390)) auto;
  }

  /* -- LINE UP -- */
  .lineUp {
    padding: calc(120 * (100vw / 750 )) 0;
  }

  .lineUp::before {
    position: static;
    background-image: none;
  }

  .lineUp::after {
    right: auto;
    left: 0;
    bottom: calc(-74 * (100vw / 390));
    z-index: 1;
    margin-left: 0;
    width: calc(100 * (100vw / 390));
    height: calc(100 * (100vw / 390));
    background-image: url(/Contents/ImagesPkg/sightjack/260225/img-sp_10.png);
  }

  /* -- RECOMMEND -- */
  .recommend {
    padding: calc(60 * (100vw / 375 )) 0 calc(56 * (100vw / 375 ));
    background: url(/Contents/ImagesPkg/sightjack/260225/img-sp_15.png)  no-repeat left 0% top -6%;
    background-size: 100% auto;
  }
  .recommend .rcmd_item {
    background-color: #fff;
  }

  /* -- NEWS -- */
  .top_news {
    padding: calc(60 * (100vw / 375 )) 0 calc(56 * (100vw / 375 ));
    z-index: 1;
  }

  .top_news::before {
    top: calc(-90 * (100vw / 390));
    left: auto;
    right: 0;
    width: calc(130 * (100vw / 390));
    height: calc(200 * (100vw / 390));
    background-image: url(/Contents/ImagesPkg/sightjack/260225/img-sp_11.png);
  }

  .top_news::after {
    bottom: calc(-114 * (100vw / 390));
    left: 0;
    right: auto;
    width: calc(120 * (100vw / 390));
    height: calc(167 * (100vw / 390));
    background-image: url(/Contents/ImagesPkg/sightjack/260225/img-sp_12.png);
  }

  /* -- INSTAGRAM -- */
  .top-insta {
    padding: calc(70 * (100vw / 390)) 0 calc(240 * (100vw / 390));
    background: url(/Contents/ImagesPkg/sightjack/260225/img-sp_14.png)  no-repeat left 0% top 18%;
    background-size: 100% auto;
  }

  .top-insta::before {
    top: calc(229 * (100vw / 390));
    left: auto;
    right: 0;
    width: calc(90 * (100vw / 390));
    height: calc(320 * (100vw / 390));
    background-image: url(/Contents/ImagesPkg/sightjack/260225/img-sp_13.png);
  }

  .sightjack_logo {
    margin: calc(-150 * (100vw / 390)) auto calc(45 * (100vw / 390));
    width: calc(240 * (100vw / 390));
  }

  .page-top-btn-sightjack {
    padding-top: calc(4 * (100vw / 390));
    bottom: 3%;
    right: 5%;
    font-size: calc(14 * (100vw / 390));
    line-height: 1.3;
    width: calc(72 * (100vw / 390));
    height: calc(72 * (100vw / 390));
  }

  .page-top-btn-sightjack::before {
    top: calc(-6 * (100vw / 390));
    right: calc(-21 * (100vw / 390));
    width: calc(38 * (100vw / 390));
    height: calc(58 * (100vw / 390));
  }


}