/* style-40-calendar.css */



/*----------------------------------------------------------------------------------------------*/
/* 共通　CALENDAR */
/*----------------------------------------------------------------------------------------------*/

.main {

    .LastNext_Month {
        margin: 0 auto;
    }

    .Last_Month,
    .Next_Month {
        margin: var(--month-btn-margin);
        text-align: center;
        background: var(--new-color-blue-600);
        display: block;
        padding: var(--month-btn-padding);

        a {
            font-size: var(--font-size-lastnext-month);
            color: var(--color-calendar-a);
        }
    }

    .Last_Month {
        float: left;
    }

    .Next_Month {
        float: right;
    }

    .month {
        .A {
            background: var(--color-calendar-a);
            color: var(--new-color-gray-800);
        }

        .B {
            background: var(--color-calendar-b);
            color: var(--new-color-gray-800);
        }

        .C {
            background: var(--color-calendar-c);
            color: var(--new-color-gray-800);
        }

        .D {
            background: var(--color-calendar-d);
            color: var(--new-color-gray-800);
        }

        .E {
            background: var(--color-calendar-e);
            color: var(--new-color-gray-800);
        }

        .Z {
            background: var(--new-color-gray-800);
            color: var(--color-calendar-a);
        }

        .pMonth {
            color: var(--color-calendar-a);
        }

        .holiday {
            color: var(--color-calendar-e);
        }

        /*休日*/
        .weekday {
            color: var(--new-color-gray-400);
        }

        /*平日*/
        flex-wrap: wrap;
        margin: var(--space-100em) auto var(--space-200em);
        clear: both;
        display: flex;

        div {
            vertical-align: middle;
            font-size: var(--font-size-month-cell);
            width: var(--percent-1428);
            box-sizing: border-box;
            height: var(--height-month-cell);

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            line-height: 1.15;

            text-align: center;
            border-left: var(--border-left-month);
            border-bottom: var(--border-bottom-month);
        }

        .day {
            display: inline-flex;
            align-items: baseline;
            gap: 0.25em;
            line-height: 1.2;
            font-size: var(--font-size-month-day);
            font-weight: 700;
            white-space: nowrap;

            .national_holiday {
                color: black;
                font-size: 0.9em;
                font-weight: inherit;
                line-height: inherit;
                margin-left: 0.25em;
            }
        }

        .num {
            font-size: var(--font-size-month-num);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            display: block;
            text-align: center;
        }
    }

    .congestion_list {
        width: 100%;
        max-width: 100%;

        justify-content: center;
        align-items: center;
        margin: var(--space-100em) auto;
        text-align: center;
        clear: both;
        display: flex;

        padding: 0;
        list-style: none;

        @media screen and (min-width:1024px) {
            width: 100%;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        li {
            flex: 1 1 0;
            min-width: 0;
            display: block;
            text-align: center;
            padding: var(--space-010em) var(--space-050em);
            box-sizing: border-box;
        }

        .A,
        .B,
        .C,
        .D,
        .E,
        .Z {
            border-top: var(--border-1);
            border-bottom: var(--border-1);
            border-left: var(--border-1);
            text-align: center;
            font-size: var(--font-size-congestion-legend);
        }

        .A {
            background: var(--color-calendar-a);
            color: var(--new-color-gray-800);
        }

        .B {
            background: var(--color-calendar-b);
            color: var(--new-color-gray-800);
        }

        .C {
            background: var(--color-calendar-c);
            color: var(--new-color-gray-800);
        }

        .D {
            background: var(--color-calendar-d);
            color: var(--new-color-gray-800);
        }

        .E {
            background: var(--color-calendar-e);
            color: var(--new-color-gray-800);
            border-right: var(--border-1);
        }

        .Z {
            background: var(--new-color-gray-800);
            color: var(--color-calendar-a);
        }
    }
}