/* --------------------------------
   COUNTDOWN
-------------------------------- */

.countdown{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  margin:0 auto;
}

.countdown-item{
  width:180px;
  text-align:center;
}

.countdown-num{
  font-family:"Noto Sans JP", sans-serif;
  font-size:90px;
  font-weight:700;
  line-height:1;
  letter-spacing:-3px;
  color:#ffffff;

  text-shadow:
    0 0 5px #ffffff,
    0 0 12px #6aaaff,
    0 0 25px #306dff,
    0 0 45px rgba(48,109,255,0.7);

  transition:0.3s;
}

.countdown-label{
  margin-top:12px;
  font-size:15px;
  font-weight:500;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#9dbfff;
}

.countdown-separator{
  font-size:70px;
  line-height:0.95;
  font-weight:100;
  color:#6aaaff;
  opacity:0.6;
  padding:0 5px;

  text-shadow:
    0 0 10px #6aaaff,
    0 0 20px rgba(106,170,255,0.7);
}


/* 数字切り替え */

.countdown-num.count-change{
  animation:countFlash 0.45s ease;
}

@keyframes countFlash{

  0%{
    opacity:0.2;
    transform:translateY(-8px);
    filter:blur(4px);
  }

  50%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);

    text-shadow:
      0 0 10px #ffffff,
      0 0 25px #6aaaff,
      0 0 50px #306dff;
  }

  100%{
    opacity:1;
  }

}


/* --------------------------------
   配信ページボタン
-------------------------------- */

.stream-button-wrap{
  display:block;
  margin-top:40px;
  text-align:center;
}

.stream-button{
  position:relative;
  display:inline-block;
  min-width:380px;
  padding:22px 50px;

  color:#ffffff!important;
  font-size:22px;
  font-weight:700;
  letter-spacing:3px;

  border:1px solid #6aaaff;
  background:rgba(40,90,180,0.15);

  box-shadow:
    0 0 10px rgba(106,170,255,0.5),
    inset 0 0 20px rgba(106,170,255,0.1);

  overflow:hidden;
  transition:0.4s;
}

.stream-button:before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.5),
    transparent
  );

  transform:skewX(-25deg);
  transition:0.6s;
}

.stream-button:hover{
  color:#ffffff!important;
  text-decoration:none;
  background:#326fd0;

  box-shadow:
    0 0 10px #6aaaff,
    0 0 30px rgba(106,170,255,0.8),
    0 0 60px rgba(48,109,255,0.5);

  transform:translateY(-3px);
}

.stream-button:hover:before{
  left:160%;
}

.stream-button span{
  position:relative;
  z-index:2;
}


/* --------------------------------
   終了アニメーション
-------------------------------- */

.countdown.countdown-end{
  animation:countdownEnd 0.8s forwards;
}

@keyframes countdownEnd{

  0%{
    opacity:1;
    filter:blur(0);
  }

  100%{
    opacity:0;
    filter:blur(12px);
    transform:scale(1.08);
  }

}


/* --------------------------------
   SMARTPHONE
-------------------------------- */

@media screen and (max-width:798px){

  .countdown-item{
    width:22%;
  }

  .countdown-num{
    font-size:11vw;
    letter-spacing:-1px;
  }

  .countdown-label{
    margin-top:8px;
    font-size:2.5vw;
    letter-spacing:1px;
  }

  .countdown-separator{
    font-size:8vw;
    padding:0;
  }

  .stream-button{
    box-sizing:border-box;
    min-width:0;
    width:90%;
    padding:18px 10px;
    font-size:18px;
  }

}