@charset "UTF-8";

/*2026/02/10追記カート修正*/
@media print, screen and (max-width: 768px) {
    .c-panel__badge {
margin:auto;
        justify-content: center;
padding-top:16px;
    }
.c-panel__body{
margin:0 auto;
}
    .c-panel__price-wrapper {
        text-align: center;
        justify-content: center;
        display: flex;
        margin: 0 auto;
    }
}

#info_contents {
  margin-bottom: 0 !important;
}

#datsufuke {
  text-align: center;
  /*margin: 0 auto; padding-bottom:40px;*/
}

/* デザイン */
#step1 {
  background-color: #ecf6d3;
}

#step2 {
  background-color: #f7e7f5;
}

#step3 {
  background-color: #fffbd7;
}

#step1,
#step2,
#step3 {
  background-image: url("../images/bg.png");
  background-repeat: repeat-y;
  padding-bottom: 4em;
}

.link_more {
  text-align: center;
}

/*透過png配置 */
.mainArea,
.iconArea,
.de02Area,
.de03Area {
  position: relative;
}

.sokode,
.link_step1,
.link_step2,
.link_step3,
.icon_oshi {
  position: absolute;
  display: block;
}

/* Area */
.sokode {
  top: 4.218%;
  left: 36.0%;
}

.link_step1 {
  width: 160px;
  height: 210px;
  top: 60.46%;
  left: 9.02%;
}

.link_step2 {
  width: 160px;
  height: 210px;
  top: 60.46%;
  left: 39.58%;
}

.link_step3 {
  width: 160px;
  height: 210px;
  top: 60.46%;
  left: 70.13%;
}

.include01 .icon_box {
  display: none;
}

.include01 .name {
  font-weight: normal;
}

.img_box a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

/* 動画部分 */
/*.movie_box { }*/
.movie_fl {
  border: 5px solid #ffffff;
  box-shadow: 0.15em 0.15em 0.3em #bbb;
}

.movie_tit {
  background: #ffffff;
  border-radius: 1em;
}

/* 動き */
/*translateX(-50px)  X軸（左横に）方向に50px */
/*translateY(50px)  Y軸（上縦に）方向に50px */
/*translateY(-50px)  Y軸（下縦に）方向に50px */
/* ふわっとアニメ */
/* 動作を適用する箇所 */
.fuwatAnime {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 2s;
  /* アニメ時間 */
  -ms-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-transition-delay: 0.5s;
  /* 開始時間 */
  -ms-transition-delay: 0.5s;
  transition-delay: 0.5s;
  -webkit-animation-name: fuwatAnime;
  /* アニメ名 */
  -ms-animation-name: fuwatAnime;
  animation-name: fuwatAnime;
  visibility: visible !important;
}

.fuwatAnime2 {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 2.5s;
  /* アニメ時間 */
  -ms-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-transition-delay: 1.5s;
  /* 開始時間 */
  -ms-transition-delay: 1.5s;
  transition-delay: 1.5s;
  -webkit-animation-name: fuwatAnime2;
  /* アニメ名 */
  -ms-animation-name: fuwatAnime2;
  animation-name: fuwatAnime2;
  visibility: visible !important;
}

.fadeIn_r_Anime {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s;
  /* アニメ時間 */
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-transition-delay: 0.0s;
  /* 開始時間 */
  -ms-transition-delay: 0.0s;
  transition-delay: 0.0s;
  -webkit-animation-name: fadeIn_r_Anime;
  /* アニメ名 */
  -ms-animation-name: fadeIn_r_Anime;
  animation-name: fadeIn_r_Anime;
  visibility: visible !important;
}

.fadeIn_l_Anime {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s;
  /* アニメ時間 */
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-transition-delay: 0.0s;
  /* 開始時間 */
  -ms-transition-delay: 0.0s;
  transition-delay: 0.0s;
  -webkit-animation-name: fadeIn_l_Anime;
  /* アニメ名 */
  -ms-animation-name: fadeIn_l_Anime;
  animation-name: fadeIn_l_Anime;
  visibility: visible !important;
}

