:root {
    --leading-trim: calc((1em - 1lh) / 2);
    --main-color: #D24F35;
}

.p-home .p-home--tlink {

    &:has(.c-busyCalendar__wrapper) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "a b cal";
        gap: 4em 2rem;

        :is(a) {
            width: revert;
        }

        @media screen and (max-width: 1023px) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas: "a b"
                                "cal .";
    
            .c-busyCalendar__wrapper {
                grid-area: cal;
                grid-column: 1 / -1;
            }
        }
    }


}

.c-busyCalendar__wrapper {
    --lv-1-color: #f9f6f4;
    --lv-2-color: #efd969;
    --lv-3-color: #eba920;
    --lv-4-color: #d24f35;
    
    * {
        --root-px  : 10;
        --font-size: 16;
        --rem: calc( (var(--font-size) / var(--root-px)) * 1rem );

        font-size: var(--rem);
        font-family: "Alata", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    }
}

.ec-toolbar {
    margin-bottom: .5rem;
}

/* 見出し */
.c-busyCalendar-heading {
    --font-size: 24;
    max-inline-size: fit-content;
    margin-inline: auto;
    font-weight: bold;
    line-height: calc(50 / 34);
    margin-block: var(--leading-trim) calc( var(--leading-trim) + .25lh );
}

/* カレンダー部 */
.c-busyCalendar {

    * {
        --font-size: 14;
    }

    .ec-button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        /* padding: 0; */
        appearance: none;
        font-size: 16px;
        color: var(--main-color);

        width: 2em;
        aspect-ratio: 1;
        contain: strict;
        display: grid block;
        place-content: center center;
        border-radius: 50%;
        transition: .3s background ease, .3s color ease;

        &:focus-visible {
            background: var(--main-color);
            color: #fff;
        }

        @media(any-hover: hover) {
            &:hover {
                background: var(--main-color);
                color: #fff;
            }
        }

        &:is([disabled]) {
            visibility: hidden;
        }

        /* &:where(.c-busyCalendar__wrapper:has(.ec-disabled) *):has(.ec-prev)  {
            visibility: hidden;
            pointer-events: none;
        } */

        .ec-icon {
            /* width: revert; */
            aspect-ratio: 1;
            display: block;
            border-top: 2px solid var(--main-color);
            border-left: 2px solid var(--main-color);
            position: relative;
            transform: translateY(-50%);
            width: .5em;

            &:where(.ec-button:hover *) {
                border-top: 2px solid #fff;
                border-left: 2px solid #fff;
            }

            &.ec-prev {
                transform: rotate(-45deg);
                left: .1em;
            }

            &.ec-next {
                transform: rotate(135deg);
                right: .1em;
            }

            &::after {
                display: none;
            }
        }
    }

    .ec-title {
        --font-size: 20;
        font-weight: normal;
        margin-block: var(--leading-trim);
    }


    .ec-day-grid .ec-day-head {
        padding: 0 !important;

        time {
            line-height: 1 !important;
            text-align: center;
            margin-inline: auto;
            max-inline-size: fit-content;
        }
    }
    

    .ec-event {
        box-shadow: revert !important;
        margin: 0 !important;
        height: 0;
    }

    .ec-events {
        margin: 0 !important;
        height: 0;
        display: none;
    }

    .ec-header {
        border-top: 1px solid #fff;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
    }

    .ec-header .ec-day {
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;

        &:is(.ec-sun) span {
            color: #D24F35;
        }

        &:is(.ec-sat) span {
            color: #828282;
        }

        :is(span) {
            --font-size: 10;
        }
    }

    .ec-body {
        overflow-y: hidden;
    }


    .ec-body .ec-day {
        background: #fff;
        display: grid;
        place-content: center center;
        min-height: 1lh;

        &.ec-other-month {
            background: transparent;
        }

        .ec-event-body:has(.ec-event-title:empty) {
            display: none;
        }

        &.ec-disabled {
            background: transparent;

            &::after {
                display: none;
            }
        }

        &:is(.ec-other-month) {
            color: #fff;
        }
        &:not(:is(.ec-other-month)) {
            &:has(.busy-lv-1) {
                background: var(--lv-1-color);
            }
            &:has(.busy-lv-2) {
                background: var(--lv-2-color);
            }
            &:has(.busy-lv-3) {
                background: var(--lv-3-color);
            }
            &:has(.busy-lv-4) {
                background: var(--lv-4-color);
                color: #fff;
            }

        }
    }
}

/* 凡例 */
.c-busyCalendar-hanrei__list {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0 0;
    padding: 0;
    column-gap: .32em;
    @media screen and (max-width: 1023px) {
        justify-content: flex-start;

    }
}

.c-busyCalendar-hanrei__label {

    --font-size: 10;

    display: grid;
    grid-template-columns: 16px auto;
    align-items: baseline;
    column-gap: .32em;
    &::before {
        content: '';
        aspect-ratio: 4 / 3;
        background: var(--lv-0-color);
        border: 1px solid #d6d1cd;
        display: block;
    }

    &.--lv1 {
        &::before {
            background: var(--lv-1-color);
        }
    }

    &.--lv2 {
        &::before {
            background: var(--lv-2-color);
        }
    }

    &.--lv3 {
        &::before {
            background: var(--lv-3-color);
        }
    }

    &.--lv4 {
        &::before {
            background: var(--lv-4-color);
        }
    }
}