:root {
  --widthPC: 600px;
  --widthBtn: calc((750 / 3) * 2);
}

.lucky-bag2026__wrapper {
  margin: auto;
  inline-size: min(100%, var(--widthPC)) !important;
  padding-block-end: 50px;

  a {
    text-decoration: none;
  }
}

.lucky-bag2026__wrapper .btn_matsu,
.lucky-bag2026__wrapper .btn_take,
.lucky-bag2026__wrapper .btn_ume {
  position: absolute;
  inset-inline-start: 50%;
  translate: -50% 0;
  display: block;
  inline-size: 100%;
  inset-block-end: calc((10 / var(--widthBtn)) * 100%);
}

.lucky-bag2026__wrapper figure,
.lucky-bag2026__wrapper img {
  inline-size: min(100%, var(--widthPC)) !important;
  block-size: auto;
  margin-inline: auto !important;
  display: block;
}

.lucky-bag2026__wrapper .products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.lucky-bag2026__wrapper ul.products {
  padding: 0;
  margin: 0 0 50px;
}

.lucky-bag2026__wrapper .products li {
  list-style: none;
}

.lucky-bag2026__wrapper .relative {
  position: relative;
}

.lucky-bag2026__wrapper .sp-only {
  display: none;
}

.lucky-bag2026__wrapper .pc-only {
  display: block;
}

.lucky-bag2026__wrapper .-scale {
  animation: -scale 3.5s ease-in infinite alternate;
  transform-origin: center;
}

@media (any-hover: hover) {
  .lucky-bag2026__wrapper a:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}

@keyframes -scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .lucky-bag2026__wrapper .sp-only {
    display: block;
  }

  .lucky-bag2026__wrapper .pc-only {
    display: none;
  }
}

/* Overlay utility: place a badge (e.g., end.png) over an image */
.lucky-bag2026__wrapper .img-overlay__badge {
  position: absolute;
  inset: 0; /* cover entire base image */
  /* translate: 0 0; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /*センター寄せの修正*/
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  pointer-events: none; /* do not block clicks on the base image */
}

/*** 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, #fdbb33 0%, #fdbb33 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: wrap;
  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;
}

.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;
  gap: 0.5rem;
  margin-block-start: 0;
  align-items: baseline; /* 下線を揃える */
  justify-content: center;
  /* 1行固定 */
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* 子要素の折り返し・縮小を防止 */
.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,
.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: flex;
  flex-direction: row; /* 数字の右に単位を表示 */
  align-items: baseline;
  gap: 6px;
}

.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;
}

.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-unit {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
  }
  /* ミリ秒はより詰める */
  .countdown__wrapper .countdown-unit:last-child {
    gap: 0.2rem;
  }

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

  /* 数字・単位の縮小（ミリ秒はさらに小さめ） */
  .countdown__wrapper .countdown-unit .countdown-number {
    font-size: 1.8em;
  }
  .countdown__wrapper .countdown-unit .countdown-label-small {
    font-size: 1em;
  }
  .countdown__wrapper .countdown-unit:last-child .countdown-number {
    font-size: 1.4em;
  }
  .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;
  }
}