@charset "UTF-8";


/******** calendar ********/
.calendar{
  width:100%;
  border:1px solid var(--gray);
  border-right:none;
  border-bottom:none;
}
.calendar > * {
  display:flex;
  justify-content:center;
  align-items:center;
}
.calendar > * > * {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:calc(100% / 7);
  border-right:1px solid var(--gray);
  border-bottom:1px solid var(--gray);
  position:relative;
}
.calendar .week {
  color:var(--white);
  background-color:var(--black);
}
.calendar .week span {
  padding:.3em 0;
}
.calendar .days {
  flex-wrap:wrap;
}
.calendar .days a {
  height:125px;
  padding:10px 0 0 0;
  line-height:1.6;
}
.calendar .days h3 {
  display:inline-flex;
  justify-content:center;
  width:20px;
  letter-spacing:-.03rem;
  position:absolute;
  top:5px;
  left:5px;
  z-index:2;
  white-space:nowrap;
}
.calendar .days p {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  overflow:scroll;
}
.calendar .days p i {
  width:100%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.calendar .days p small {
  margin:0 1px;
  font-size:90%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.calendar [data-state="today"] {
  color:var(--orange);
  background-color:var(--base);
}
.calendar [data-state="om"]{
  color:var(--gray);
  background-color:var(--lightgray);
  pointer-events : none;
}
.calendar [data-state="closed"] {}

.member_calendar .days a {
  padding:5px 0 0 0;
}
.member_calendar .days img {
  width:22px;
  aspect-ratio:1;
  margin:auto auto 6px;
}
.member_calendar .days small {
  font-size:85%;
}

.transfer_calendar .days a {
  line-height:1.5;
}
.transfer_calendar .days p small {
  font-size:85%;
}

.entire_calendar .days ul {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  width:52px;
}
.entire_calendar .days li {
  width:20px;
  aspect-ratio:1;
  margin:3px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.entire_calendar li.transfer {
  background-image:url(/images/icon/transfer-blk.svg)
}
.entire_calendar li.activity {
  background-image:url(/images/icon/activity-blk.svg)
}
.entire_calendar li.meal {
  background-image:url(/images/icon/meal-blk.svg)
}
.entire_calendar li.medicine {
  background-image:url(/images/icon/medicine-blk.svg)
}
.entire_calendar li.empty {
  opacity:.25;
}
.entire_calendar [data-state="today"] li.transfer {
  background-image:url(/images/icon/transfer-org.svg)
}
.entire_calendar [data-state="today"] li.activity {
  background-image:url(/images/icon/activity-org.svg)
}
.entire_calendar [data-state="today"] li.meal {
  background-image:url(/images/icon/meal-org.svg)
}
.entire_calendar [data-state="today"] li.medicine {
  background-image:url(/images/icon/medicine-org.svg)
}
.entire_calendar [data-state="om"] li {
  opacity:.25;
}
.entire_calendar [data-state="om"] li.transfer {
  background-image:url(/images/icon/transfer-blk.svg)
}
.entire_calendar [data-state="om"] li.activity {
  background-image:url(/images/icon/activity-blk.svg)
}
.entire_calendar [data-state="om"] li.meal {
  background-image:url(/images/icon/meal-blk.svg)
}
.entire_calendar [data-state="om"] li.medicine {
  background-image:url(/images/icon/medicine-blk.svg)
}

.members_calendar ul {
  width:80%;
  min-width:60px;
}
.members_calendar .switch {
  width:100%;
  aspect-ratio:initial;
  margin:3px auto;
  font-size:85%;
}
.members_calendar .switch input[type="radio"] + span {
  height:32px;
}

.entry_holiday .days a {
  padding:0;
}
.entry_holiday label {
  width:100%;
  height:100%;
}
.entry_holiday [data-state="om"] label {
  opacity:.25;
}
.entry_holiday input[type="checkbox"] + span {
  width:100%;
  height:100%;
  margin:0;
  padding:0 0 0 1em;
  border:none;
  background-color:initial;
}
.entry_holiday input[type="checkbox"]:checked + span {
  border:none;
  color:var(--blue);
  background-color:initial;
}
.entry_holiday input[type="checkbox"] + span:before {
  left:2em;
}
.entry_holiday input[type="checkbox"]:checked + span:before {
  background-color:var(--blue);
}