.fadeIn_ru_Anime {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s;
  /* アニメ時間 */
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-transition-delay: -0.5s;
  /* 開始時間 */
  -ms-transition-delay: -0.5s;
  transition-delay: -0.5s;
  -webkit-animation-name: fadeIn_ru_Anime;
  /* アニメ名 */
  -ms-animation-name: fadeIn_ru_Anime;
  animation-name: fadeIn_ru_Anime;
  visibility: visible !important;
}

.fadeIn_lu_Anime {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s;
  /* アニメ時間 */
  -ms-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-transition-delay: -0.5s;
  /* 開始時間 */
  -ms-transition-delay: -0.5s;
  transition-delay: -0.5s;
  -webkit-animation-name: fadeIn_lu_Anime;
  /* アニメ名 */
  -ms-animation-name: fadeIn_lu_Anime;
  animation-name: fadeIn_lu_Anime;
  visibility: visible !important;
}

/* 動作内容 */
@-webkit-keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-webkit-keyframes fuwatAnime2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

/*大から実寸にフェードイン@-webkit-keyframes fuwatAnime2 {

 0% { opacity: 0; -webkit-transform: translateY(0) scale(0.5); }

 70% { opacity: 1; -webkit-transform: translateY(0) scale(1.2); }

 100% { opacity: 1; -webkit-transform: translateY(0) scale(1.0); }

}*/
@-webkit-keyframes fadeIn_r_Anime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(300px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    width: 720px;
  }
}

@-webkit-keyframes fadeIn_l_Anime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-300px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    width: 720px;
  }
}

@-webkit-keyframes fadeIn_ru_Anime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(300px) translateY(200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    width: 720px;
  }
}

@-webkit-keyframes fadeIn_lu_Anime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-300px) translateY(200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    width: 720px;
  }
}

@keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-150px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fuwatAnime2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

