@charset "UTF-8";

/* ----------------------------------------------------------------
  .areaCountdown
----------------------------------------------------------------- */
.areaCountdown, .areaCountdown * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.areaCountdown {
  width: 950px;
  margin: 0 auto 10px;
}
.areaCountdown a {
  color: #383838;
}

.areaCountdownInner {
  margin: 0;
  padding: 0;
}

/* AOTOP */
.areaCountdown.aotop {
  width: 1200px;
  padding: 0 5px;
}

/* .countdownWrap
----------------------------------------------- */
.countdownWrap {
  line-height: 1.2;
  margin: 0 0 3px;
}
.countdownWrap:before, .countdownWrap:after {
  content: '';
  display: table;
}
.countdownWrap:after {
  clear: both;
}

/* .countdownImg
----------------------------------------------- */
.countdownImg {
  float: left;
}

/* .countdownBox
----------------------------------------------- */
.countdownBox {
  float: right;
  width: 249px;
  height: 60px;
  border: 2px solid #e60000;
  background: #fff;
  color: #333;
  font-size: 15px;
  text-align: center;
  margin: 0;
  padding: 5px 0 0;
}
.countdownBox > span {
  display: block;
}
.countdownBox .txtPeriod {
  margin: 0;
}
.countdownBox .txtNum {
  color: #e60000;
  font-size: 26px;
  font-weight: bold;
}
.countdownBox .txtMin {
  font-size: 18px;
}

.countdownBox .txtEnd {
  font-weight: bold;
  padding: 15px 5px 0;
}

/* AOTOP */
.areaCountdown.aotop .countdownBox {
  width: 304px;
  border-width: 3px;
}
.areaCountdown.aotop .countdownBox .txtNum {
  font-size: 27px;
}
.areaCountdown.aotop .countdownBox .txtMin {
  font-size: 20px;
}

/* .countdownSup
----------------------------------------------- */
.countdownSup {
  font-size: 12px;
  text-align: right;
  margin: 0;
  padding: 0;
}
.countdownSup > :last-child {
  margin-bottom: 0;
}

/* .modal-trigger
----------------------------------------------- */
.modal-trigger {
  -webkit-appearance: none;
  border: 0;
  background: none;
  color: #333;
  font-size: 12px;
  text-decoration: underline;
  margin: 0;
  padding: 0;
}
.modal-trigger:hover,
.modal-trigger:active,
.modal-trigger:focus {
  text-decoration: none;
}

/* .js_countdownDisplay
----------------------------------------------- */
.js_countdownDisplay {
  display: none;
}


/* ----------------------------------------------------------------
  .discountCoupon
----------------------------------------------------------------- */
.discountCoupon, .discountCoupon * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.discountCoupon {
  width: 950px;
  margin: 0 auto 10px;
  padding: 0;
}

.discountCouponWrap {
  margin: 0 0 8px;
  padding: 0;
}
.discountCouponWrap:before,
.discountCouponWrap:after {
  content: '';
  display: table;
}
.discountCouponWrap:after {
  clear: both;
}

.discountCoupon .img,
.discountCoupon .box {
  float: left;
  height: 60px;
  margin: 0;
}

.discountCoupon .img img {
  max-width: 100%;
}

.discountCoupon .box {
  width: 449px;
  border: 2px solid #e60000;
  border-left: 0;
  background: #fff;
  color: #333;
  font-weight: bold;
  line-height: 1;
  display: table;
}
.discountCoupon .box > dt,
.discountCoupon .box > dd {
  vertical-align: middle;
  display: table-cell;
}
.discountCoupon .box > dt {
  min-width: 160px;
  background: #fbfe05;
  font-size: 18px;
  padding: 5px 10px 5px 20px;
  position: relative;
}
.discountCoupon .box > dt:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 28px 0 28px 11px;
  border-color: transparent transparent transparent #fbfe05;
  position: absolute;
  top: 0;
  right: -11px;
  display: block;
}
.discountCoupon .box > dd {
  font-size: 32px;
  text-align: center;
  letter-spacing: -.05em;
  padding: 5px 10px 5px 20px;
}

.discountCoupon .link {
  clear: both;
  font-size: 12px;
  text-align: right;
  line-height: 1.2;
}

/* .link_opacity
----------------------------------------------- */
.discountCoupon .link_opacity {
  opacity: 1;
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
}
.discountCoupon .link_opacity:hover,
.discountCoupon .link_opacity:active,
.discountCoupon .link_opacity:focus {
  opacity: .75;
}
