@charset "UTF-8";

/* calendar.css ※【営業日のご案内】用スタイルシート */

.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.box-item {
  position: relative;
  box-sizing: border-box;
  margin: 5px;
  padding: 10px;
  border: 1px solid #ccc;
}

.month {
  margin: 0;
  padding: .5rem;
  text-align: center;
  color: #fff;
  border-radius: 5px 5px 0 0;
  background: #668ad8;
}

.calendar {
  display: flex;
  width: 280px;
  height: 230px;
  margin: 0;
  padding: 10px;
  border-radius: 0 0 5px 5px;
  background-color: #f5f5f5;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
}

.calendar::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 10px;
  content: '';
  pointer-events: none;
  border-radius: 5px;
  box-shadow: 2px 2px 4px #808080;
}

.calendar > div {
  line-height: 2rem;
  box-sizing: border-box;
  height: 2rem;
  text-align: center;
  flex-basis: 40px;
}

/* 曜日 */

.weekday {
  color: #808080;
}

/* 日曜日 */

.sun {
  color: #fa514b;
}

/* 土曜日 */

.sat {
  color: #668ad8;
}

/* 日 ※.today以前は過去の日としてグレーアウト */

.day {
  color: #666;
  background-color: #b3b3b3;
  box-shadow: 0 0 0 1px #ccc;
}

/* 本日 */

.today {
  background-color: #cfc;
}

/* .today以降は背景を白にする */

.today ~ .day,
.box-item:not(:first-child) .day {
  background-color: #fff;
}

/* 祝日 */

.public-holiday {
  color: #fa514b;
}

/* 休業日（過去） */

.holiday {
  background: linear-gradient(-45deg, #b3b3b3, #b3b3b3 48.5%, #fa514b 48.5%, #fa514b 51.5%, #b3b3b3 51.5%, #b3b3b3);
}

/* 休業日（本日） */

.holiday.today {
  background: linear-gradient(-45deg, #cfc, #cfc 48.5%, #fa514b 48.5%, #fa514b 51.5%, #cfc 51.5%, #cfc);
}

/* 休業日（.today以降） */

.today ~ .holiday,
.box-item:not(:first-child) .holiday {
  background: linear-gradient(-45deg, #fff, #fff 48.5%, #fa514b 48.5%, #fa514b 51.5%, #fff 51.5%, #fff);
}

/* 未確定（1月に[読込停止]の予定があるとき） */

.undecided::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 10px;
  content: '';
  pointer-events: none;
  border-radius: 5px;
  background-color: rgba(179, 179, 179, 0.7);
}

.undecided::after {
  position: absolute;
  top: 45%;
  right: 0;
  left: 0;
  margin: 0 100px;
  content: '未確定';
  letter-spacing: .5em;
  pointer-events: none;
  color: #666;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 2px 2px 4px #808080;
}

/* js遅延読込 */

.loading::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 10px;
  content: '';
  border-radius: 5px;
  background-color: rgba(179, 179, 179, 0.4);
}

.loading::after {
  font-size: 3px;
  position: absolute;
  top: 45%;
  right: 0;
  left: 0;
  width: 10em;
  height: 10em;
  margin: auto;
  content: 'Loading...';
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(102, 138, 216, 0.4);
  border-right: 1.1em solid rgba(102, 138, 216, 0.4);
  border-bottom: 1.1em solid rgba(102, 138, 216, 0.4);
  border-left: 1.1em solid #668ad8;
  border-radius: 50%;
}

@-webkit-keyframes load8 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading .day {
  background-color: #fff;
}