/*大から実寸にフェードイン@keyframes fuwatAnime2 {

 0% { opacity: 0; -webkit-transform: translateY(0) scale(0.5); -ms-transform: translateY(0) scale(0.5); transform: translateY(0) scale(0.5); }

 70% { opacity: 1; -webkit-transform: translateY(0) scale(1.2); -ms-transform: translateY(0) scale(1.2); transform: translateY(0) scale(1.2); }

 100% { opacity: 1; -webkit-transform: translateY(0) scale(1.0); -ms-transform: translateY(0) scale(1.0); transform: translateY(0) scale(1.0); }

}*/
@keyframes fadeIn_r_Anime {
  0% {
    opacity: 0.5;
    /* 透明 */
    -webkit-transform: translateX(300px);
    -ms-transform: translateX(300px);
    transform: translateX(300px);
    /*X軸（右横に）方向に300px */
  }

  100% {
    opacity: 1;
    /* 不透明 */
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeIn_l_Anime {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(-300px);
    -ms-transform: translateX(-300px);
    transform: translateX(-300px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeIn_ru_Anime {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(300px) translateY(200px);
    -ms-transform: translateX(300px) translateY(200px);
    transform: translateX(300px) translateY(200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeIn_lu_Anime {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(-300px) translateY(200px);
    -ms-transform: translateX(-300px) translateY(200px);
    transform: translateX(-300px) translateY(200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

/* 画像位置調整 */
.c-panel__link {
  display: inline-flex;
  width: 90%;
}

/* 商品名、受取方法、価格 */
.c-panel__body {
  place-items: start;
  flex: 2;
  text-align: left;
  place-content: flex-start;
}

/* 価格色調整 */
.c-panel__price-wrapper {
  color: #FF3300;
}

.c-price-delete {
  color: #666;
}

.c-panel__discount-period{
  color: #333;
}

/* ボタン調整 */
.c-panel__action .btn {
  width: 45%;
  margin-left: 45%;
  margin-bottom: 5%;
  color: black;
  background-color: #ffffff;
  border: solid;
  border-color: #999999;
  border-radius: 7px;
  font-size: 25px;
  position: relative;
  padding: 0;
  z-index: 10;
}

.c-panel__header {
  flex: 2;
  padding-right: 3%;
  margin-top: auto;
  margin-bottom: auto;
}

.clear_contents .sample_view .c-panel__action {
  display: block;
  margin-top: 0px;
  width: 100%;
  text-align: right;
}

    .kome-1 {
        /* bottom: -51px; */
    font-size: 10.7px;
    margin-top: -32px;
    margin-right: 32px;
    text-align: right;
    }

        .kome-2 {
        /* bottom: -51px; */
    right: 57px;
    font-size: 10px;
    margin-top: -48px;
    margin: 9px;
    margin-top: -50px;
    text-align: center;
    }

             #datsufuke .link_more-1 {
        position: static !important;
        margin-top: 12px;
        text-align: center;
    }

             #datsufuke .link_more-2 {
        position: static !important;
        margin-top: 22px;
        text-align: center;
    }


/* PC表示 */
@media print,
screen and (min-width: 768px) {
  #datsufuke {
    width: 720px;
    margin: 0 auto;
  }
    .c-panel__name {
        font-size: 1.9rem;
        font-weight: 300;
    }
  .tit_copy {
    margin-top: 6em;
  }

  .tit_copy img {
    width: 85%;
  }

  .icon_oshi {
    top: 0;
    left: 10px;
    width: 115px;
    z-index: 2;
  }

  .link_more {
    margin: 0 1.8em 0 1.8em;
  }

      .kome-1 {
        /* bottom: -51px; */
          right: 57px;
        font-size: 14px;
        margin-top: 16px;
        margin-right: 32px;
        text-align: right;
    }

        .kome-2 {
        /* bottom: -51px; */
          right: 57px;
        font-size: 14px;
        margin-top: -13px;
        margin-right: 32px;
        text-align: right;
    }

             #datsufuke .link_more-1 {
        position: static !important;
        margin-top: 29px;
        text-align: center;
    }

             #datsufuke .link_more-2 {
        position: static !important;
        margin-top: 22px;
        text-align: center;
    }
    
    .sp-only {
  display: none;
}


  /* PC表示 */
.include01 {
        padding: 2em 2em 2em 0em;
        height: 310px;
    }

  .c-panel__header__image {
    width: 100%;
    min-width: 300px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}

  .include01 .display_exact .goods_set {
    margin: 0;
  }

  .include01 .img_box {
    width: 300px;
  }

  .include01 .r_img {
    /*width: 300px;*/
    border-radius: 0.7em;
  }

  .include01 .txt_box {
    margin-left: 320px;
    font-size: 1.4em;
    padding-top: 50px;
  }

  .include01 .left_noimg .txt_box {
    margin-left: 20px;
    font-size: 1.4em;
    padding-top: 50px;
  }

  .include01 .name_box {
    font-size: 0.9em;
    margin-bottom: 1.5em;
  }
  .c-panel__action .btn {
    width: 35%;
    margin-left: 45%;
    margin-bottom: 5%;
    color: black;
    background-color: #ffffff;
    border: solid;
    border-color: #999999;
    border-radius: 7px;
    font-size: 28px;
    position: relative;
    padding: 0;
    z-index: 10;
}

    .include01 .goods_set .btn {
        position: absolute;
        top: -145px;
        right: 4px;
        margin-top: 1em;
    }

  body.include01 .btn img {
    min-width: 200px;
    width: 70%;
  }

  /* 動画部分 */
  /*.movie_box { }*/
  .movie_fl {
    margin: 0 2em;
  }

  .movie_tit {
    padding: 0.4em 0;
    margin: 0 1.8em 0.5em 1.8em;
    font-size: 1.5em;
    letter-spacing: 0.5em;
  }

  .kaiyuu {
    /*display:none;*/
    margin: 5% 0;
  }

.display_matrix{display: none;}

}










/* SP表示 */
@media print,
screen and (max-width: 768px) {
  #datsufuke {
    width: 100%;
  }


  .c-panel__action {
    text-align: center;
    /* margin-left: auto; */
    /* margin-right: auto; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 16px;
}
  .c-panel__price-wrapper {
    margin-right: auto;
    margin-left: auto;
}

    .c-panel__desc {
        margin-right: auto;
        text-align: center;
        margin-left: auto;
        /* padding-right: 11%; */
        /* padding-left: 7%; */
        display: -webkit-box;
        overflow: hidden;
        font-size: 1.2rem;
        -webkit-line-clamp: 3;
        /* -webkit-box-orient: vertical; */
    }

.c-panel__action .btn {
    height: 44px;
    width: 54%;
    margin-left: 0%;
    margin-bottom: 5%;
    color: black;
    background-color: #ffffff;
    border: solid;
    border-color: #999999;
    border-radius: 7px;
    font-size: 23px;
    position: relative;
    padding: 0;
    z-index: 10;
}
.c-panel__badge {
    margin-right: auto;
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 4px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

    .c-panel__name {
        text-align: center;
        margin-right: auto;
        margin-left: auto;
        font-size: 1.5rem;
        font-weight: 300;
    }
  .contents_main {
    margin: 0;
  }

  #step1,
  #step2,
  #step3 {
    position: relative;
    background-size: cover;
    padding-bottom: 2.5em;
  }

.c-panel__link {
    width: 86%;
    margin: auto;
    display: block;
}

  .tit_copy {
    margin-top: 4em;
  }

  .icon_oshi {
    top: 3%;
    left: 3%;
    width: 23.61%;
    height: auto;
    z-index: 2;
  }

  .link_more {
    margin: 0 1.5em;
  }

  .link_more img {
    width: 75%;
  }



  /* Area */
  .sokode {
    width: 26.8%;
    height: 8.90%;
  }

  .link_step1,
  .link_step2,
  .link_step3 {
    width: 22.22%;
    height: 32.81%;
  }

  /* SP表示 */
  .include01 {
    padding: 1.5em;
  }

  .include01 .display_matrix .goods_set {
    margin: 0;
  }

  .include01 .display_matrix li {
    float: none;
  }

  .include01 .name_box {
    font-size: 85%;
  }

  .include01 .price_box {
    font-size: 90%;
    margin: 0 15%;
    margin-top: 3%;
  }

  .include01 .img_box {
    margin-bottom: 0.8em
  }

  .include01 .r_img {
    border-radius: 0.5em;
  }

  .include01 .goods_set .btn {
    margin:0%;
  }

  body.include01 .btn img {
    /*min-width: ;*/
    width: 60%;
    height: auto;
  }

  /* 動画部分 */
  /*.movie_box { }*/
  .movie_fl {
    margin: 0 1.5em;
  }

  .movie_tit {
    padding: 0.2em 0;
    margin: 0 1.5em 0.5em 1.5em;
  }

  .kaiyuu {
    margin: 5% 2%;
  }
  
  .display_exact{display: none;}

}
@media print, screen and (min-width: 768px) {
    #datsufuke {
        width: 720px;
        margin: 0 auto;
    }

        .c-price {
        font-size: 2.4rem;
    }
}
@media (max-width: 768px) {

  /* 顯示商品卡片 */
    /* LP 內：強制顯示所有商品卡片（SP） */
  #datsufuke .display_exact.sph_none {
    display: block !important;
  }

  /* 防止按鈕被擠壓 */
  #step3 .c-panel__action {
    position: static !important;
    margin-top: 12px;
  }

  #step3 .btn {
    /* width: 65%; */
  }

}
/* ===============================
   LP 綠色按鈕：只解除疊層
   =============================== */

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

  /* 找到「在商品卡下面的那顆綠色按鈕」 */
  #datsufuke .goods_set + .btn,
  #datsufuke .goods_set ~ .btn {
    position: static !important;
    margin-top: 20px;
  }

}

/* =================================
   LP 綠色圖片按鈕：解除重疊（PC）
   ================================= */
@media (min-width: 769px) {

     #datsufuke .link_more {
        position: static !important;
        margin-top: 59px;
        text-align: center;
    }



      .c-panel__action {
        position: relative;
        margin-top: 24px;
    }

  #datsufuke .link_more img {
    display: inline-block;
    max-width: 100%;
    height: auto;
  }

}
/* ichioshi */
/* 商品圖片實際外層（Demandware 幾乎一定有） */
.goods_set .productTile,
.goods_set .productImage {
  position: relative;
}

/* イチ推し badge */
.goods_set .ichioshi-badge {
  position: absolute;
  top: 8px;      /* 與舊站接近 */
  left: 8px;
  width: 120px;
  z-index: 20;
  pointer-events: none;
}

/* SP 微調 */
@media screen and (max-width: 767px) {
  .goods_set .ichioshi-badge {
      /* top: 3%; */
      left: 3%;
      width: 23.61%;
      height: auto;
      z-index: 2;
  }
}


@media screen and (max-width: 767px) {
  #step2 .link_more-1 img,
  #step3 .link_more-2 img {
    width: 66.5%;
  }
}