@charset "UTF-8";
/* 外枠CSS */
#calendar-area {
    text-align: center;
    border: #CCC solid 1px;
    color: #666;
}

#calendar-area dt {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
    background: #666;
    color: #FFF;
}

#calendar-area .ht {
	width:182px;
	margin:0 auto;
	text-align:left;
}

#calendar-area .ht p {
	font-size:12px;
	line-height:1.4;
}

#calendar-area .ht .holiday_dest {
    padding: 0 10px 0 5px;
    border-left: solid 30px;
    border-left-color: #F8DCDC;
}

/* APIカレンダー用のCSS */
/* カレンダー表示Div */
#mini-cal {
    width: 220px;
    font-family: system-ui;
    margin: auto;
}

/* 月毎のカレンダーDiv */
.calendar {
    width: 210px;
    margin: 16px auto;
    /* border: 0.5px solid #ccc; */
    background-color: #fff;
}

/* カレンダーインデックス */
.calendar p {
    font-weight: bold;
    text-align: center;
    line-height: 1.75;
}

.cal_main {
    display: flex;
    flex-direction: column;
}
.weekdays,
.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.weekdays,
.days {
    border-bottom: 1px solid #ccc;
}
.day-header,
.day {
    border-right: 1px solid #ccc;
}
.day-header:first-child,
.day:first-child {
    border-left: 1px solid #ccc;
}
.day-header {
    border-top: 1px solid #ccc;
}

/* 通常土日 */
.weekend {
    background-color: #ddd;
}

/* 休業日 */
.holiday {
    background-color: #F8DCDC;
}

/* 当日 */
.today {
    color: #339900;
    font-weight: bold;
}