@charset "utf-8";

:root {
    --font-yu-gothic: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}  

img {
  vertical-align: bottom;
}

/* ==========================================================================
汎用タイトル
=============================================================================  */

.coupon_title__wrap {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}
.coupon_title__inner {
  width: min(690px, calc(calc(690/750) * 100vw));
  margin-left: auto;
  margin-right: auto;
  border-radius: min(20px, calc(calc(20/750) * 100vw));
  overflow: hidden;
  box-shadow: 10px 10px 10px rgba(152, 90, 1, 0.5);
}
@media screen and (max-width: 750px) {
  .coupon_title__inner {
      box-shadow: 1.33vw 1.33vw 1.33vw rgba(152, 90, 1, 0.5);
  }
}

.coupon_title__head,
.coupon_title__bottom {
  background: url(../img/limited_coupon/coupon_title__bg01.webp) repeat-y;
  background-size: 100% auto;
}

.coupon_title__head {
  padding: min(20px, calc(calc(20/750) * 100vw)) 0 min(15px, calc(calc(15/750) * 100vw));
  text-align: center;
}
.coupon_title__date {
  display: inline-block;
  background: rgba(255, 255, 255, 0.38);
  border-radius: 9999px;
  margin-top: min(8px, calc(calc(8/750) * 100vw));
  padding: min(8px, calc(calc(8/750) * 100vw)) min(25px, calc(calc(25/750) * 100vw));
}
.coupon_title__date p {
  text-align: center;
  color: #735100;
  font-family: var(--font-yu-gothic);
  font-size: min(28px, calc(calc(28/750) * 100vw));
  font-weight: 600;
  line-height: 1;
  vertical-align: bottom;
}
.coupon_title__date p span {
  display: inline-block;
  font-size: min(22px, calc(calc(22/750) * 100vw));
}

.coupon_title__cont {
  padding: min(20px, calc(calc(20/750) * 100vw)) 0 min(10px, calc(calc(10/750) * 100vw));
  background: url(../img/limited_coupon/coupon_title__bg02.webp) no-repeat top / cover;
}

.coupon_title__count {
    color: #fff;
    font-family: var(--font-yu-gothic);
    font-size: min(25px, calc(calc(25/750) * 100vw));
    font-weight: 500;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding: min(16px, calc(calc(16/750) * 100vw)) 0 min(18px, calc(calc(18/750) * 100vw));
}
.coupon_title__count .yyc-day,
.coupon_title__count .yyc-hou,
.coupon_title__count .yyc-min,
.coupon_title__count .yyc-sec {
    font-size: min(35px, calc(calc(35/750) * 100vw));
    font-weight: 600;
    padding-left: min(8px, calc(calc(8/750) * 100vw));
}


/* ==========================================================================
汎用オファー　通常
=============================================================================  */
.coupon_offer {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(127deg, #ff745b 0%, #f3b05d 100%);
  padding: min(30px, calc(calc(30/750) * 100vw));
  box-sizing: border-box;
}
.coupon_offer::before {
  content: "";
  width: 100%;
  height: min(126px, calc(calc(126/750) * 100vw));
  background: url(../img/limited_coupon/coupon_offer__ttl.webp) no-repeat top / contain;
  position: absolute;
  top: 0;
  left: 0;
}

.coupon_offer__inner {
  background: #fff url(../img/limited_coupon/coupon_offer__dots.webp) no-repeat bottom center /contain;
  padding: min(117px, calc(calc(117/750) * 100vw)) 0 min(30px, calc(calc(30/750) * 100vw));
  box-shadow: 0 0 9px rgba(155, 155, 155, 0.36);
}
@media screen and (max-width: 750px) {
  .coupon_offer__inner {
    box-shadow: 0 0 1.2vw rgba(155, 155, 155, 0.36);
  }
}

.coupon_offer__inner h6 {
  text-align: center;
  color: #000;
  font-family: var(--font-yu-gothic);
  font-size: min(25px, calc(calc(25/750) * 100vw));
  font-weight: 600;
  line-height: 1;
  margin-bottom: min(15px, calc(calc(15/750) * 100vw));
}
.coupon_offer__count {
  color: #000;
  font-family: var(--font-yu-gothic);
  font-size: min(24px, calc(calc(24/750) * 100vw));
  font-weight: 600;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin: min(20px, calc(calc(20/750) * 100vw)) 0;
}
.coupon_offer__count .yyc-day,
.coupon_offer__count .yyc-hou,
.coupon_offer__count .yyc-min,
.coupon_offer__count .yyc-sec {
    padding-left: min(6px, calc(calc(6/750) * 100vw));
}
.coupon_offer__count .yyc-day-text,
.coupon_offer__count .yyc-hou-text,
.coupon_offer__count .yyc-min-text,
.coupon_offer__count .yyc-sec-text {
  font-size: min(18px, calc(calc(18/750) * 100vw));
}
.coupon_offer__card {
  margin: min(15px, calc(calc(15/750) * 100vw)) auto 0;
  width: min(610px, calc(calc(610/750) * 100vw));
}
.default_card {
  display: none;
}
.coupon_offer__btn {
  width: min(530px, calc(calc(530/750) * 100vw));
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
汎用オファー　メンズ
=============================================================================  */
.coupon_offer_m {
  width: 100%;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  background: url(../img/limited_coupon/coupon_offer_m__bg.webp) no-repeat top / cover;
  padding: min(30px, calc(calc(30/750) * 100vw));
  box-sizing: border-box;
}
.coupon_offer_m__inner {
  background: #fff;
  padding: min(30px, calc(calc(30/750) * 100vw)) 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  outline: min(3px, calc(calc(3/750) * 100vw)) solid #061d57;
  outline-offset: max(-9px, calc(-1 * (calc(9/750) * 100vw)));
}
.coupon_offer_m__inner h5 {
  color: #e80203;
  background: #fff;
  border: 1px solid #e80203;
  text-align: center;
  font-family: var(--font-yu-gothic);
  font-size: min(32px, calc(calc(32/750) * 100vw));
  font-weight: 600;
  line-height: min(53px, calc(calc(53/750) * 100vw));
  width: min(506px, calc(calc(506/750) * 100vw));
  margin: 0 auto min(20px, calc(calc(20/750) * 100vw));
}

.coupon_offer_m__inner h6 {
  text-align: center;
  color: #000;
  font-family: var(--font-yu-gothic);
  font-size: min(25px, calc(calc(25/750) * 100vw));
  font-weight: 600;
  line-height: 1;
  margin-bottom: min(15px, calc(calc(15/750) * 100vw));
}