@charset "UTF-8";
.si1d{
  overflow: hidden;
}
.fv{
  position: relative;
}
.fvBlur{
  filter: blur(4px);
  animation:blur 1s ease-in-out forwards;
}
@keyframes blur{
  0%{
    filter: blur(4px);
  }
  100%{
    filter: blur(0);
  }
}
.fv_title{
  position: absolute;
  top: 51%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 90%;
}

.renewal{
  background-color: #f2c7d1;
}
.newColor_block{
  position: relative;
}
.newColor_mm{
  position: absolute;
  top: 1%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 92.2%;
}
.newColor_mh{
  position: absolute;
  top: 33%;
    right: 0;
  left: 0;
  margin: 0 auto;
  width: 92.1%;
}
.newColor_hv{
  position: absolute;
  top: 66%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 93.2%;
}
.newColor_item01{
  position: absolute;
  top: 69%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 93.2%;
}
.newColor_item02{
  position: absolute;
  top: 69%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 93.2%;
}

.lineUp{
  position: relative;
}
.lineUp_title{
  position: absolute;
  top: 3%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 40.2%;
}
.lineUp_wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: absolute;
  top: 15%;
  right: 0;
  left: 0;
  margin: 0 auto;
}
.lineUp_item{
  flex-basis: 31.4%;
  margin-bottom: 3px;
}
.lineUp_item:nth-child(4){
  margin-left: 1.9%;
}
.lineUp_item:nth-child(6){
  margin-right: 2%;
}
.lineUp_item:nth-child(7){
  margin-left: 1.9%;
}
.lineUp_item:nth-child(9){
  margin-right: 2%;
}
.lineUp_item{
  flex-basis: 31.4%;
}
.newItem{
  flex-basis: 32.4%;
  margin-left: -1%;
}
.lineUp_note{
  position: absolute;
  top: 94.7%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 74.9%;
}

.price_block{
  position: relative;
}
.blockShort{
  height: 445px;
  overflow: hidden;
}
.price_title{
  position: absolute;
  top: 10%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 43.2%;
}
.price_image{
  position: absolute;
  top: 30%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 84%;
}
.price_set_btn{
  position: absolute;
  top: 23.5%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 92%;
}
.price_teiki_btn{
  position: absolute;
  top: 58.5%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 92.2%;
}
.model{
  position: relative;
}
.model_image{
  position: absolute;
  top: 13.5%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 84.1%;
}
.campaign{
  position: relative;
}
.campaign_block{
  background-color: #ef96a6;
  position: relative;
}
.campaign_block + .campaign_block{
  background-color: #f3e9e7;
  padding-bottom: 90%;
}
.campaign_spbox_btn{
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: -20.5%;
  left: 2%;
  width: 98.2%;
}
.campaign_card_btn{
  position: absolute;
  left: 3.33%;
  top: 1%;
  width: 95.9%;
}
.campaign_subTitle{
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: 43%;
  width: 90.1%;
}
.campaign_set_btn{
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: 52%;
  width: 92%;
}
.campaign_teiki_btn{
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: 69%;
  width: 92.2%;
}
.campaign_image{
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: 89%;
  width: 91.6%;
}

/*si-600*/
.product_detail_lp .campaign_block{
  background-color: #f3e9e7;
  padding-bottom: 35%;
}
.campaignNotice{
  background-image: url(/images/pc/type/se_sie1d/2026/campaign_bg01.webp);
  background-color: #ef9faf;
  background-position: top center;
  background-repeat: no-repeat;
  margin: -30% 0 0 0;
}
.campaignNotice_details{
  background-image: url(/images/pc/type/se_sie1d/2026/campaign_spbox_detail_bg.webp);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100%;
  padding-bottom: 30px;
}
.campaignNotice_summary{
  cursor: pointer;
  display: block;
  list-style: none;
  position: relative;
}
.campaignNotice_summary::-webkit-details-marker {
  display:none;
}
.campaignNotice_summary::after{
  background-image: url(/images/pc/type/se_sie1d/2026/campaign_details_arrow.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  display: block;
  width: 16px;
  height: 24px;
  position: absolute;
  top: calc(50% - 13px);
  right: 54px;
  transition: transform 0.3s ease;
}
.campaignNotice_details[open] .campaignNotice_summary::after{
  transform: rotate(180deg);
}
.campaignNotice_block{
  background-color: #fff;
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;
  color: #7d7d7d;
  margin: -3% 5% 0 5%;
  padding: 30px 5% 30px;
  text-align: left;
}
.campaignNotice_text{
  font-size: 1.4rem;
  line-height: 2rem;
  margin-bottom: 10px;
}
.campaignNotice_wrap{
  align-items: center;
  display: flex;
  margin-bottom: 10px;
}
.campaignNotice_term{
  align-items: center;
  border: 1px solid #7d7d7d;
  flex-basis: 23%;
  display: flex;
  justify-content: center;
  margin-right: 3%;
  padding: 6px 0;
}
.campaignNotice_description{
  font-size: 2rem;
  flex-basis: 70%;
}
.campaignNotice_note{
  font-size: 1.6rem;
  line-height: 2rem;
  margin-bottom: 10px;
}
.campaignNotice_item{
  font-size: 1.6rem;
  position: relative;
  padding-left: 20px;
  line-height: 2rem;
  margin-bottom: 10px;
}
.campaignNotice_item:last-child{
  margin-bottom: 0;
}
.campaignNotice_item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #8a8a8a;
}
.campaignNotice_emphasis{
  color: #f03c5a;
}
.campaignNotice_marker {
  background: linear-gradient(transparent 65%, rgb(245 175 190 / 0.4) 65%);
}

