@charset "UTF-8";

/*
** Description: のぞみデンタルクリニック
** Table - CSS
** ================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

table thead {
  border-bottom: 3px solid var(--color_brownMain);
}

table tr td {
  padding: var(--size-ss);
}



/* Hours Table
------------------------------ */
.hours__table tbody tr {
  border-top: 1px solid var(--color_brownMain);
}
.is-closed {
  color: var(--color_red) !important;
}
.is-saturday {
  color: var(--color_blue);
}



/* cc-calendar
------------------------------ */
.cc-calendar-wrap {
  display: grid;
  gap: var(--size-ll);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-bottom: var(--size-m);
  padding-top: var(--size-s);
}

.cc-calendar {
  background-color: var(--color_white);
  padding: var(--size-m);
  border-radius: var(--size-s);
  box-shadow: 2px 2px 8px rgb(0 0 0 / 0.2);
}

.holiday-titles {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--size-ss);
}
.holiday-titles .holiday-title span {
  display: inline-block;
  padding: var(--size-ss) var(--size-s);
  background-color: var(--color_brownthin);
}

/* Caption */
.cc-calendar__title {
  text-align: left;
  font-weight: 700;
  font-size: var(--size-l);
  margin-bottom: var(--size-s);
}

/* 当日 */
.cc-calendar__day.is-today {
  color: var(--color_white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23f0aa00' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90% 90%;
}

/* 休診 */
.cc-calendar__day.is-closed {
  background-color: var(--color_brownthin);
}

/* 日曜 */
thead .is-sunday {
  color: var(--color_red);
}

/* 土曜 */
thead .is-saturday {
  color: var(--color_blue);
}