.r-wakuwaku-modal {
  display: grid;
  align-items: center;
  justify-items: center;
  position: fixed;
  z-index: 9001;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: var(--red);
}
.r-wakuwaku-modal__back {
  position: absolute;
  right: 0;
  top: 0;
  content: "";
  width: calc(3 * var(--1em));
  aspect-ratio: 1;
  margin: calc(0.5 * var(--1em));
  background: url(../images/nav_close.png) no-repeat center center/50%;
}
.r-wakuwaku-modal__body {
  --1em: min(calc(100dvh / 852 * 20), calc(100vw / 393 * 20));
  display: grid;
  grid-template-rows: minmax(0, 1fr) max-content;
  align-items: center;
  justify-content: center;
  width: calc(19.65 * var(--1em));
  height: calc(42.6 * var(--1em));
}
.r-wakuwaku-modal__body > * {
  transition: opacity 400ms;
}
.r-wakuwaku-modal__body.is-loading {
  background: url(../images/loading.gif) no-repeat center center/calc(3 * var(--1em));
}
.r-wakuwaku-modal__body.is-loading > * {
  opacity: 0;
}
.r-wakuwaku-modal__body.is-loaded > * {
  opacity: 1;
}
.r-wakuwaku-modal__body::after {
  content: "";
  width: 100%;
  height: calc(1.5 * var(--1em));
  background: url(../images/meijiad_copyright.svg) no-repeat center center/auto 50%;
}

.r-wakuwaku-timer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr 1fr;
  box-sizing: border-box;
  width: calc(6.4 * var(--1em));
  border-radius: calc(0.75 * var(--1em));
  padding: calc(0.6 * var(--1em)) calc(0.8 * var(--1em));
  background: #190000;
}
.r-wakuwaku-timer > span {
  aspect-ratio: 34/56;
  background: url(../images/wakuwaku_timer_num.png) repeat-x 0 center/1000% 100%;
}
.r-wakuwaku-timer > span.num[data-num="0"] {
  background-position: 0% center;
}
.r-wakuwaku-timer > span.num[data-num="1"] {
  background-position: -100% center;
}
.r-wakuwaku-timer > span.num[data-num="2"] {
  background-position: -200% center;
}
.r-wakuwaku-timer > span.num[data-num="3"] {
  background-position: -300% center;
}
.r-wakuwaku-timer > span.num[data-num="4"] {
  background-position: -400% center;
}
.r-wakuwaku-timer > span.num[data-num="5"] {
  background-position: -500% center;
}
.r-wakuwaku-timer > span.num[data-num="6"] {
  background-position: -600% center;
}
.r-wakuwaku-timer > span.num[data-num="7"] {
  background-position: -700% center;
}
.r-wakuwaku-timer > span.num[data-num="8"] {
  background-position: -800% center;
}
.r-wakuwaku-timer > span.num[data-num="9"] {
  background-position: -900% center;
}
.r-wakuwaku-timer > span.colon {
  aspect-ratio: 17/56;
  background: url(../images/wakuwaku_timer_colon.png) no-repeat center center/contain;
}
.r-wakuwaku-timer.is-clear::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 144/110;
  width: 110%;
  transform: translate(-50%, -50%);
  background: url(../images/wakuwaku_timer_clear.png) no-repeat left top/200% 100%;
  animation-name: wakuwaku-timer-clear;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: steps(1);
}
.r-wakuwaku-timer.is-clear > span.num {
  background-image: url(../images/wakuwaku_timer_num_color.png);
}
.r-wakuwaku-timer.is-clear > span.colon {
  background-image: url(../images/wakuwaku_timer_colon_color.png);
}
.r-wakuwaku-timer .time.finish {
  animation-name: wakuwaku-timer-finish;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1);
}