@charset "utf-8";
/* セール残り時間バー（細長・赤系・ゴシック） */

.kc-cd{
  --red1:#d4141f; --red2:#a30d17; --cream:#fff6ea; --gold:#ffd54a; --mute:#ffd9d3;
  box-sizing:border-box; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap;
  max-width:1000px; margin:16px auto; padding:12px 28px 15px;
  border-radius:999px; color:var(--cream);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  line-height:1.2;
  background:linear-gradient(90deg,var(--red1),var(--red2));
  box-shadow:0 10px 24px -12px rgba(163,13,23,.75), inset 0 0 0 1px rgba(255,255,255,.22);
}
.kc-cd *{box-sizing:border-box}

.kc-cd__label{display:flex;align-items:baseline;white-space:nowrap}
.kc-cd__title{margin:0;font-weight:900;font-size:19px;letter-spacing:.06em;color:var(--cream)}

.kc-cd__time{display:flex;align-items:baseline;gap:4px;font-weight:900;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.kc-cd__num{font-size:30px;line-height:1;min-width:1.2em;text-align:right}
.kc-cd__num--ms{font-size:21px;min-width:1.2em;text-align:left;color:var(--mute)}
.kc-cd__unit{font-weight:700;font-size:12px;color:var(--gold);margin-right:6px}
.kc-cd__unit--s{margin-right:2px}

.kc-cd__note{margin:0;font-size:12px;color:var(--mute);white-space:nowrap}

.kc-cd__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.22)}
.kc-cd__fill{height:100%;width:100%;background:linear-gradient(90deg,var(--gold),#fff3b0)}

/* 状態ごとの表示切り替え */
.kc-cd[data-state="pending"] .kc-cd__bar,
.kc-cd[data-state="ended"] .kc-cd__time,
.kc-cd[data-state="ended"] .kc-cd__bar,
.kc-cd[data-state="ended"] .kc-cd__note{display:none}
.kc-cd[data-state="pending"]{padding-bottom:12px}
.kc-cd[data-state="ended"]{justify-content:center;text-align:center;padding-bottom:12px}

/* タブレット～スマホ */
@media screen and (max-width:979px){
  .kc-cd{width:calc(100% - 20px);margin:10px auto}
}
@media screen and (max-width:560px){
  .kc-cd{border-radius:22px;justify-content:center;gap:6px 14px;padding:12px 14px 15px}
  .kc-cd__title{font-size:15px}
  .kc-cd__num{font-size:22px}
  .kc-cd__num--ms{font-size:16px}
  .kc-cd__note{display:none}
}