@charset "utf-8";

:root {
  --sp-base-width: 375;
  --sp-50px: clamp(50px, calc(100vw * (50 / var(--sp-base-width))), 100px);
  --sp-30px: clamp(30px, calc(100vw * (30 / var(--sp-base-width))), 60px);
  --sp-24px: clamp(24px, calc(100vw * (24 / var(--sp-base-width))), 48px);
  --sp-23px: clamp(23px, calc(100vw * (23 / var(--sp-base-width))), 46px);
  --sp-22px: clamp(22px, calc(100vw * (22 / var(--sp-base-width))), 44px);
  --sp-21px: clamp(21px, calc(100vw * (21 / var(--sp-base-width))), 42px);
  --sp-20px: clamp(20px, calc(100vw * (20 / var(--sp-base-width))), 40px);
  --sp-19px: clamp(19px, calc(100vw * (19 / var(--sp-base-width))), 38px);
  --sp-18px: clamp(18px, calc(100vw * (18 / var(--sp-base-width))), 36px);
  --sp-17px: clamp(17px, calc(100vw * (17 / var(--sp-base-width))), 34px);
  --sp-16px: clamp(16px, calc(100vw * (16 / var(--sp-base-width))), 32px);
  --sp-15px: clamp(15px, calc(100vw * (15 / var(--sp-base-width))), 30px);
  --sp-14px: clamp(14px, calc(100vw * (14 / var(--sp-base-width))), 28px);
  --sp-13px: clamp(13px, calc(100vw * (13 / var(--sp-base-width))), 26px);
  --sp-12px: clamp(12px, calc(100vw * (12 / var(--sp-base-width))), 24px);
  --sp-11px: clamp(11px, calc(100vw * (11 / var(--sp-base-width))), 22px);
  --sp-10px: clamp(10px, calc(100vw * (10 / var(--sp-base-width))), 20px);
  --sp-9px: clamp(9px, calc(100vw * (9 / var(--sp-base-width))), 18px);
  --sp-8px: clamp(8px, calc(100vw * (8 / var(--sp-base-width))), 16px);
  --sp-7px: clamp(7px, calc(100vw * (7 / var(--sp-base-width))), 14px);
  --sp-6px: clamp(6px, calc(100vw * (6 / var(--sp-base-width))), 12px);
  --sp-5px: clamp(5px, calc(100vw * (5 / var(--sp-base-width))), 10px);
  --sp-4px: clamp(4px, calc(100vw * (4 / var(--sp-base-width))), 8px);
  --sp-3px: clamp(3px, calc(100vw * (3 / var(--sp-base-width))), 6px);
  --sp-2px: clamp(2px, calc(100vw * (2 / var(--sp-base-width))), 4px);
}

.digitalsignage .sec {
  padding-bottom: var(--sp-50px);
}
.digitalsignage .sec-inner {
  margin-inline: auto;
  max-width: 750px;
  width: 100%;
}
.digitalsignage .sec-inner > *:last-child {
  margin-bottom: 0;
}

.digitalsignage .mv {
  display: flex;
  flex-direction: column;
  row-gap: 0px;
  margin-bottom: var(--sp-16px);
}
.digitalsignage .mv-img {
  text-align: center;
}
.digitalsignage .mv-note {
  background-color: #000E27;
  color: #fff;
  font-size: var(--sp-16px);
  font-weight: bold;
  letter-spacing: .028em;
  text-align: center;
  padding: var(--sp-11px) var(--sp-11px) var(--sp-13px);
}

