@charset "UTF-8";

/* =========================================================
   たすけ愛サークル｜活動予定表 Ver.1.1.5
   ========================================================= */


/* =========================================================
   サイドバー
   ========================================================= */

.tac-upcoming {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: inherit;
}


/* ---------------------------------------------------------
   今後の活動予定
   --------------------------------------------------------- */

.sidebar .tac-upcoming .tac-sidebar-heading,
.sidebar .tac-upcoming h3.tac-section-title,
.tac-upcoming .tac-sidebar-heading {

    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 0 12px !important;

    padding: 0 !important;

    background: none !important;

    border: none !important;

    border-radius: 0 !important;

    color: #F97CA1 !important;

    font-family: inherit !important;

    font-size: 16px !important;

    font-weight: 700 !important;

    font-style: normal !important;

    line-height: 1.5 !important;

    letter-spacing: 2px !important;

    text-align: left !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   下線
   --------------------------------------------------------- */

.sidebar .tac-upcoming .tac-sidebar-heading::after,
.sidebar .tac-upcoming h3.tac-section-title::after,
.tac-upcoming .tac-sidebar-heading::after {

    content: "" !important;

    display: block !important;

    width: 100% !important;

    height: 1px !important;

    margin: 8px 0 0 !important;

    padding: 0 !important;

    background:
        linear-gradient(
            to right,
            #40bfa0 0%,
            #fef785 82%,
            #f37b7b 100%
        ) !important;

    border: none !important;
}


/* =========================================================
   活動予定一覧
   ========================================================= */

.tac-upcoming-list {

    display: grid;

    gap: 10px;

    margin: 0;

    padding: 0;
}


.tac-upcoming-item {

    margin: 0;

    padding: 0;

    border: 1px solid #eeeeee;

    border-radius: 10px;

    background: #ffffff;

    overflow: hidden;

    box-shadow:
        0 1px 5px rgba(0,0,0,0.04);
}


.tac-upcoming-link {

    display: flex;

    width: 100%;

    box-sizing: border-box;

    gap: 10px;

    margin: 0;

    padding: 10px;

    color: inherit !important;

    text-decoration: none !important;
}


/* =========================================================
   日付
   ========================================================= */

.tac-date-badge {

    flex: 0 0 48px;

    width: 48px;

    min-width: 48px;

    height: 58px;

    box-sizing: border-box;

    margin: 0;

    border: 1px solid #f7cbd7;

    border-radius: 8px;

    background: #fff7f9;

    text-align: center;

    overflow: hidden;
}


.tac-date-badge span {

    display: block;

    margin: 0;

    padding: 2px 0;

    background: #F97CA1;

    color: #ffffff;

    font-size: 11px;

    font-weight: 500;

    line-height: 1.4;
}


.tac-date-badge strong {

    display: block;

    margin: 0;

    padding: 3px 0 0;

    color: #333333;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.4;
}


/* =========================================================
   活動内容
   ========================================================= */

.tac-upcoming-body {

    flex: 1;

    min-width: 0;
}


.tac-upcoming-body h4 {

    margin: 1px 0 4px !important;

    padding: 0 !important;

    color: #333333 !important;

    font-family: inherit !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    line-height: 1.45 !important;

    word-break: break-word;
}


.tac-meta,
.tac-location {

    margin: 2px 0 !important;

    padding: 0 !important;

    color: #777777 !important;

    font-size: 11px !important;

    line-height: 1.5 !important;
}


.tac-empty {

    margin: 0;

    padding: 12px;

    border-radius: 8px;

    background: #fafafa;

    color: #777777;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   カレンダー
   ========================================================= */

.tac-calendar-wrap {

    width: 100%;

    box-sizing: border-box;

    margin: 0;

    padding: 18px;

    border: 1px solid #ececec;

    border-radius: 14px;

    background: #ffffff;

    color: #333333;

    font-family: inherit;

    box-shadow:
        0 3px 12px rgba(0,0,0,0.04);
}


.tac-calendar-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 0 0 14px;
}


.tac-calendar-header h2 {

    margin: 0 !important;

    padding: 0 !important;

    font-size: 21px !important;

    font-weight: 700 !important;

    line-height: 1.5 !important;
}


.tac-nav {

    appearance: none;

    width: 36px;

    height: 36px;

    margin: 0;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #fff4f7;

    color: #e95f8b;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;
}


.tac-nav:hover {

    background: #F97CA1;

    color: #ffffff;
}


/* =========================================================
   カレンダー曜日
   ========================================================= */

.tac-calendar-grid {

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));
}


