/* countdown.css */
@charset "utf-8";

#race_nav li a {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.now {
  pointer-events: none;
}

.countdown {
  font-weight: 900;
  color: #000;
  position: relative;
  margin-right: -10px;
}

.countdown .num {
  font-family: 'Oswald';
}

.made.is-end {color: #00000080;}

/***********************************************************************
「★PC版 CSS★」ブラウザの幅が751px以上ならここの記述が有効になる
**********************************************************************/

@media only all and (min-width: 751px) {

  #race_nav {
    width: 545px;
    height: 990px;
    position: absolute;
    z-index: 2;
    right: 0px;
    background: url(../images/pg1race_nav_bg.svg) no-repeat top right;
    background-size: contain;
  }
  
  #race_nav ul {display: flex; flex-direction: column; align-items: flex-end;  filter: drop-shadow( 0 3px 6px #00000029); }
  #race_nav li {height: 330px; width: 474px;}
  #race_nav li:nth-child(2) {width: 100%;}
  #race_nav li:nth-child(1) {background: url(../images/nav_all.png) no-repeat center right;}
  #race_nav li:nth-child(2) {background: url(../images/nav_lc.png) no-repeat center right;}
  #race_nav li:nth-child(3) {background: url(../images/nav_ll.png) no-repeat center right;}  

  #race_nav li:hover {
    opacity: 0.65;
    transition: all 0.3s;
  }

  #race_nav .countdown::before {
    content: '';
    background: url(../images/nav_g3_arrow.svg) no-repeat center;
    background-size: contain;
    display: inline-block;
    width: 22px;
    height: 55px;
    position: absolute;
    left: -45px;
    bottom: 23px;
  }

  #race_nav .countdown-pg1::before {
    content: '';
    background: url(../images/nav_pg1_arrow.svg) no-repeat center;
    background-size: contain;
  }

  .now .countdown { margin-left: 71px; }
  
  .countdown .made { font-size: 30px; }
  .made.is-open, .made.is-end { font-size: 70px; }
  
  .countdown .num { font-size: 85px; padding-left: 5px; }
  
  .countdown .niti { font-size: 36px; }
  
}


/***********************************************************************
「★SP版 CSS★」ブラウザの幅が750px以下ならここの記述が有効になる
**********************************************************************/
@media only all and (max-width: 750px) {
  
  #race_nav {
    width: 100%;
    height: 194px;
    position: absolute;
    z-index: 2;
    top: 0px;
    background: none;
  }
  
  #race_nav ul { display: flex; flex-direction: row; width: 100%; height: 100%; background: #000;}
  #race_nav li {height: 170px; width: 280px;}
  #race_nav li:nth-child(2) {height: 100%;}
  #race_nav li:nth-child(1) {background: url(../images/nav_all_sp.png) no-repeat center top;}
  #race_nav li:nth-child(2) {background: url(../images/nav_lc_sp.png) no-repeat center top;}
  #race_nav li:nth-child(3) {background: url(../images/nav_ll_sp.png) no-repeat center top; width: 190px;}

  .countdown::after {
    content: '';
    background: url(../images/nav_g3_arrow_sp.svg) no-repeat center;
    background-size: contain;
    display: inline-block;
    width: 36px;
    height: 18px;
    margin-left: 5px;
  }

  .now .countdown::after {
    background: none;
    width: 0;
    height: 0;
  }
  
  .now .countdown { margin-bottom: 22px; }

  .countdown .made { font-size: 24px; }
  .made.is-open, .made.is-end { font-size: 36px; }

  .countdown .num { font-size: 42px; padding-left: 5px; }

  .countdown .niti { font-size: 25px; }


}




/***********************************************************************
アニメーション指定
**********************************************************************/


/***********************************************************************
keyframe
**********************************************************************/