.product_detail_lp .campaign_subTitle{
  top: 10%;
}
.product_detail_lp .campaign_card_btn{
  top: 0;
}
.product_detail_lp .campaign_teiki_btn{
  top: 52%;
}
.product_detail_lp .campaign_image{
  top: 78%;
}
/* card（各色単品） */
.product_detail_lp .campaignNotice_cardBg{
  background: linear-gradient(to bottom, #ef96a6 50%, #f1a3b3);
}
.product_detail_lp .campaign_price{
  position: absolute;
  top: 0.5%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 90%;
}
.product_detail_lp .campaign_block_cardPd{
  padding-bottom: 120%;
}
.product_detail_lp .campaign_set_btn_cardPos{
  top: 9.8%;
}
.product_detail_lp .campaign_spbox_btn_cardPos{
  top: 30%;
  left: 0;
  width: 100%;
}
.product_detail_lp .campaign_teiki_btn_cardPos{
  top: 60.5%;
}
.product_detail_lp .campaign_image_cardPos{
  top: 83.5%;
}
/* card（まとめ買い） */
.product_detail_lp .campaign_spbox_btn_cardPos02{
  top: 33.5%;
  left: 0;
  width: 100%;
}
.product_detail_lp .campaign_teiki_btn_cardPos02{
  top: 64.5%;
}
.product_detail_lp .campaign_image_cardPos02{
  top: 87%;
}
/* card（定期便） */
.product_detail_lp .campaignNotice_cardTeiki{
  background: linear-gradient(to bottom, #f091a6 30%, #f1b3be 60%, #f4e4e4 100%);
}
.product_detail_lp .campaign_block_cardTeiki{
  padding-bottom: 0;
}
.product_detail_lp .campaign_image_cardTeiki{
  top: 0;
}
/* よくある質問 */
.faq_si1d_co2{
  background-color: #f3e9e7;
}
.faq_si1d_co2 .productFaq_title{
  width: 38%;
  margin: 0 auto 6%;
}
.faq_si1d_co2 .productFaq_subTitle{
  color: #7d7d7d;
}
.faq_si1d_co2 .productFaq_summary{
  background-color: #f6afbf;
}
.faq_si1d_co2 .productFaq_answer{
  background-image: var(--bgImg);
  background-repeat: no-repeat;
  background-position: left 5% top 26px;
  background-size: 16px auto;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
}

.price .campaign_subTitle{
  top: 4%;
}
.price .price_set_image{
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: 1%;
  width: 93.3%;
}

.other_products{
  margin-top: 40px;
}
.other_products_title{
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 10px 15px;
}
.other_products_title{
  background-color: #f5afbe;
  text-align: left;
}
.other_products_image{
  margin-bottom: 20px;
}
.other_products_subTitle{
  font-size: 1.4rem;
  color: #3c3c3c;
  line-height: 1.9rem;
  margin: 6px 0 0;
}
.other_products_text{
  color: #f85993;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  text-align: center;
}

/*アニメーション設定*/

/* ぼかし */
.blur{
  filter: blur(4px);
  transition: filter 1.2s;
  transform: scale(1.015);
}
.blur.active{
  filter: blur(0);
}

/* シンプルフェードアップ */
.fadeUp {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.fadeUp.active {
  opacity: 1;
  transform: translateY(0);
}

/* シンプルフェードイン */
.fadeIn {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.fadeIn.active {
  opacity: 1;
}
/* 遅延時間を transition-delay で指定する */
.fadeIn.delay1 { transition-delay: 0s; }
.fadeIn.delay2 { transition-delay: 0.1s; }
.fadeIn.delay3 { transition-delay: 0.2s; }
.fadeIn.delay4 { transition-delay: 0.3s; }
.fadeIn.delay5 { transition-delay: 0.4s; }
.fadeIn.delay6 { transition-delay: 0.5s; }
.fadeIn.delay7 { transition-delay: 0.6s; }
.fadeIn.delay8 { transition-delay: 0.7s; }
.fadeIn.delay9 { transition-delay: 0.8s; }

/*波紋*/
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple.active .ripples_inner {
  position: absolute;
  left: 50%;
  top: 25%;
  width: 0;
  height: 0;
  border: solid 2px #f2c7d1;
  border-radius: 50%;
  opacity: 0;
  animation: ripples_anime 3s linear;
}
.ripple +.ripple.active .ripples_inner {
  top: 50%;
}
.newColor .ripple.active .ripples_inner {
  top: 38%;
}
.ripple.active .ripples_inner:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border: solid 2px #f2c7d1;
  border-radius: 50%;
  opacity: 0;
  animation: ripples_anime 3s linear 0.1s;
}
.ripple.active .ripples_inner:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border: solid 1px #f2c7d1;
  border-radius: 50%;
  opacity: 0;
  animation: ripples_anime 3s linear 0.2s;
}

@keyframes ripples_anime {
    0% {
    opacity: 0.8;
  }
  
  50% {   
    transform: translate(-450px,-450px);
    width: 900px;
    height: 900px;
    opacity: 0;
  }
}