/**
 * カード抽選まとめ — フロント表示
 * SWELLのカラー変数（--color_main 等）があれば拾い、無ければ既定値を使う。
 */

/**
 * 配色はテーマの変数を拾い、無い部分は「地の色に依存しない半透明」で作る。
 * こうしておくとテーマが明るくても暗くても破綻しない。
 * OSのダークモードでは切り替えない（テーマが明るいままだと文字が読めなくなるため）。
 */
/* テーマ側の box-sizing に左右されないよう、この中は border-box に固定する。
   枠線ぶんで幅が溢れて隣の列に重なるのを防ぐため。 */
.cc-wrap, .cc-wrap *, .cc-wrap *::before, .cc-wrap *::after,
.cc-boxes, .cc-boxes *, .cc-boxes *::before, .cc-boxes *::after,
.cc-modal, .cc-modal *, .cc-modal *::before, .cc-modal *::after {
  box-sizing: border-box;
}

.cc-wrap {
  --cc-accent: var(--color_main, #0d9488);
  --cc-text: var(--color_text, #333);
  --cc-surface: var(--color_bg, #fff);
  --cc-soft: rgba(128, 138, 140, .10);
  --cc-line: var(--color_border, rgba(128, 138, 140, .32));
  --cc-muted: #7d8a8d;
  --cc-critical: #d9453f;
  --cc-critical-soft: rgba(217, 69, 63, .10);
  --cc-warning: #c07a00;
  --cc-warning-soft: rgba(192, 122, 0, .12);

  color: var(--cc-text);
  margin: 1.5em 0;
}

/* ---------- BOX選択 ---------- */
.cc-boxes {
  --cc-accent: var(--color_main, #0d9488);
  --cc-text: var(--color_text, #333);
  --cc-line: var(--color_border, rgba(128, 138, 140, .32));
  --cc-soft: rgba(128, 138, 140, .10);
  --cc-muted: #7d8a8d;
  margin: 1.5em 0 2em;
}
.cc-boxes__title {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  /* テーマが h2 に白文字を当てる場合があるので色は明示する（SWELL対策） */
  color: var(--cc-text) !important;
  font-size: 16px !important;
  font-weight: 700;
}
.cc-boxes__title::before,
.cc-boxes__title::after { display: none !important; content: none !important; }

.cc-boxes__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cc-boxes__item { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.cc-boxes__item::before { display: none !important; content: none !important; }

.cc-boxes__link {
  display: block;
  text-decoration: none !important;
  color: var(--cc-text) !important;
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  padding: 8px 8px 10px;
  background: var(--cc-surface);
  transition: border-color .18s, transform .15s, box-shadow .15s;
  height: 100%;
}
.cc-boxes__link:hover { border-color: var(--cc-accent); }
.cc-boxes__link.is-current { border-color: var(--cc-accent); background: var(--cc-soft); }

.cc-boxes__img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  background: var(--cc-soft);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 8px;
}
.cc-boxes__img img { width: 100%; height: 100%; object-fit: contain; }

/* 箱絵が無いときのカード裏面風の柄。色は商品名から決まる */
.cc-boxes__img--pattern {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .15) 0 5px, transparent 5px 11px),
    linear-gradient(160deg,
      hsl(var(--cc-box-h, 200) 62% 54%),
      hsl(var(--cc-box-h, 200) 66% 36%));
}
.cc-boxes__mark {
  font-size: 26px;
  font-weight: 800;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.cc-boxes__noimg { font-size: 24px; opacity: .45; }

/* 件数は画像の右上に重ねる */
.cc-boxes__count {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #2b3439;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  padding: 1px 7px;
  border-radius: 999px;
}

.cc-boxes__name {
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 34px;
}

/* ---------- BOX選択（ポップ） ---------- */
.cc-boxes--pop .cc-boxes__link {
  border: 2px solid #1d2226;
  border-radius: 14px;
  box-shadow: 3px 3px 0 rgba(29, 34, 38, .14);
}
.cc-boxes--pop .cc-boxes__link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(29, 34, 38, .2);
}
.cc-boxes--pop .cc-boxes__link.is-current {
  background: #fff8dd;
  border-color: #1d2226;
  box-shadow: 3px 3px 0 #1d2226;
}
.cc-boxes--pop .cc-boxes__img { border: 1.5px solid #1d2226; }
.cc-boxes--pop .cc-boxes__count { border: 1.5px solid #fff; background: #1d2226; }
.cc-boxes--pop .cc-boxes__link.is-current .cc-boxes__count {
  background: var(--cc-yellow, #ffc400);
  color: #1d2226;
  border-color: #1d2226;
}
.cc-boxes--pop .cc-boxes__title { font-weight: 800; }

/* ---------- BOXの見出し ---------- */
.cc-boxhead {
  display: flex;
  gap: 16px;
  background: var(--cc-soft);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}
.cc-boxhead__media {
  flex-shrink: 0;
  width: 96px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.cc-boxhead__media img {
  width: 100%;
  border-radius: 8px;
}
.cc-boxhead__noimg { font-size: 40px; opacity: .45; }
.cc-boxhead__body { flex: 1; min-width: 0; }
.cc-boxhead__title {
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  color: var(--cc-text) !important;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1.4;
}
.cc-boxhead__title::before,
.cc-boxhead__title::after { display: none !important; content: none !important; }
.cc-boxhead__desc {
  margin: 0 0 8px !important;
  font-size: 13px;
  color: var(--cc-muted);
}
.cc-boxhead__release {
  margin: 0 0 6px !important;
  font-size: 13px;
}
.cc-boxhead__label {
  display: inline-block;
  background: var(--cc-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
}
.cc-boxhead__count {
  margin: 0 0 6px !important;
  font-size: 13px;
}
.cc-boxhead__count strong { font-size: 17px; color: var(--cc-accent); }
.cc-boxhead__pr {
  margin: 0 !important;
  font-size: 11px;
  color: var(--cc-muted);
}

.cc-back {
  margin: 0 0 16px !important;
  font-size: 13px;
}
.cc-back a {
  color: var(--cc-muted, #7d8a8d) !important;
  text-decoration: none !important;
}
.cc-back a:hover { text-decoration: underline !important; }

@media (max-width: 600px) {
  .cc-boxes__list { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .cc-boxhead { flex-direction: column; gap: 12px; padding: 14px; }
  .cc-boxhead__media { width: 80px; }
  .cc-boxhead__title { font-size: 16px !important; }
}

/* ---------- PR枠 ---------- */
.cc-pr {
  position: relative;
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  background: var(--cc-soft);
}
.cc-pr__label {
  position: absolute;
  top: -9px;
  left: 12px;
  background: var(--cc-muted);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 999px;
}
.cc-pr__body img { max-width: 100%; height: auto; }

/* ---------- まもなく締切 ---------- */
.cc-urgent {
  border: 1px solid var(--cc-critical);
  border-radius: 14px;
  background: var(--cc-critical-soft);
  padding: 16px 18px;
  margin-bottom: 24px;
}
.cc-urgent__title {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-size: 15px !important;
  font-weight: 700;
  color: var(--cc-critical) !important;
  letter-spacing: .04em;
}
.cc-urgent__title::before,
.cc-urgent__title::after { display: none !important; content: none !important; }

.cc-urgent__list { display: grid; gap: 8px; }
.cc-urgent__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--cc-surface);
  border-radius: 10px;
  padding: 10px 14px;
}
.cc-urgent__name {
  margin: 0 !important;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}
.cc-urgent__shop {
  margin: 2px 0 0 !important;
  font-size: 12px;
  color: var(--cc-muted);
}
.cc-urgent__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cc-urgent__link {
  background: var(--cc-critical);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- ツールバー ---------- */
.cc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.cc-filters { display: flex; gap: 6px; }
.cc-filter {
  border: 1px solid var(--cc-line);
  background: var(--cc-surface);
  color: var(--cc-text);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.cc-filter:hover { border-color: var(--cc-accent); }
.cc-filter.is-active {
  background: var(--cc-accent);
  border-color: var(--cc-accent);
  color: #fff;
}
.cc-toggle-closed {
  border: none;
  background: none;
  color: var(--cc-muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.cc-toggle-closed[aria-pressed="true"] { color: var(--cc-accent); }

/* ---------- エリア絞り込み ---------- */
.cc-areas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -6px 0 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--cc-line);
}
.cc-areas__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cc-muted);
  margin-right: 2px;
}
.cc-area {
  border: 1px solid var(--cc-line);
  background: var(--cc-surface);
  color: var(--cc-text);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.cc-area:hover { border-color: var(--cc-accent); }
.cc-area.is-active {
  background: var(--cc-accent);
  border-color: var(--cc-accent);
  color: #fff;
}

/* ---------- 一覧 ---------- */
.cc-list { display: grid; gap: 12px; }

.cc-card {
  display: grid;
  grid-template-columns: 64px 1fr 138px;
  gap: 13px;
  align-items: start;
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  padding: 14px;
  transition: box-shadow .2s, border-color .2s;
}
@media (max-width: 520px) {
  .cc-card { grid-template-columns: 52px 1fr; gap: 11px; }
  .cc-card__side { grid-column: 1 / -1; }
  .cc-card__ava { font-size: 19px; }
}
.cc-card:hover {
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .25);
}
.cc-card[data-state="soon"] {
  border-color: var(--cc-critical);
  background: var(--cc-critical-soft);
}
.cc-card[data-state="today"] {
  border-color: var(--cc-warning);
}
.cc-card[data-state="closed"] { opacity: .5; }
.cc-card[hidden] { display: none; }

.cc-card__media {
  /* 幅はグリッドの列に合わせる。固定pxにすると狭い画面で本文へはみ出す */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cc-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cc-card__noimg { font-size: 26px; opacity: .5; }

/* 画像が無いときの頭文字アバター。色は店名から決まる */
.cc-card__ava {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg,
    hsl(var(--cc-ava-h, 200) 68% 60%),
    hsl(var(--cc-ava-h, 200) 72% 44%));
}

.cc-card__body { min-width: 0; }

/* 右カラム：残り時間 → 応募 → 抽選方法 */
.cc-card__side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* 残り時間（2段ブロック）。ラベルと数字を分けて、色は数字にだけ乗せる */
.cc-count {
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  background: var(--cc-surface);
}
.cc-count__label {
  display: block;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  background: #2b3439;
  color: #fff;
  padding: 3px 0;
}
.cc-count__value {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.12;
  padding: 5px 0 6px;
  letter-spacing: -.02em;
  color: #4b565c;
}
.cc-count__unit { font-style: normal; font-size: 13px; margin-left: 1px; }
.cc-count[data-urgency="hot"]  .cc-count__value { color: var(--cc-critical); }
.cc-count[data-urgency="warm"] .cc-count__value { color: var(--cc-warning); }
.cc-count[data-urgency="closed"] .cc-count__value { color: var(--cc-muted); font-size: 19px; padding: 9px 0 10px; }

/* 常時受付（PR枠）。締切の赤・橙・グレーの序列と混ざらないよう緑にする */
.cc-count--always { border-color: #0d8f80; }
.cc-count--always .cc-count__label { background: #0d8f80; }
.cc-count--always .cc-count__value { color: #0d8f80; font-size: 16px; padding: 8px 0 9px; line-height: 1.25; }

.cc-count--tbd .cc-count__label { background: var(--cc-muted); }
.cc-count--tbd .cc-count__value { color: var(--cc-muted); font-size: 16px; padding: 8px 0 9px; }

/* 残り時間バー */
.cc-card__bar {
  height: 4px;
  border-radius: 999px;
  background: var(--cc-soft);
  overflow: hidden;
  margin-top: 10px;
}
.cc-card__bar i { display: block; height: 100%; width: 0; background: var(--cc-muted); transition: width .4s, background .3s; }
.cc-card[data-urgency="hot"]  .cc-card__bar i { background: var(--cc-critical); }
.cc-card[data-urgency="warm"] .cc-card__bar i { background: var(--cc-warning); }

.cc-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 6px;
}
.cc-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cc-soft);
  color: var(--cc-muted);
  border: 1px solid var(--cc-line);
}
.cc-badge--store { color: var(--cc-warning); border-color: currentColor; }
.cc-badge--online { color: var(--cc-accent); border-color: currentColor; }
.cc-badge--pr {
  background: var(--cc-muted);
  color: #fff;
  border-color: var(--cc-muted);
  letter-spacing: .06em;
}
/* 自由入力の条件タグ（レシート／SNS応募／アプリ など） */
.cc-badge--tag {
  background: transparent;
  color: var(--cc-muted);
  border-style: dashed;
}
.cc-badge--wait {
  color: #2a6fb0;
  border-color: currentColor;
  background: rgba(42, 111, 176, .08);
}
.cc-badge[hidden] { display: none !important; }

/* ---------- 締切が未告知のもの ---------- */
.cc-remain--tbd {
  color: var(--cc-muted);
  font-weight: 600;
}
.cc-card--tbd { border-style: dashed; }
.cc-card__due--tbd .cc-card__due-value {
  color: var(--cc-muted);
  font-weight: 500;
}

/* ---------- 受付開始前 ---------- */
.cc-card__start {
  margin: 0 0 4px;
  font-size: 13px;
  color: #2a6fb0;
}
.cc-card__start[hidden] { display: none !important; }
.cc-card__start-label {
  font-size: 11px;
  font-weight: 700;
  margin-right: 6px;
  opacity: .8;
}
.cc-card__start-value { font-weight: 700; }

.cc-card__area {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--cc-soft);
  font-size: 11px;
  font-weight: 700;
  color: var(--cc-muted);
  vertical-align: middle;
}

/* ---------- 固定表示（PR枠） ---------- */
.cc-card--pr {
  border-color: var(--cc-accent);
  background: linear-gradient(180deg, rgba(128, 138, 140, .07) 0%, transparent 60%);
  order: -1;
}
.cc-card--pr .cc-card__title { color: var(--cc-text); }
.cc-remain--always {
  color: var(--cc-accent);
  font-weight: 700;
}

.cc-remain {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cc-muted);
}
.cc-remain[data-level="soon"] { color: var(--cc-critical); }
.cc-remain[data-level="today"] { color: var(--cc-warning); }
.cc-remain--lg { font-size: 15px; }

/* 見出しは店舗名。どこで応募できるかを最初に読ませる */
.cc-card__title {
  margin: 0 0 3px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  color: var(--cc-text) !important;
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.4;
}
.cc-card__title::before,
.cc-card__title::after { display: none !important; content: none !important; }

/* 商品名は補助情報として小さく */
.cc-card__product {
  margin: 0 0 8px !important;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cc-muted);
}

.cc-card__shop {
  margin: 0 0 8px !important;
  font-size: 13px;
  color: var(--cc-muted);
}

.cc-card__info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 8px;
  font-size: 12px;
}
.cc-card__info > div { display: flex; gap: 6px; }
.cc-card__info dt { color: var(--cc-muted); margin: 0; font-weight: 600; }
.cc-card__info dd { margin: 0; font-variant-numeric: tabular-nums; }

.cc-card__note {
  margin: 0 0 8px !important;
  font-size: 12px;
  color: var(--cc-muted);
}

.cc-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: opacity .18s, background .18s;
}
.cc-btn--primary {
  background: var(--cc-accent);
  color: #fff !important;
}
.cc-btn--primary:hover { opacity: .85; }
/* 受付開始前。押せなくはしない（告知ページは見たいため）が、応募ボタンとは区別する */
.cc-btn--primary.cc-btn--wait {
  background: transparent !important;
  border-color: var(--cc-line);
  color: var(--cc-muted) !important;
  cursor: default;
}
.cc-btn--primary.cc-btn--wait:hover { opacity: 1; border-color: var(--cc-muted); }
.cc-btn--ghost {
  background: transparent;
  border-color: var(--cc-line);
  color: var(--cc-text);
}
.cc-btn--ghost:hover { border-color: var(--cc-accent); color: var(--cc-accent); }

/* 右カラムのボタンは縦積みで全幅。応募と抽選方法で「押せる形」を揃える */
.cc-card__side .cc-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 11px 8px;
  border-radius: 10px;
  font-size: 13px;
}
.cc-btn--how {
  background: var(--cc-soft);
  border-color: var(--cc-line);
  color: var(--cc-text);
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cc-btn--how:hover { border-color: var(--cc-accent); }
/* ？アイコン。押すと説明が出ることを形で示す */
.cc-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #2b3439;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}
.cc-btn--copy {
  background: transparent;
  border: none;
  color: var(--cc-muted);
  font-size: 11.5px;
  padding: 4px 0 !important;
  text-decoration: underline;
  width: auto !important;
}
.cc-btn.is-copied {
  background: var(--cc-accent);
  border-color: var(--cc-accent);
  color: #fff;
}

.cc-empty,
.cc-none {
  text-align: center;
  color: var(--cc-muted);
  font-size: 14px;
  padding: 32px 0;
}

/* ---------- スマホ ---------- */
@media (max-width: 600px) {
  .cc-card { gap: 10px; padding: 12px; }
  .cc-card__title { font-size: 16px !important; }
  .cc-modal__panel { padding: 18px 18px 20px; max-height: 88vh; }
  .cc-modal__shop { font-size: 16px; }
  .cc-urgent__item { flex-direction: column; align-items: stretch; }
  .cc-urgent__right { justify-content: space-between; }
  .cc-card__actions .cc-btn { flex: 1; }
}


/* =========================================================
   締切バー（両スキン共通）
   ========================================================= */
.cc-card__due {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px !important;
  font-size: 13px;
}
.cc-card__due-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--cc-muted);
}
.cc-card__due-value { font-variant-numeric: tabular-nums; }


/* =========================================================
   ポップスキン
   明るいコーラル×イエロー。角丸を大きく、締切を赤帯で強調。
   ========================================================= */
.cc-wrap--pop,
.cc-boxes--pop {
  --cc-accent: #ff6b5b;
  --cc-accent-dark: #ef4a38;
  --cc-yellow: #ffc93c;
  --cc-line: rgba(255, 107, 91, .22);
  --cc-soft: rgba(255, 107, 91, .07);
  --cc-muted: #8b8189;
  --cc-critical: #e8453c;
  --cc-critical-soft: rgba(232, 69, 60, .09);
  --cc-warning: #f08c00;
  --cc-warning-soft: rgba(240, 140, 0, .10);
}

/* ---- BOX選択 ---- */
.cc-boxes--pop .cc-boxes__title,
.cc-wrap--pop .cc-urgent__title,
.cc-wrap--pop .cc-boxhead__title {
  letter-spacing: .02em;
}
.cc-boxes--pop .cc-boxes__title::before {
  content: "🎁";
  margin-right: 6px;
}

/* ---- カード ---- */
.cc-wrap--pop .cc-card {
  border: 2px solid #1d2226;
  border-radius: 16px;
  box-shadow: 4px 4px 0 rgba(29, 34, 38, .14);
  padding: 14px 15px;
}
.cc-wrap--pop .cc-card:hover { box-shadow: 5px 5px 0 rgba(29, 34, 38, .2); }
.cc-wrap--pop .cc-card[data-state="soon"] {
  background: #fff6f5;
  border-color: #1d2226;
  box-shadow: 4px 4px 0 rgba(232, 69, 63, .3);
}
.cc-wrap--pop .cc-card[data-state="today"] {
  border-color: #1d2226;
  box-shadow: 4px 4px 0 rgba(192, 122, 0, .28);
}
.cc-wrap--pop .cc-card--pr {
  background: #fffbf0;
  box-shadow: 4px 4px 0 rgba(240, 165, 0, .35);
}
.cc-wrap--pop .cc-card__media { border-radius: 12px; border: 2px solid #1d2226; }
.cc-wrap--pop .cc-card__ava { border-radius: 0; }
.cc-wrap--pop .cc-card__title { font-size: 17px !important; }

/* 締切は本文に戻す（残り時間が右カラムで主役になったため） */
.cc-wrap--pop .cc-card__due {
  display: block;
  background: none;
  color: #59646a;
  border-radius: 0;
  padding: 0;
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  margin: 0 !important;
}
.cc-wrap--pop .cc-card__due-label { color: var(--cc-muted); margin-right: 6px; }
.cc-wrap--pop .cc-card__due-value { font-weight: 700; color: var(--cc-text); }

/* 残り時間ブロック */
.cc-wrap--pop .cc-count { border: 2px solid #1d2226; border-radius: 11px; }
.cc-wrap--pop .cc-count__label { background: #1d2226; }
.cc-wrap--pop .cc-count__value { font-size: 30px; }
.cc-wrap--pop .cc-count--always { border-color: #0d8f80; }
.cc-wrap--pop .cc-count--tbd { border-color: var(--cc-muted); }

.cc-wrap--pop .cc-card__bar { height: 5px; border: 1.5px solid #1d2226; }

/* バッジ */
.cc-wrap--pop .cc-badge {
  border: 1.5px solid #1d2226;
  border-radius: 6px;
  padding: 2.5px 8px;
  font-size: 10px;
  font-weight: 800;
  background: #fff;
  color: #1d2226;
}
.cc-wrap--pop .cc-badge--pr { background: var(--cc-yellow); color: #4a3a00; }
.cc-wrap--pop .cc-badge--tag { border-style: dashed; }

/* 備考 */
.cc-wrap--pop .cc-card__note {
  background: var(--cc-soft);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
}

/* ボタン。応募＝黄色、抽選方法＝グレー。どちらも黒縁＋黒の下影で揃える */
.cc-wrap--pop .cc-btn {
  border: 2px solid #1d2226;
  border-radius: 10px;
  font-size: 13px;
}
.cc-wrap--pop .cc-card__side .cc-btn { padding: 11px 8px; }
.cc-wrap--pop .cc-btn--primary {
  background: var(--cc-yellow, #ffc400);
  color: #1d2226 !important;
  box-shadow: 0 3px 0 #1d2226;
  font-size: 14px;
}
.cc-wrap--pop .cc-btn--primary:hover {
  opacity: 1;
  transform: translateY(1px);
  box-shadow: 0 2px 0 #1d2226;
}
.cc-wrap--pop .cc-btn--how {
  background: #eef1f2;
  color: #1d2226;
  box-shadow: 0 3px 0 #1d2226;
}
.cc-wrap--pop .cc-btn--how:hover { transform: translateY(1px); box-shadow: 0 2px 0 #1d2226; }
.cc-wrap--pop .cc-btn--primary.cc-btn--wait {
  background: #eef1f2 !important;
  color: #8a949a !important;
  border-color: #c9d1d5;
  box-shadow: 0 3px 0 #c9d1d5;
}
.cc-wrap--pop .cc-btn--copy { border: none; box-shadow: none; }
.cc-wrap--pop .cc-q { background: #1d2226; }

/* まもなく締切 */
.cc-wrap--pop .cc-urgent { border: 2px solid #1d2226; border-radius: 18px; box-shadow: 4px 4px 0 rgba(232, 69, 63, .28); }
.cc-wrap--pop .cc-urgent__title::before { content: "⏰"; margin-right: 6px; }
.cc-wrap--pop .cc-urgent__item { border-radius: 12px; border: 1.5px solid #1d2226; }
.cc-wrap--pop .cc-urgent__link { font-weight: 800; border: 1.5px solid #1d2226; }

/* フィルタ */
.cc-wrap--pop .cc-filter { border: 2px solid #1d2226; padding: 8px 18px; }
.cc-wrap--pop .cc-filter.is-active { box-shadow: 0 3px 0 #1d2226; }
.cc-wrap--pop .cc-area { border: 2px solid #1d2226; padding: 6px 15px; }
.cc-wrap--pop .cc-area.is-active { box-shadow: 0 3px 0 #1d2226; }

/* 受付開始前 */
.cc-wrap--pop .cc-card__start {
  display: block;
  background: rgba(42, 111, 176, .10);
  border-radius: 9px;
  padding: 5px 12px;
  margin: 0 0 7px;
}

/* BOX見出し */
.cc-wrap--pop .cc-boxhead { border: 2px solid #1d2226; border-radius: 18px; box-shadow: 4px 4px 0 rgba(29, 34, 38, .12); background: #fff; }
.cc-wrap--pop .cc-boxhead__label { border-radius: 999px; }
.cc-wrap--pop .cc-boxhead__count strong { font-size: 20px; }

/* PRバナー枠 */
.cc-wrap--pop .cc-pr { border-radius: 16px; }


/* =========================================================
   応募条件まわり
   ========================================================= */

/* 条件バッジ */
.cc-badge--cond {
  background: transparent;
  color: var(--cc-muted);
  border-color: var(--cc-line);
}
.cc-badge--x {
  background: #000;
  border-color: #000;
  color: #fff;
}

/* 備考（応募条件）を枠付きで目立たせる */
.cc-card__note {
  background: var(--cc-soft);
  border-left: 3px solid var(--cc-line);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--cc-text);
}
.cc-card__note-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--cc-muted);
  letter-spacing: .06em;
  margin-bottom: 2px;
}

/* ---------- 抽選方法のポップアップ ---------- */
.cc-howto-src { display: none; }

html.cc-modal-open { overflow: hidden; }

.cc-modal {
  /* body直下へ移すので、色の変数はここでも定義し直す */
  --cc-accent: var(--color_main, #0d9488);
  --cc-text: var(--color_text, #333);
  --cc-surface: var(--color_bg, #fff);
  --cc-soft: rgba(128, 138, 140, .10);
  --cc-line: var(--color_border, rgba(128, 138, 140, .32));
  --cc-muted: #7d8a8d;
  --cc-warning: #c07a00;
  --cc-warning-soft: rgba(192, 122, 0, .12);

  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  font-family: inherit;
}
.cc-modal[hidden] { display: none; }

.cc-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 24, .55);
}

.cc-modal__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--cc-surface, #fff);
  color: var(--cc-text);
  border-radius: 16px;
  padding: 20px 22px 22px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .5);
}

.cc-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.cc-modal__title {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 700;
  color: var(--cc-accent) !important;
  letter-spacing: .02em;
}
.cc-modal__close {
  border: none;
  background: var(--cc-soft);
  color: var(--cc-muted);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.cc-modal__close:hover { color: var(--cc-text); }

.cc-modal__shop {
  margin: 0 0 2px !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cc-text) !important;
}
.cc-modal__product {
  margin: 0 0 14px !important;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cc-muted);
}
.cc-modal__product[hidden],
.cc-modal__shop[hidden] { display: none; }

.cc-modal__body {
  font-size: 13px;
  line-height: 1.85;
  color: var(--cc-text);
}
/* 抽選方式の見出し */
.cc-howto__method {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px !important;
}
.cc-howto__method-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--cc-text);
  line-height: 1.4;
}

/* 手順 */
.cc-howto__steps {
  list-style: none !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  background: var(--cc-soft);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  counter-reset: none;
}
.cc-howto__step {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
}
.cc-howto__step::before,
.cc-howto__step::marker { content: none !important; display: none !important; }
.cc-howto__num {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: var(--cc-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.cc-howto__text { flex: 1; min-width: 0; }

.cc-howto__caution {
  margin: 10px 0 0 !important;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--cc-muted);
}

.cc-howto__req {
  margin: 12px 0 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cc-howto__cta {
  margin: 16px 0 0 !important;
}
.cc-howto__cta .cc-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 18px;
  font-size: 14px;
}

.cc-howto__none {
  margin: 0;
  color: var(--cc-muted);
}
.cc-howto__note {
  margin: 12px 0 0 !important;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--cc-warning-soft);
  font-size: 12.5px;
  line-height: 1.7;
}
.cc-howto__note-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--cc-warning);
  margin-bottom: 2px;
}
.cc-howto__link {
  margin: 10px 0 0 !important;
  text-align: center;
}
.cc-howto__link a {
  display: block;
  padding: 11px 16px;
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.cc-howto__link a:hover { border-color: var(--cc-accent); }

/* ポップスキンでの見え方 */
.cc-wrap--pop .cc-card__note {
  border-left: none;
  border-radius: 10px;
}
.cc-wrap--pop .cc-modal__panel { border: 3px solid #1d2226; border-radius: 20px; }
.cc-wrap--pop .cc-modal__title { color: #1d2226 !important; }
.cc-wrap--pop .cc-howto__steps { border-radius: 14px; border: 2px solid #1d2226; }
.cc-wrap--pop .cc-howto__num { border: 1.5px solid #1d2226; }
.cc-wrap--pop .cc-howto__cta .cc-btn { border: 2px solid #1d2226; box-shadow: 0 3px 0 #1d2226; }
.cc-wrap--pop .cc-howto__link a { border: 2px solid #1d2226; border-radius: 12px; }
.cc-wrap--pop .cc-badge--cond { border-width: 1.5px; }

/* ============================================================
   BOX選択のタブ（ゲームごとの切り替え）
   ファイル末尾に置いて、前方の定義に確実に勝たせる
   ============================================================ */

.cc-boxes__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
}

.cc-boxes__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 15px;
  border: 1px solid var(--cc-line);
  border-radius: 999px;
  background: transparent;
  color: var(--cc-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: color .15s, background .15s, border-color .15s;
}
.cc-boxes__tab:hover { color: var(--cc-text); }
.cc-boxes__tab.is-current {
  background: var(--cc-accent);
  border-color: var(--cc-accent);
  color: #fff;
}

.cc-boxes__tabnum {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--cc-soft);
  font-size: 11px;
  font-weight: 800;
}
.cc-boxes__tab.is-current .cc-boxes__tabnum {
  background: rgba(255, 255, 255, .24);
  color: #fff;
}

/* 非表示のタイルはグリッドの桁を詰めないよう完全に消す */
.cc-boxes__item[hidden] { display: none !important; }

/* ポップスキン */
.cc-boxes--pop .cc-boxes__tab {
  border: 2px solid #1d2226;
  background: #fff;
  color: #1d2226;
  box-shadow: 0 2px 0 #1d2226;
}
.cc-boxes--pop .cc-boxes__tab:hover { transform: translateY(1px); box-shadow: 0 1px 0 #1d2226; }
.cc-boxes--pop .cc-boxes__tab.is-current {
  background: #ffc400;
  border-color: #1d2226;
  color: #1d2226;
}
.cc-boxes--pop .cc-boxes__tabnum {
  background: #1d2226;
  color: #fff;
}
.cc-boxes--pop .cc-boxes__tab.is-current .cc-boxes__tabnum {
  background: #1d2226;
  color: #fff;
}

@media (max-width: 600px) {
  .cc-boxes__tab { padding: 7px 12px; font-size: 12.5px; }
}

/* ============================================================
   一押しバナー [chusen_hero] と PR単独枠 [chusen_pr]
   ============================================================ */

.cc-hero {
  position: relative;
  margin: 0 0 20px;
  padding: 10px;
  border: 1px solid var(--cc-line, rgba(128, 138, 140, .32));
  border-radius: 12px;
  background: #fff;
}
.cc-hero__body { line-height: 0; }
.cc-hero__body img,
.cc-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
}
.cc-hero__body a { display: block; }

.cc-hero__label {
  position: absolute;
  top: -9px;
  left: 12px;
  z-index: 2;
  padding: 2px 9px;
  border-radius: 999px;
  background: #7d8a8d;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.6;
}

/* ポップスキン */
.cc-hero--pop {
  padding: 8px;
  border: 2px solid #1d2226;
  border-radius: 16px;
  box-shadow: 4px 4px 0 rgba(29, 34, 38, .16);
}
.cc-hero--pop .cc-hero__body img { border-radius: 10px; }
.cc-hero--pop .cc-hero__label {
  border: 2px solid #1d2226;
  background: #ffc400;
  color: #1d2226;
  top: -11px;
}


@media (max-width: 600px) {
  .cc-hero { padding: 8px; margin-bottom: 16px; }
  .cc-hero--pop { padding: 6px; box-shadow: 3px 3px 0 rgba(29, 34, 38, .16); }
}

/* ============================================================
   PR枠 [chusen_pr] ─ 横長バナー型
   一覧のカードと同じ形にすると「もう1件の抽選」に見えるため、
   締切バーや店舗アバターは出さず、文言とボタンだけにしている。
   ============================================================ */

.cc-prbox { margin: 0 0 20px; }

.cc-prbox__heading {
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  color: var(--cc-text, #333) !important;
  font-size: 15px !important;
  font-weight: 700;
}
.cc-prbox__heading::before,
.cc-prbox__heading::after { display: none !important; content: none !important; }

.cc-prbox__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid var(--cc-line, rgba(128, 138, 140, .32));
  border-radius: 12px;
  background: #fffdf4;
}
.cc-prbox__item:last-child { margin-bottom: 0; }

.cc-prbox__label {
  position: absolute;
  top: -9px;
  left: 14px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #7d8a8d;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.6;
}

/*
 * ロゴ画像。ブランドロゴは横長なことが多いので、正方形に押し込めず
 * 高さだけ揃えて幅は成り行きにする。正方形の商品画像でも破綻しない。
 */
.cc-prbox__logo {
  margin: 0 0 9px !important;
  padding: 0 !important;
  line-height: 0;
}
.cc-prbox__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 46px;
}

.cc-prbox__text { flex: 1 1 auto; min-width: 0; }

.cc-prbox__lead {
  margin: 0 0 3px !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--cc-text, #333);
}

.cc-prbox__desc {
  margin: 0 !important;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--cc-text, #333);
}

.cc-prbox__tags { margin: 7px 0 0 !important; display: flex; flex-wrap: wrap; gap: 5px; }
.cc-prbox__tag {
  padding: 2px 8px;
  border: 1px dashed var(--cc-line, rgba(128, 138, 140, .5));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cc-muted, #7d8a8d);
}

.cc-prbox__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--cc-accent, #0d9488);
  color: #fff !important;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none !important;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.cc-prbox__cta:hover { filter: brightness(1.06); }
.cc-prbox__arrow { font-size: 14px; }

/* ---- ポップスキン ---- */
.cc-prbox--pop .cc-prbox__item {
  border: 2px solid #1d2226;
  border-radius: 16px;
  background: #fff6d6;
  box-shadow: 4px 4px 0 rgba(29, 34, 38, .16);
}
.cc-prbox--pop .cc-prbox__label {
  top: -11px;
  border: 2px solid #1d2226;
  background: #fff;
  color: #1d2226;
}
.cc-prbox--pop .cc-prbox__lead { color: #6b6250; font-size: 12.5px; }
.cc-prbox--pop .cc-prbox__desc { color: #1d2226; font-size: 15.5px; font-weight: 800; }
.cc-prbox--pop .cc-prbox__tag { border: 1.5px solid #1d2226; color: #1d2226; background: #fff; }
.cc-prbox--pop .cc-prbox__cta {
  border: 2px solid #1d2226;
  background: #ffc400;
  color: #1d2226 !important;
  box-shadow: 3px 3px 0 #1d2226;
}
.cc-prbox--pop .cc-prbox__cta:hover {
  filter: none;
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 #1d2226;
}

@media (max-width: 600px) {
  .cc-prbox__item {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 14px;
  }
  .cc-prbox__logo img { max-width: 170px; max-height: 38px; }
  .cc-prbox__text { flex: 1 1 100%; width: 100%; }
  .cc-prbox__desc { font-size: 14px; }
  .cc-prbox--pop .cc-prbox__desc { font-size: 14.5px; }
  .cc-prbox__cta {
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
  }
}


/* ---- 抽選／予約の件数（BOXチップの画像の下） ----
   旧デザインの .cc-boxes__count は画像に重ねる黒バッジなので、
   名前を分けて指定が混ざらないようにする。 */
.cc-boxes__stats{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:2px 6px;margin-top:5px;line-height:1.25;
}
.cc-boxes__stat{
  display:inline-flex;align-items:baseline;gap:3px;
  font-size:10px;font-weight:700;color:#6b767c;white-space:nowrap;
  padding:1px 7px;border-radius:999px;background:#eef1f3;
}
.cc-boxes__stat b{font-size:13px;font-weight:900;color:#04384c;}
.cc-boxes__stat--yoyaku{background:#f6efe4;color:#8a6b33;}
.cc-boxes__stat--yoyaku b{color:#AC854A;}

/* 選択中のチップは背景が濃くなるので、そこだけ白抜きにする */
.cc-boxes__link.is-current .cc-boxes__stat{background:rgba(255,255,255,.9);}

/* ---- 予約セクション ---- */
.cc-yoyaku{margin-top:32px;padding-top:24px;border-top:3px dashed #d8dee1;}
.cc-yoyaku__title{
  font-size:20px;font-weight:900;color:#04384c;margin:0 0 4px;
}
.cc-yoyaku__lead{font-size:13px;color:#6b767c;margin:0 0 14px;}