/*------------------------
カウントダウンタイマー CSS（完全版）
------------------------*/

/* 1. 全体コンテナの固定設定 */
#page-top img {
  bottom: 249px;
}

.cdt_wrapper {
  background: #d45b41;
  font-weight: bold;
  text-align: center;
  line-height: 2;
  position: fixed;
  z-index: 9;
  bottom: 0;
  width: 100%;
  letter-spacing: 0;
  padding: 10px 0; /* PC・スマホ共通の余白 */
}

.cdt_wrapper small {
  padding: 0 .4em;
  color: #fff;
}

.cdt {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. テキスト・数字のデザイン */
.cdt_txt {
  display: inline-block;
  margin-right: 14px;
  line-height: 1.2;
}

.cdt_txt span {
  color: #fff;
}

.cdt_num {
  background-color: #fff;
  color: #000;
  line-height: 1;
  padding: .3em .15em;
  font-weight: bold;
}

.cdt_date {
  display: flex;
  align-items: baseline;
}

/* 3. 申し込みボタン（立体感とアニメーション） */
.cdt_app {
  display: block;
  background: #fff;
  color: #d45b41 !important;
  border-radius: 8px;
  text-decoration: none !important;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;

  /* 立体感の追加 */
  box-shadow: 0 4px 0 #b34a35; /* 下の影（厚み） */
  position: relative;
  top: 0;
  transition: all 0.2s; /* 動きを滑らかに */
  margin-left: 10px;
}

/* マウスを置いた時の動き（PCのみ） */
@media (hover: hover) {
  .cdt_app:hover {
    top: -2px; /* 少し浮き上がる */
    box-shadow: 0 6px 0 #b34a35; /* 影を深くする */
  }
}

/* クリックした瞬間 / タップした時の動き（共通） */
.cdt_app:active {
  top: 4px !important; /* 影の分だけ沈む */
  box-shadow: 0 0 0 #b34a35 !important; /* 影を消す */
}

/* 4. レスポンシブ：PCサイズ (768px以上) */
@media screen and (min-width: 768px) {
  footer {
    margin-bottom: 110px;
  }
  .cdt_wrapper {
    font-size: 1.8rem;
  }
  .cdt_txt span {
    font-size: 3rem;
  }
  .cdt_date {
    font-size: 2.8rem;
  }
  .cdt_date small {
    font-size: 2.2rem;
  }
  .cdt_app {
    width: 15%;
    font-size: 2.4rem;
    height: 80px;
    line-height: 80px;
  }
}

/* 5. レスポンシブ：中間サイズ (521px〜767px) */
@media screen and (max-width: 767px) and (min-width: 521px) {
  footer {
    margin-bottom: 12%;
  }
  .cdt_txt {
    font-size: 1.6rem;
  }
  .cdt_num {
    font-size: 2.2rem;
  }
  .cdt_app {
    width: 25%;
    font-size: 2rem;
    height: 70px;
    line-height: 70px;
  }
}

/* 6. レスポンシブ：スマホサイズ (520px以下) */
@media screen and (max-width: 520px) {
  footer {
    margin-bottom: 80px;
  }
  .cdt {
    flex-wrap: wrap;
    padding: 5px 2%;
  }
  .cdt_txt {
    width: auto;
    margin-right: 10px;
    font-size: 1.3rem;
  }
  .cdt_num {
    font-size: 2.8rem;
  }
  .cdt_app {
    width: 95%;
    margin: 10px auto 0;
    font-size: 1.8rem;
    height: 55px;
    line-height: 55px;
    flex-basis: 100%; /* ボタンを強制改行 */
  }
}

/* iPhone SEなどの極小画面 */
@media screen and (max-width: 375px) {
  .cdt_num {
    font-size: 2.4rem;
  }
}

/* 補助クラス */
.br520, .brnone {
  display: none;
}