@charset "utf-8";

/*---------------------------------
    色設定
---------------------------------*/

/* ダークモード */
#calendar.darkmode {

    /* 全体の背景 */
    --calendar-background-color: #00000066;
    /* --calendar-background-color: rgba(255, 255, 255, 0); */

    /* 営業日 */
    --open-text-color: #f0f0f0;

    /* 年月 */
    --now-year-month-text-color: #f0f0f0;

    /* 曜日列 */
    --week-text-color: #f0f0f0;
    --week-background-color: transparent;

    /* 休業日 */
    --closed-text-color: #f0f0f0;
    --closed-background-color: #d77;
    --closed-border-color: #fbb;

    /* 今日 */
    --today-text-color: #fff;
    --today-background-color: transparent;
    --today-border-color: transparent;
    --today-closed-text-color: #000;

    /* 月移動ボタン */
    --month-text-color: #fff;
    --month-background-color: #ffffff00;
    --month-background-color-hover: #ffffff33;
    --month-border-color: #ffffffbb;

    /* 凡例 */
    --guide-text-color: #fff;

    /* 土日祝 */
    --red: #f88;
    --blue: #9ef;

    --closed-red: #f0f0f0;
    --closed-blue: #f0f0f0;
}

/* ライトモード */
#calendar {

    /* 全体の背景 */
    --calendar-background-color: transparent;

    /* 営業日 */
    --open-text-color: #555;

    /* 年月 */
    --now-year-month-text-color: #555;

    /* 曜日列 */
    --week-text-color: #777;
    --week-background-color: transparent;

    /* 休業日 */
    --closed-text-color: #555;
    --closed-background-color: #fdd;
    --closed-background-color-hover: #fbb;
    --closed-border-color: #fbb;

    /* 今日 */
    --today-text-color: #000;
    --today-background-color: transparent;
    --today-border-color: transparent;

    /* 月移動ボタン */
    --month-text-color: #333;
    --month-background-color: #fff;
    --month-background-color-hover: #f0f0f0;
    --month-border-color: #ddd;

    /* 凡例 */
    --guide-text-color: #333;

    /* 土日祝 */
    --red: #DB4437;
    --blue: #4285F4;
}

#calendar {
    max-width: 350px;
    margin: 0 auto;
    width: 100%;
    background-color: var(--calendar-background-color);
}

#calendar,
#calendar * {
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    font-family: "Stix Two Text", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "BIZ UDPMincho", "Yu Mincho Demibold", "Roboto", "Noto Sans CJK JP", "Meiryo", serif;
}

#calendar.calendarAdmin {
    max-width: 520px;
    padding-top: 2em;
    margin: 0 auto;
    padding-bottom: 0;
}

#calendarContainer {
    font-size: 110%;
    container: calendar / inline-size;
    padding-bottom: 1.5em;
}


@media screen and (min-width:520px) {
    #calendarContainer {
        padding-bottom: 2.5em;
    }

    #calendar.calendarAdmin {
        padding-top: 4em;
    }
}


.textAdjust {
    display: inline-block;
    font-size: .7em;
    padding-top: .2em;
    padding-left: .1em;
}

/* 今日の年月の表示 */
.calendarHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    text-align: center;
    line-height: 1;
    padding: 2%;
    padding: 2cqi;
}

.calendarHeader .year {
    margin-bottom: .5em;
    color: var(--now-year-month-text-color);
}

.calendarAdmin .calendarHeader .year {
    font-size: 1.4em;
}

.calendarHeader .month {
    font-size: 2em;
    color: var(--now-year-month-text-color);
}

.calendarHeader .month .textAdjust {
    font-size: .6em;
    padding-left: .2em;
    padding-top: 0;
}


.calendarHeader button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: .45em;
    padding-bottom: .35em;
    padding-inline: 1em;
    border-radius: .2em;
    font-size: .9em;
    line-height: 1;
    text-align: center;
    background-color: var(--month-background-color);
    border: .1em solid var(--month-border-color);
    color: var(--month-text-color);
    text-decoration: none;
    cursor: pointer;
}

.calendarAdmin .calendarHeader button {
    font-size: 20px;
    font-size: max(20px, 4cqi);
    border: none;
    box-shadow: 0 0 2px #00000055;
}

.calendarHeader button:hover {
    background-color: var(--month-background-color-hover);
}

