/*** Countdown Timer ***/
.countdown__wrapper {
  container-type: inline-size;
  inline-size: min(100%, 800px);
  margin-inline: auto;
  font-family:
    "Noto Sans JP", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic Medium", "游ゴシック Medium", "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
  font-size: 16px;
}
.countdown__wrapper a {
  text-decoration: none;
}
.countdown__wrapper .countdown-timer {
  background: linear-gradient(135deg, #ff9900 0%, #ff9900 100%);
  /* border-radius: var(--radius); */
  padding: 0;
  /* margin-block: 8px; */
  color: #000;
  font-weight: 700;
  --_negative-margin: calc(50% - 50cqi);
  margin-inline: var(--_negative-margin);
  padding-inline: calc(50dvi - 50%);
  padding-block: 0;
}

.countdown__wrapper .countdown-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 1.6rem;
  /* 1行固定＆横スクロール許可 */
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-inline: var(--_negative-margin);
  padding-block: 0;
  inline-size: 100cqi;
}

/* スクロールバーを非表示（必要なら削除） */
.countdown__wrapper .countdown-content::-webkit-scrollbar {
  display: none;
}
.countdown__wrapper .countdown-content {
  scrollbar-width: none;
}

/* 子要素を折り返さず縮まないよう固定 */
.countdown__wrapper .countdown-content > * {
  flex: 0 0 auto;
}

/* バッジは2行表示（◯◯セール / 終了まで） */
.countdown__wrapper .countdown-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  white-space: normal;
}
.countdown__wrapper .countdown-badge .badge-line-1,
.countdown__wrapper .countdown-badge .badge-line-2 {
  display: block;
}
.countdown__wrapper .countdown-badge {
  background: #fff100;
  color: #000;
  padding: 0.4rem 0.8rem;
  /* border-radius: 6px; */
  font-weight: 900;
  font-size: 1.3em;
  line-height: 1;
  inline-size: auto; /* 自動幅 */
  /* 常に全体の約20%をキープ */
  flex: 0 0 20%;
  max-inline-size: none;
  box-sizing: border-box;
  white-space: normal; /* バッジ内のみ改行を許可（2行表示） */
}

@media (max-width: 750px) {
  .countdown__wrapper .countdown-badge {
    /* 比率は要素に合わせる。フォント縮小は既存のメディアクエリで対処 */
    flex-basis: auto;
    font-size: 0.8em;
  }
}

/* 残りスペースはカウントダウン数値群が占有できるようにする */
.countdown__wrapper .countdown-display {
  flex: 1 1 auto;
  min-inline-size: 0;
}
@media (min-width: 751px) {
  .countdown__wrapper .countdown-display {
    flex: 0 0 auto;
  }
}

.countdown__wrapper .countdown-ato {
  color: #ffffff;
  font-weight: 700;
}

.countdown__wrapper .countdown-label {
  font-size: 1.1rem;
  margin: 0;
  line-height: 1.2;
}

.countdown__wrapper .countdown-subtitle {
  font-size: 1.4rem;
  margin: 0;
  line-height: 1.2;
}

.countdown__wrapper .countdown-display {
  display: flex;
  margin-block-start: 0;
  align-items: baseline; /* 下線を揃える */
  justify-content: space-evenly;
  /* 1行固定 */
  flex-wrap: nowrap;
  white-space: nowrap;
}
@media (min-width: 751px) {
  .countdown__wrapper .countdown-display {
    gap: 0.5rem;
  }
}
/* 子要素の折り返し・縮小を防止 */
.countdown__wrapper .countdown-display > * {
  flex: 0 0 auto;
}
.countdown__wrapper .countdown-ato {
  flex: 0 0 auto;
  font-size: 1.5em;
}
.countdown__wrapper .countdown-icon {
  flex: 0 0 auto;
}

.countdown__wrapper .countdown-ato,
.countdown__wrapper .countdown-display {
  padding-block: 10px;
}

.countdown__wrapper .countdown-icon img {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1;
  margin-inline-start: auto; /* 右端に寄せる */
  user-select: none;
  margin-inline: 0.4rem;
}

.countdown__wrapper .countdown-unit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
}

@media (min-width: 751px) {
  .countdown__wrapper .countdown-unit {
    display: flex;
    flex-direction: row; /* 数字の右に単位を表示 */
    gap: 1rem;
  }
}

@media (min-width: 751px) {
  .countdown__wrapper .countdown-unit {
    display: flex;
    gap: 1rem;
  }
}

.countdown__wrapper .countdown-number {
  font-size: 2.2em;
  line-height: 1;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  /* min-width: 2rem; */
  /* padding-inline: 0.4rem; */
  text-align: center;
  display: inline-block;
}

.countdown__wrapper .countdown-label-small {
  font-size: 1.4em;
  font-weight: 700;
  color: #ffffff;
}

.countdown__wrapper .countdown-unit:last-child .countdown-number {
  font-size: 1.8em;
  min-width: 30px;
}

.countdown__wrapper .countdown-unit:last-child .countdown-label-small {
  font-size: 1.2em;
}

/* -------------------------------------
   Responsive: Countdown compact under 750px
   ------------------------------------- */
@media (max-width: 750px) {
  /* タイマー全体の横内側余白最小化 */
  /* .lucky-bag2026__wrapper .countdown-timer {
    padding-inline: 8px;
  } */

  .countdown__wrapper .countdown-content {
    column-gap: 0.1rem;
  }

  /* ミリ秒はより詰める */
  .countdown__wrapper .countdown-unit:last-child {
    gap: 0.2rem;
  }

  /* バッジをコンパクトに（2行→横並び化済なのでサイズのみ縮小） */
  .countdown__wrapper .countdown-badge {
    padding: 0.6rem;
  }
  .countdown__wrapper .countdown-badge .badge-line-1 {
    font-size: 1.2em;
  }
  .countdown__wrapper .countdown-badge .badge-line-2 {
    font-size: 1.2em;
  }

  /* 「あと」テキストも縮小 */
  .countdown__wrapper .countdown-ato {
    padding-inline: 0.2rem;
    padding-block: 4px;
    font-size: 0.8em;
  }

  /* 数字・単位の縮小（ミリ秒はさらに小さめ） */
  .countdown__wrapper .countdown-unit .countdown-number {
    font-size: 1.4em;
  }
  .countdown__wrapper .countdown-unit .countdown-label-small {
    font-size: 1em;
  }
  .countdown__wrapper .countdown-unit:last-child .countdown-number {
    font-size: 1.2em;
  }
  .countdown__wrapper .countdown-unit:last-child .countdown-label-small {
    font-size: 0.8em;
  }

  /* 右端アイコンを小さく */
  .countdown__wrapper .countdown-icon img {
    inline-size: 24px;
    block-size: 24px;
    font-size: 12px;
  }
}