.tac-weekday {

    padding: 7px 2px;

    border-top: 1px solid #ececec;

    border-bottom: 1px solid #ececec;

    background: #fafafa;

    text-align: center;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.4;
}


.tac-weekday.sun {

    color: #d94b67;
}


.tac-weekday.sat {

    color: #4c79c6;
}


/* =========================================================
   カレンダー日付
   ========================================================= */

.tac-day {

    min-height: 110px;

    box-sizing: border-box;

    padding: 6px;

    border-right: 1px solid #ececec;

    border-bottom: 1px solid #ececec;

    background: #ffffff;

    overflow: hidden;
}


.tac-day:nth-child(7n+1) {

    border-left: 1px solid #ececec;
}


.tac-day.is-empty {

    background: #fbfbfb;
}


.tac-day-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 25px;

    height: 25px;

    margin-bottom: 4px;

    border-radius: 50%;

    font-size: 12px;

    font-weight: 700;
}


.tac-day.sun .tac-day-number {

    color: #d94b67;
}


.tac-day.sat .tac-day-number {

    color: #4c79c6;
}


.tac-day.is-today .tac-day-number {

    background: #F97CA1;

    color: #ffffff !important;
}


/* =========================================================
   カレンダーイベント
   ========================================================= */

.tac-events {

    display: grid;

    gap: 4px;
}


.tac-event {

    display: block;

    box-sizing: border-box;

    padding: 4px 5px;

    border-left: 3px solid #F97CA1;

    border-radius: 5px;

    background: #fff4f7;

    color: #555555 !important;

    font-size: 11px;

    line-height: 1.3;

    text-decoration: none !important;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.tac-event:hover {

    background: #ffe6ed;
}


.tac-event-time {

    margin-right: 3px;

    font-weight: 700;
}


/* =========================================================
   凡例
   ========================================================= */

.tac-calendar-legend {

    margin-top: 10px;

    color: #777777;

    font-size: 11px;

    line-height: 1.5;
}


.tac-dot {

    display: inline-block;

    width: 8px;

    height: 8px;

    margin-right: 4px;

    border-radius: 50%;

    background: #F97CA1;
}


/* =========================================================
   Loading
   ========================================================= */

.tac-calendar-wrap.is-loading {

    opacity: 0.55;

    pointer-events: none;
}


/* =========================================================
   スマートフォン
   ========================================================= */

@media screen and (max-width: 600px) {

    .sidebar .tac-upcoming .tac-sidebar-heading,
    .sidebar .tac-upcoming h3.tac-section-title,
    .tac-upcoming .tac-sidebar-heading {

        font-size: 16px !important;

        font-weight: 700 !important;

        letter-spacing: 2px !important;
    }


    .tac-upcoming-link {

        padding: 9px;

        gap: 9px;
    }


    .tac-date-badge {

        flex-basis: 46px;

        width: 46px;

        min-width: 46px;

        height: 56px;
    }


    .tac-date-badge strong {

        font-size: 19px;
    }


    .tac-upcoming-body h4 {

        font-size: 13px !important;
    }


    .tac-meta,
    .tac-location {

        font-size: 10px !important;
    }


    .tac-calendar-wrap {

        padding: 10px;

        border-radius: 12px;

        overflow-x: auto;
    }


    .tac-calendar-header {

        min-width: 680px;
    }


    .tac-weekdays,
    .tac-days {

        min-width: 680px;
    }


    .tac-day {

        min-height: 96px;

        padding: 5px;
    }


    .tac-event {

        font-size: 10px;
    }

}