@charset "utf-8";
/* ============================================================
   営業時間表  [ckd_hours_table]
   ------------------------------------------------------------
   ★もとは画像でした。中身は設定の営業時間そのものなので、
     設定を変えれば、この表も変わります。
   ============================================================ */

.ckd-ht.ckd-ht {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.ckd-ht.is-full { max-width: none; }

.ckd-ht {
  --ht-ink:   #4A4A48;
  --ht-line:  #DCDCD8;
  --ht-on:    #6D7C62;   /* ● 営業 */
  --ht-off:   #B6B6B1;   /* − 休み */
  --ht-sat:   #8FBBE0;
  --ht-sun:   #EE9A5E;
  --ht-holi:  #DD5F52;
  --ht-frame: #6D7C62;
}

.ckd-ht-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--ht-ink);
  border: 1px solid var(--ht-frame);
  border-radius: 4px;
}

.ckd-ht-corner,
.ckd-ht-time {
  width: 30%;
  padding: .85em .6em;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .02em;
  white-space: nowrap;
}
.ckd-ht-corner { font-size: 1.05rem; }

.ckd-ht-head {
  padding: .85em .2em;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
}
.ckd-ht-head.is-sat  { color: var(--ht-sat); }
.ckd-ht-head.is-sun  { color: var(--ht-sun); }
.ckd-ht-head.is-holi { color: var(--ht-holi); }

/* 行の区切りだけ。縦の罫線は引きません（もとの画像と同じ作り） */
.ckd-ht-table tbody tr { border-top: 1px solid var(--ht-line); }

.ckd-ht-cell {
  padding: .7em .2em;
  text-align: center;
  vertical-align: middle;
}

/* ★印はCSSで描きます。大きさは rem（em だと文字の無い箱で0になります） */
.ckd-ht-mark {
  display: inline-block;
  vertical-align: middle;
}
.ckd-ht-cell.is-on .ckd-ht-mark {
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--ht-on);
}
.ckd-ht-cell.is-off .ckd-ht-mark {
  width: 1rem; height: .22rem;
  border-radius: 1px;
  background: var(--ht-off);
}

@media (max-width: 600px) {
  .ckd-ht-corner, .ckd-ht-time { width: 34%; font-size: .82rem; padding: .7em .3em; }
  .ckd-ht-head { font-size: .85rem; padding: .7em .1em; }
  .ckd-ht-cell { padding: .55em .1em; }
  .ckd-ht-cell.is-on .ckd-ht-mark  { width: .85rem; height: .85rem; }
  .ckd-ht-cell.is-off .ckd-ht-mark { width: .7rem; height: .2rem; }
}