/**
 * イベントカレンダー用スタイル（共有）
 * メインサイト・おじゃれイベントカレンダーページで利用
 */

/* イベントカレンダー */
/* イベントラベルの色と枠線の色を設定 */
.eventAll{--eventLabelColor: #FFFFFF;--eventBoderColor: rgba(120,120,120,0.3);}
.event1  {--eventLabelColor: #FFEEEE;--eventBoderColor: rgba(213,68,68,0.3);--eventLabelActiveColor: #CD3535}
.event2  {--eventLabelColor: #FEF2E8;--eventBoderColor: rgba(230,154,48,0.3);--eventLabelActiveColor: #BF5900}
.event3  {--eventLabelColor: #FBF8D3;--eventBoderColor: rgba(213,187,37,0.3);--eventLabelActiveColor: #946D00}
.event4  {--eventLabelColor: #E6F5E0;--eventBoderColor: rgba(49,159,39,0.3);--eventLabelActiveColor: #498400}
.event5  {--eventLabelColor: #DBF6E1;--eventBoderColor: rgba(0,117,36,0.3);--eventLabelActiveColor: #008761}
.event6  {--eventLabelColor: #E6F9FA;--eventBoderColor: rgba(20,135,143,0.3);--eventLabelActiveColor: #007D9F}
.event7  {--eventLabelColor: #E5F3FF;--eventBoderColor: rgba(50,99,163,0.3);--eventLabelActiveColor: #0071DB}
.event8  {--eventLabelColor: #E3E3E3;--eventBoderColor: rgba(120,120,120,0.3);--eventLabelActiveColor: #555555}
.event9  {--eventLabelColor: #F0E4F5;--eventBoderColor: rgba(137,47,159,0.3);--eventLabelActiveColor: #955EAE}
.event10 {--eventLabelColor: #FFE9F2;--eventBoderColor: rgba(153,46,80,0.3);--eventLabelActiveColor: #BE4F7F}

/* ジャンルボタンの背景色を設定 */
.pageLinksBtnList a[class*="event"] {
    --pageLinkBtnsColor: var(--eventLabelColor);
    box-shadow: 0 2px 0 0 var(--eventBoderColor);
}
.pageLinksBtnList a[class*="event"]:hover {
    --pageLinkBtnsColor: var(--eventLabelActiveColor);
}

.calendarNoEvent {
    color: #D54444;
    font-size: 1rem;
    margin: 0.75rem 0 0.5rem;
}

.calendarHead {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    column-gap: 0.5rem;
}
.calendarHead .calendarCtrl.prev {
    justify-self: start;
}
.calendarHead .date {
    justify-self: center;
    text-align: center;
}
.calendarHead .calendarCtrl.next {
    justify-self: end;
}
.calendarHead .calendarCtrl {
    display: flex;
    align-items: center;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    gap: 0.25rem;
    line-height: 1;
}
.calendarHead .calendarCtrl .icon {
    --color3: var(--color-light-green);
    width: 1rem;
    margin-top: -0.125rem;
}
.calendarHead .date {
    font-weight: 600;
}
.calendarHead .date .year {
    font-size: 1.25rem;
}
.calendarHead .date .month {
    font-size: 1.875rem;
}
.calendarHead .date .month .num {
    font-size: 2.5rem;
}
.calendarWrap {
    overflow-x: visible;
    width: 100%;
}
.calenderTable {
    width: 100%;
    table-layout: fixed;
    border: 1px solid #999999;
    border-width: 0 1px 0 1px;
    --cols: 7;
    overflow: hidden;
}

.calenderTable thead,
.calenderTable tbody {
    border-bottom: 1px solid #999999;
}
.calenderTable tbody {
    height: 180px;
}
.calenderTable thead {
    border-top: 1px solid #999999;
}
.calenderTable thead th {
    font-weight: 500;
    font-size: 1.125rem;
    padding: 5px 0;
    vertical-align: middle;
    position: relative;
    height: 40px;
    line-height: 0;
}
.calenderTable thead th:not(:last-child):after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 10000px;
    width: 1px;
    background: #999999;
}
.calenderTable thead th.sun {
    background: #FFF3F3;
    color: #D54444;
}
.calenderTable thead th.sat {
    background: #EDF7FA;
    color: #3B6CB5;
}

.calenderTable tr.dayInfo {
    height: 40px;
}
.calenderTable tr.dayInfo td {
    padding: 5px 10px 0;
    color: #333;
}

.calenderTable tr.dayInfo td p {
    display: flex;
    gap: 0.25rem;
}
.calenderTable tr.dayInfo td .day {
    font-size: 1.625rem;
    font-weight: 600;
    width: 2rem;
}
.calenderTable tr.dayInfo td.sat {
    color: #3B6CB5
}
.calenderTable tr.dayInfo td.holi ,
.calenderTable tr.dayInfo td.sun {
    color: #D54444;
}
.calenderTable tr.dayInfo td.past {
    opacity: 0.5;
    flex: 1;
}
.calenderTable tr.dayInfo td .holiName {
    font-size: 1rem;
    align-self: center;
    font-weight: 600;
}

.calenderTable tr.eventInfo td {
    padding: 0 5px 5px;
    color: #333;
}
.calenderTable tr.eventInfo td .labelWrap {
    width: 100%;
    position: relative;
}
.calenderTable tr.eventInfo td .labelWrap .label {
    display: flex;
    background-color: var(--eventLabelColor);
    color: #000;
    font-weight: 500;
    padding: 0.625rem;
    border-radius: 5px;
    text-decoration-thickness: 1px;
}

.calenderTable tr.eventInfo td .labelWrap .label:hover {
    color: var(--eventLabelActiveColor);
}
.calenderTable tr.eventInfo td .labelWrap .label .genre {
    font-size: 0.875em;
    opacity: 0.9;
}

/* 週間カレンダー等の空セル用 */
.calenderTable tr.eventInfo td .no-event {
    margin: 0;
    color: #999;
    font-size: 0.9em;
}

@media screen and (max-width: 768px) {
    .calenderTable tbody {
        height: 130px;
    }
}