.digitalsignage .coupon {
  display: grid;
  grid-template-columns: 1fr;
}
.digitalsignage .coupon-appeal {
  color: #E01111;
  font-size: var(--sp-14px);
  letter-spacing: .0224em;
  text-align: center;
  padding-left: var(--sp-24px);
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: var(--sp-7px);
}
.digitalsignage .coupon-appeal::before {
  content: '';
  background-image: url('/img/usr/freepage/digitalsignage_evidens/icon_clock.png');
  background-size: 100%;
  height: var(--sp-20px);
  width: var(--sp-20px);
  position: absolute;
  top: 0;
  left: 0;
}
.digitalsignage .coupon-btn {
  all: unset;
  outline: revert;
  background-color: #E01111;
  border-radius: 10px;
  box-sizing: border-box;
  cursor: pointer;
  color: #fff;
  font-size: var(--sp-20px);
  font-weight: bold;
  letter-spacing: .032em;
  line-height: calc(32 / 20);
  text-align: center;
  padding: var(--sp-12px);
}
.digitalsignage .coupon-btn.used {
  background-color: #D1D1D1;
  cursor: auto;
  pointer-events: none;
  user-select: none;
}
.digitalsignage .coupon-note-list {
  color: #656565;
  font-size: var(--sp-14px);
  letter-spacing: .0224em;
  line-height: 1.4;
  padding-left: 1em;
  text-indent: -1em;
  margin-top: var(--sp-12px);
}

.digitalsignage .hdg-lv2 {
  background: #EEEEEE;
  border-left: var(--sp-5px) solid #CC0000;
  border-bottom: 1px solid #E0E0E0;
  box-sizing: border-box;
  color: #333333;
  display: flex;
  align-items: center;
  margin: 0 0 var(--sp-30px) 0;
}
.digitalsignage .hdg-lv2 * {
  color: inherit;
}
.digitalsignage .hdg-lv2-txt {
  border: none;
  font-size: var(--sp-20px);
  font-weight: bold;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-grow: 1;
  padding: var(--sp-11px) var(--sp-8px) var(--sp-10px) var(--sp-10px);
  margin: unset;
}
.digitalsignage .hdg-lv2-txt span {
  display: inline;
  vertical-align: bottom;
  font-size: var(--sp-16px);
}
.digitalsignage .hdg-lv2-label {
  flex-shrink: 0;
  padding-block: var(--sp-2px);
  padding-right: var(--sp-3px);
  width: clamp(71px, calc(100vw * (71 / var(--sp-base-width))), 142px);
}
.digitalsignage h3 {
  border-left: var(--sp-4px) #D6080C solid;
  color: #333333;
  line-height: 130%;
  padding-left: var(--sp-10px);
  font-size: var(--sp-16px);
  font-weight: bold;
  margin-bottom: var(--sp-10px);
}
.digitalsignage h4 {
  color: #333333;
  font-size: var(--sp-15px);
  font-weight: bold;
  line-height: calc(26 / 18);
  margin: 0 0 var(--sp-10px) 0;
  box-sizing: border-box;
}
.digitalsignage .store-detail {
  display: flex;
  flex-direction: column;
  row-gap: var(--sp-10px);
  margin-bottom: var(--sp-30px);
}
.digitalsignage .store-detail img {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}
.digitalsignage .store-detail-main {
  background-color: #EEEEEE;
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: var(--sp-10px);
  padding: var(--sp-20px) var(--sp-13px) var(--sp-22px);
}
.digitalsignage .store-detail-btm {
  display: flex;
  flex-direction: column;
}
.digitalsignage .store-detail-btm > *:last-child {
  margin-bottom: 0;
}
.digitalsignage .note-list {
  color: #333;
  display: flex;
  flex-direction: column;
  row-gap: var(--sp-2px);
  font-size: var(--sp-12px);
  line-height: 1.5;
  margin-bottom: var(--sp-16px);
}
.digitalsignage .note-list * {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

@media screen and (min-width: 768px) {
  .digitalsignage .coupon-btn {
    transition: opacity .3s;
  }
  .digitalsignage .coupon-btn:hover {
    opacity: .7;
  }
}

@media screen and (max-width: 767px) {
  .digitalsignage .sec {
    padding-inline: var(--sp-16px);
  }
  .digitalsignage .mv {
    margin-inline: calc(-1 * var(--sp-16px));
  }
  .digitalsignage .hdg-lv2 {
    margin-inline: calc(-1 * var(--sp-16px));
  }
}