/* ===== フリップクロック風カウントダウンタイマー ===== */
.countdown-timer {
  position: fixed;
  bottom: 10px;
  right: 2%;
  left: auto;
  transform: none;
  width: calc(100% - 40px);
  max-width: 640px;
  z-index: 9998;
  transition: none;
}
/* ==============================
   タイマー本体（★ここが最重要）
============================== */
.countdown-timer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 8px;
  padding: 16px 24px;
  /*box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);*/
  width: 100%;
  animation: slideUpRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUpRight {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==============================
   ボタン
============================== */
.countdown-timer__button {
  position: relative;
  background: #333;
  color: #fff;
  padding: 10px 28px;
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #E9FF58;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
}
.countdown-timer__button::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(45deg, #E9FF58, #FFE135);
  border-radius: 24px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.countdown-timer__button:hover {
  background: #fff;
  color: #333;
}
.countdown-timer__button:hover::after {
  opacity: 1;
}
/* ==============================
   ラベル＋時間（2段目ブロック）
============================== */
.countdown-timer__label {
  font-size: 16px;
  font-weight: 700;
  color: var(--yellow);
  text-align: center;
  margin-bottom: 4px; /* 時間との距離だけ詰める */
}
.countdown-timer__display {
  display: flex;
  justify-content: center;
  gap: 16px;
}
/* ==============================
   フリップカード
============================== */
.countdown-timer__flip-unit {
  display: flex;
  align-items: center;
  gap: 0px;
}
.countdown-timer__flip-card {
  width: 72px;
  height: 78px;
  background: linear-gradient(180deg, #2d2d2d 50%, #1a1a1a 50%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdown-timer__flip-number {
  font-size: 42px;
  font-weight: 800;
  color: #fff;
}
.countdown-timer__flip-label {
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
}
/* ==============================
   残り1時間以下の警告
============================== */
.countdown-timer--warning {
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
  }
  50% {
    box-shadow: 0 12px 56px rgba(220, 20, 60, .4);
  }
}
/* ==============================
   レスポンシブ
============================== */
@media (max-width: 768px) {
  .countdown-timer {
    max-width: 420px;
  }
  .countdown-timer__flip-card {
    width: 64px;
    height: 68px;
  }
  .countdown-timer__flip-number {
    font-size: 36px;
  }
}
@media (max-width: 425px) {
  .countdown-timer {
    max-width: 360px;
  }
}
@media (max-width: 375px) {
  .countdown-timer {
    max-width: 320px;
  }
}
/* ===== 下段を1ブロック化（決定版） ===== */
/* ラベル＋時間を横並びにする */
.countdown-timer__label {
  margin: 0;
  padding-right: 12px;
  white-space: nowrap;
}
/* ラベルと時間を同一行に */
.countdown-timer__label, .countdown-timer__display {
  display: inline-flex;
  align-items: center;
}
/* 下段全体を1行にまとめる */
.countdown-timer__inner {
  align-items: center;
}
.countdown-timer__display {
  gap: 16px;
}
/* ==============================
   レスポンシブ微調整（形はそのまま縮小）
============================== */
/* タブレット以下 */
@media (max-width: 768px) {
  .countdown-timer {
    bottom: 8px;
    right: 2%;
    max-width: 420px;
  }
  .countdown-timer__inner {
    padding: 14px 18px;
    gap: 8px;
  }
  .countdown-timer__button {
    font-size: 0.85rem;
    padding: 9px 24px;
  }
  .countdown-timer__label {
    font-size: 14px;
  }
  .countdown-timer__flip-card {
    width: 64px;
    height: 68px;
  }
  .countdown-timer__flip-number {
    font-size: 36px;
  }
  .countdown-timer__flip-label {
    font-size: 12px;
  }
}
/* スマートフォン */
@media (max-width: 425px) {
  .countdown-timer {
    bottom: 6px;
    right: 50%;
    transform: translateX(50%); /* SPは中央寄せのほうが安定 */
    max-width: 360px;
  }
  .countdown-timer__inner {
    padding: 12px 8px;
    gap: 6px;
  }
  .countdown-timer__button {
    font-size: 0.8rem;
    padding: 8px 20px;
  }
  .countdown-timer__label {
    font-size: 13px;
  }
  .countdown-timer__display {
    gap: 12px;
  }
  .countdown-timer__flip-card {
    width: 40px;
    height: 40px;
  }
  .countdown-timer__flip-number {
    font-size: 24px;
  }
  .countdown-timer__flip-label {
    font-size: 11px;
  }
}
/* 極小端末（iPhone mini / SE） */
@media (max-width: 375px) {
  .countdown-timer {
    max-width: 340px;
  }
  .countdown-timer__flip-card {
    width: 50px;
    height: 54px;
  }
  .countdown-timer__flip-number {
    font-size: 26px;
  }
  .countdown-timer__flip-label {
    font-size: 10px;
  }
}
/* ==============================
   スマホ：横幅をもっと使う（見た目はそのまま）
============================== */
/* タブレット以下 */
@media (max-width: 768px) {
  .countdown-timer {
    right: 50%;
    left: auto;
    width: 100vw; /* ★ 画面幅をしっかり使う */
    max-width: none; /* ★ PC制限を解除 */
    transform: translateX(50%) scale(0.9);
    transform-origin: bottom center;
  }
}
/* スマホ */
@media (max-width: 425px) {
  .countdown-timer {
    width: 100vw; /* ほぼフル幅 */
    transform: translateX(50%) scale(0.85);
  }
}