.calendarHeader button.prev {
    width: 4em;
    padding-inline: .4em;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}

.calendarHeader button.next {
    width: 4em;
    padding-inline: .4em;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
}

.calendarHeader button.prev.none,
.calendarHeader button.next.none {
    border: none;
    pointer-events: none;
    opacity: 0;
}


.calendarHeader button.now {
    margin-top: 10px;
}

.calendarHeader button.now span {
    font-size: .8em;
}

.calendarHeader button img {
    width: .5em;
    margin-inline: .3em;
    padding-bottom: .05em;
    height: auto;
}

.darkmode .calendarHeader button img {
    filter: invert(100%);
}

.calendarAdmin .caption {
    color: #777;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Arial", "Segoe UI", "Roboto", "Noto Sans CJK JP", "BIZ UDPGothic", "Meiryo", sans-serif !important;
    padding-top: 1em;
    padding-top: 3cqi;
    text-align: center;
}

/* カレンダー本体 */

.calendarTable {
    width: 100%;
    text-align: center;
    line-height: 1;
}

.tr {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .5em;
    gap: 2cqi;
    padding: .5em;
    padding: 2cqi;
    font-size: 20px;
    font-size: max(20px, 5cqi);
}

.youbi {
    font-size: 15px;
    font-size: max(15px, 4cqi);
    border-radius: .2em;
    color: var(--week-text-color);
    background: var(--week-background-color);

}

.th {
    padding-top: .7em;
    padding-bottom: .5em;
    text-align: inherit;
    vertical-align: top;
    font-weight: normal;
    border-radius: .3em;
    pointer-events: none;
}

.td {
    position: relative;
    padding-top: 100%;
    font-size: 1em;
    line-height: 1;
    color: var(--open-text-color);
    border-radius: .3em;
}

.calendarAdmin .th {
    box-shadow: 0 0 2px #00000055;
    cursor: pointer;
    pointer-events: all;
}

.calendarAdmin .th:hover {
    background-color: var(--month-background-color-hover);
    box-shadow: none;
}

:where(.calendarAdmin .td:not(.blankCell)) {
    box-shadow: 0 0 2px #00000055;
    cursor: pointer;
}

.calendarAdmin .normal-day:hover,
.calendarAdmin .working-day:hover {
    background-color: var(--month-background-color-hover);
    box-shadow: none;
}

.td .inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: .3em;
}

.td .inner * {
    transform: translateY(.02em);
}

/* 土日祝 */
.youbi_0,
.nationalHoliday {
    color: var(--red);
}

.youbi_6 {
    color: var(--blue);
}

.normal-day {
    background-color: transparent;
}

.working-day {
    background-color: transparent;
}

.holiday {
    background-color: var(--closed-background-color);
}

.regular-holiday {
    background-color: var(--closed-background-color);
}

.calendarAdmin .holiday,
.calendarAdmin .regular-holiday,
.calendarAdmin .holiday-youbi {
    background-color: var(--closed-background-color);
    box-shadow: 0 0 2px #55000055;
}

.calendarAdmin .holiday-youbi:hover,
.calendarAdmin .holiday:hover,
.calendarAdmin .regular-holiday:hover {
    background-color: var(--closed-background-color);
    box-shadow: none;
}

/* 今日 */
.today {}

.today .inner {}

.today .inner * {
    font-size: 150%;
}

/* 休業日 */
.closed:not(.offday),
.offday:not(.closed) {
    color: var(--closed-text-color);
    background-color: var(--closed-background-color);
}

/*休業日テキスト部の左側の四角*/
.guideCube {
    width: max-content;
    border-radius: .3em;
    margin-block: .2em;
    margin-block: 1cqi;
    margin-right: 1em;
    margin-right: 3.75cqi;
    margin-left: auto;
    padding-inline: 1em;
    padding-top: .4em;
    padding-bottom: .2em;
    font-size: .7em;
    font-size: 3cqi;
    color: var(--closed-text-color);
    background-color: var(--closed-background-color);
}

.calendarComment {
    color: var(--open-text-color);
    background-color: var(--calendar-background-color);
    border: 1px solid var(--month-border-color);
    border-radius: 5px;
    font-size: .8em;
    padding: 1em;
    margin-top: 1.5em;
    margin-inline: 1em;
    margin-inline: 3.75cqi;
    line-height: 2;
}

.hidden {
    display: none !important;
}