.brand {
    text-align: center;
    font-family: 'Noto Serif JP', sans-serif;
}
.brand > .ja {
    font-size: 32px;
    font-weight: 500;
}
.brand > .en {
    font-size: 24px;
}

.calender {
    position: relative;
    margin-top: 32px;
    padding: 8px;
    border-top: dotted 2px var(--shadow);
    border-bottom: dotted 2px var(--shadow);
    background-color: var(--sunburn);
    transform: rotate(1.5deg);
    box-shadow: 0 0 2px var(--shadow);
}
.calender > .masking-tape {
    z-index: 1;
    position: absolute;
    top: -16px;
    left: calc(50% - 64px);
    width: 128px;
    height: 36px;
    border-left: 2px dotted var(--shadow);
    border-right: 2px dotted var(--shadow);
    background-image: linear-gradient(
        -45deg,
        var(--masking) 25%,
        transparent 25%,
        transparent 50%,
        var(--masking) 50%,
        var(--masking) 75%,
        transparent 75%,
        transparent 100%
    );
    background-size: 24px 24px;
    transform: rotate(-3deg);
    box-shadow: 0 0 4px var(--shadow);
}
.calender > div {
    border: solid 2px var(--text);
}
.calender > div > div {
    display: flex;
    padding: 8px;
}

.month-year {
    justify-content: flex-start;
    align-items: flex-end;
    border-bottom: solid 2px var(--text);
}
.month-year > .month {
    font-family: 'Oswald', cursive;
    font-size: 48px;
}
.month-year > .year {
    font-family: 'Oswald', cursive;
    font-size: 24px;
}
.month-year > .title {
    margin-left: auto;
    margin-bottom: auto;
    text-align: right;
    font-size: 24px;
}
.week-day > div {
    padding: 0 8px;
    border-left: solid 1px var(--text);
    border-right: solid 1px var(--text);
}
.week-day > div:first-of-type {
    padding-left: 0;
    border-left: none;
}
.week-day > div:last-of-type {
    padding-right: 0;
    border-right: none;
}
.week-day > div > .week {
    width: 100%;
    text-align: center;
    font-weight: 500;
    color: var(--paper);
    background-color: var(--text);
}
.week-day > div > .week.sat {
    background-color: var(--blueA);
}
.week-day > div > .week.sun {
    background-color: var(--redA);
}
.week-day > div > .day {
    padding-bottom: 8px;
    font-family: 'Oswald', cursive;
    font-weight: 500;
    font-size: 36px;
}
.week-day > div > .day.sat {
    color: var(--blueA);
}
.week-day > div > .day.sun {
    color: var(--redA);
}
.week-day > div > .day,
.week-day > div > .option,
.week-day > div > .time {
    border-bottom: dotted 1px var(--gray);
}
.week-day > div > .option {
    text-align: right;
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 20px;
}
.week-day > div > .time {
    margin-bottom: 29px;
    padding-top: 10px;
    font-weight: 800;
    font-size: 14px;
    /* color: var(--gray); */
}

.label {
    user-select: none;
    z-index: 2;
    position: absolute;
    display: flex;
    flex-direction: column;
    bottom: calc(32px - 4px);
    left: 8px;
}
.label > a {
    z-index: 2;
    display: block;
    align-self: flex-start;
    margin: 4px 0;
    padding: 8px 16px;
    font-weight: 500;
    border: solid 1px var(--white4);
    border-left: solid 24px var(--redA);
    color: var(--text);
    background-color: var(--paper-of);
    transform: rotate(0deg);
    box-shadow: none;
    transition: 0.25s;
}
.label > a:hover {
    margin-top: -4px;
    margin-bottom: 12px;
    margin-left: 4px;
    transform: rotate(-1.5deg);
    box-shadow: 0 4px 8px var(--gray);
    transition: 0.25s;
}
