@charset "utf-8";

/*==============================================================================
【ページ全体の大枠】
================================================================================*/
#presale_rider_teaser a:hover{
  opacity:0.9;
}

/* カウントダウン中 */
.countdown_area {
  position: relative;
  background: #000000;
}

.countdown_colon {
  position: absolute;
  background: url(20200803_presale_rider_ka78wbv_9kaue32__bg_colon.png) no-repeat top center;
  background-size: 100% auto;
  width: 100%;
  height: 100%;
  -webkit-animation:move-background 1.5s linear infinite;
  animation:move-background 1.5s linear infinite;
  transition: all 1.5s;
}

.countdown_num {
  font-size: 0;
  background: #000000 url(20200803_presale_rider_ka78wbv_9kaue32__bg_countdown.png) no-repeat top center;
  background-size: 100% auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.countdown_num.pc_only {
  padding: 3.6% 13.8% 10%;
}
.countdown_num.sp_only {
  padding: 3.6% 13.8% 14%;
}

.countdown_num::after {
  display: none;
}

.pc_only img {
  width: 34%;
  height: auto;
  margin: 0 2%;
}
.sp_only img {
  width: 26%;
  height: auto;
  margin: 0 2%;
}

.countdown_num_day,
.countdown_num_hou,
.countdown_num_min,
.countdown_num_sec {
  position: relative;
  margin: 0;
  text-align: center;
}

.countdown_num_day::after,
.countdown_num_hou::after,
.countdown_num_min::after,
.countdown_num_sec::after {
  display: none;
}

/* 開始までの文言 */
.txt_release_rider {
  padding: 5% 24% 1%;
}
.txt_start_rider {
  position: relative;
  z-index: 1;
  background: #000;
  padding: 3% 12% 4%;
}

/* 終了 */
.countdown_closed {
  padding: 0;
}
.btn_sale_rider {
  position: relative;
  z-index: 1;
  background: #000;
  padding: 2% 24% 8%;
}
.btn_end_rider {
  position: relative;
  z-index: 1;
  background: #000;
  padding: 3% 24% 4%;
}

@keyframes move-background {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}