@charset "UTF-8";


/*================
====== coupon copy ===== */

.coupon-box {
  max-width: 760px;
  margin:60px auto;
}

.coupon-note {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: #3d6b4a;
}

.coupon-card {
  background: #dce9d5;
  border-radius: 16px;
  padding: 28px 20px 24px;
  text-align: center;
}

.coupon-title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: #222;
}

.coupon-code-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.coupon-code {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 500;
  color: #222;
  word-break: break-all;
}

.coupon-copy-btn {
  min-width: 200px;
  height: 50px;
  padding: 0 24px;
  border: none;
  border-radius: 10px;
  background: #1b4229;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.coupon-copy-btn:hover {
  opacity: 0.9;
}

.coupon-limit {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #222;
}



.coupon-msg {
    display:none;
    opacity:0;
    position:fixed;
    width:300px;
    height:40px;
    line-height:40px;
    background-color:#87a28e;
    color:#fff;top:50%;
    left:0;
    right:0;
    margin:auto;
    text-align:center;
    border-radius:5px;
    filter:drop-shadow(0 0 40px #4e4e4e);

    }

.coupon-msg.is-active{
    display:block;
    opacity:1;
    animation:fadeIn .3s ease-in 0s forwards;
}

@media screen and (max-width: 767px) {

  .coupon-note,.coupon-title {
    font-size: 20px !important;
  }


  .coupon-card {
    padding: 20px 16px;
    border-radius: 12px;
  }

  .coupon-title {
    margin-bottom: 16px;
    font-size: 24px;
  }

  .coupon-code-area {
    gap: 12px;
    margin-bottom: 14px;
  }

  .coupon-code {
    font-size: 28px;
  }

  .coupon-copy-btn {
    min-width: 180px;
    height: 52px;
    font-size: 20px;
  }

  .coupon-limit {
    font-size: 16px;
  }
}




/*================
======How to ===== */

.coupon__howto {
  margin-top: 0;
  overflow: clip;
}

.coupon-c-inner {
  max-width: 1200px;
  padding-right: 100px;
  padding-left: 100px;
  margin-right: auto;
  margin-left: auto;
}

.coupon__howto--headline{
  margin-bottom: 27px;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #447355;
}

.coupon__howto--step{
  margin-top: 40px;
  margin-bottom: 70px;
}

.coupon__howto.coupon-campaign .coupon__howto--step ol{
  display: flex;
  justify-content: space-between;
  width: 1001px;
  height: 226px;
  padding-top: 130px;
  padding-left: 5px;
  padding-right: 18px;
}

.coupon__howto.coupon-campaign .coupon__howto--step .coupon__howto--step-1{
    background: url(../img/shitadori/pc/howto1_shitadori-setvice.png) no-repeat;
    background-size: auto;
    background-size: 100%auto;
}

.coupon__howto.coupon-campaign .coupon__howto--step ol li{
    width: 210px;
    line-height: 1.5625;
    font-size: 16px;
}


.product-list-content .coupon_text {
  display: block;
  margin: 0px 0 22px;
  color: #000 !important;
  font-size: 13px;
  padding: 12px;
  background-color: #ebc172;
  text-align: center;
  border-radius: 5px;
}


@media screen and (max-width: 767px) {

#re-use a {
  text-decoration: none;
}

.coupon__howto.coupon-campaign .coupon__howto--step{
     margin: 5.3333333333vw 5.3333333333vw 8vw;
}

.coupon-c-inner {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.coupon__howto.coupon-campaign .coupon__howto--headline {
      line-height: 1.3043478261;
      font-size: 6.1333333333vw;

}



.coupon__howto.coupon-campaign .coupon__howto--step 
.coupon__howto--step-1 {
      background: url(../img/shitadori/sp/howto1_shitadori-setvice.png) no-repeat;
      background-size: auto 100%;

}

.coupon__howto.coupon-campaign .coupon__howto--step ol {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      width: auto;
      height: 117.3333333333vw;
      padding-top: 8vw;
      padding-bottom: 14.6666666667vw;
      box-sizing: border-box;
      padding-left: 46vw;
      padding-right: 0vw;

}

.coupon__howto.coupon-campaign .coupon__howto--step ol li {
    width: auto;
    max-width: 100%;
    line-height: 1.4285714286;
    font-size: 3.7333333333vw;
    text-align: left;
}

.product-list-content .coupon_text {
  max-width: 240px;
  margin: -10px 0 23px !important;


}




}