@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * UNDER_BANNER........下部バナー
 * CONTENTS............コンテンツ
 */





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
.introduction { background-color: var(--primaryColor-100) }

    .introduction__inner {
        padding-top: clamp(48px, calc(100vw * (64 / var(--innerContainerSize))), 64px);
        padding-bottom: clamp(96px, calc(100vw * (123 / var(--innerContainerSize))), 123px);
    }

        .introduction__head {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            grid-column-gap: max(24px, calc(100% * (48 / 1184)));
            padding-inline: clamp(16px, calc(100vw * (48 / var(--innerContainerSize))), 48px);
            margin-bottom: clamp(24px, calc(100vw * (31 / var(--innerContainerSize))), 31px);
            border-radius: 10px;
            background-color: white;
        }

            .introduction__head__image {
                position: relative;
                flex-grow: 1;
                width: calc(100% * (533 / 1184));
                min-height: clamp(80px, calc(100vw * (160 / 768)), 160px);
            }

                .introduction__head__image img { position: absolute }
                .introduction__head__image img:nth-of-type(1) {
                    aspect-ratio: 337 / 203;
                    bottom: 0;
                    left: 0;
                    width: min(337px, calc(100% * (337 / 533)));
                    object-fit: contain;
                }
                .introduction__head__image img:nth-of-type(2) {
                    aspect-ratio: 183 / 141;
                    top: 0;
                    right: 0;
                    transform: rotate(-10.63deg);
                    width: min(183px, calc(100% * (183 / 533)));
                    margin-top: calc(-100% * (7 / 533));
                }


            .introduction__head__content {
                flex-grow: 1;
                width: calc(100% * (603 / 1184));
                padding-top: clamp(20px, calc(100vw * (25 / var(--innerContainerSize))), 25px);
                padding-bottom: clamp(32px, calc(100vw * (35 / var(--innerContainerSize))), 35px);
            }

                .introduction__head__content h2 {
                    margin-bottom: .25em;
                    color: var(--primaryColor-800);
                    font-family: var(--font);
                    font-size: clamp(1.8rem, calc(100vw * (32 / var(--innerContainerSize))), 3.2rem);
                    font-weight: 300;
                    line-height: 1.25;
                }

                .introduction__head__content p {
                    font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                    font-weight: 500;
                    line-height: 1.625;
                }


/* Calendar */
.calendar {}

    @media screen and (min-width: 768px) {
        .calendar__inner { padding-inline: calc(100% * (11 / 1280)) }
    }

        .calendar__top {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: min(22px, calc(100vw * (21 / 375)));
        }

            .calendar__year-and-month {
                display: flex;
                align-items: baseline;
                column-gap: 0;
                font-family: var(--fontEnSub);
                font-weight: 600;
                line-height: 1;
            }
            @media screen and (min-width: 768px) {
                .calendar__year-and-month {
                    /* padding-bottom: calc(100vw * (9 / var(--innerContainerSize))); */
                }
            }

                @media screen and (min-width: 768px) {
                    /* .calendar__month { width: calc(100vw * (76 / 1920)) } */
                    .calendar__month { font-size: 6.0rem }
                }
                @media screen and (max-width: 767px) {
                    .calendar__month { width: calc(100vw * (44 / 375)) }
                    .calendar__month { font-size: 3.6rem }
                }

                @media screen and (min-width: 768px) {
                    /* .calendar__year { width: calc(100vw * (80 / 1920)) } */
                    .calendar__year { font-size: 3.0rem }
                }
                @media screen and (max-width: 767px) {
                    .calendar__year { width: calc(100vw * (52 / 375)) }
                    .calendar__year { font-size: 2.0rem }
                }


            .calendar__arrows { display: flex }
            @media screen and (min-width: 768px) {
                .calendar__arrows { column-gap: min(54px, calc(100vw * (54 / var(--innerContainerSize)))) }
            }
            @media screen and (max-width: 767px) {
                .calendar__arrows { column-gap: 11px }
            }

                .calendar__arrow {
                    display: block;
                    padding-block: 7px;
                }
                .calendar__arrow img { aspect-ratio: 117 / 25 }
                @media screen and (min-width: 768px) {
                    .calendar__arrow { width: min(117px, calc(100vw * (117 / 1920))) }
                }
                @media screen and (max-width: 767px) {
                    .calendar__arrow { width: 59px }
                }


        .calendar__bottom { margin-bottom: min(24px, calc(100vw * (22 / 375))) }

            .calendar__header { margin-bottom: 2px }
            .calendar__header,
            .calendar__body {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                grid-gap: 2px;
            }

                .calendar__column { background-color: var(--primaryColor-200) }
                .calendar__column:not(:has(> a)),
                .calendar__column a {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    row-gap: 0.25em;
                    width: 100%;
                    padding-top: 0.5em;
                    padding-left: .1em;
                    font-family: var(--fontEnSub);
                }
                .calendar__header .calendar__column {
                    justify-content: center;
                    padding-top: 0;
                    background-color: var(--primaryColor-900);
                    color: white;
                    letter-spacing: .1em;
                }
                .calendar__column.is-empty { background-color: white }
                .calendar__column.is-today { background-color: var(--secondaryColor-200) }
                .calendar__column a { transition: opacity .15s var(--easeOutQuart) }
                .calendar__column a:hover { opacity: 0.5 }
                @media screen and (min-width: 768px) {
                    .calendar__column:not(:has(> a)),
                    .calendar__column a { height: 4em }
                    .calendar__column { font-size: clamp(1.0rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem) }
                }
                @media screen and (max-width: 767px) {
                    .calendar__column:not(:has(> a)),
                    .calendar__column a { height: 3.75em }
                    .calendar__column { font-size: 1.6rem }
                }

                    .calendar__day {
                        display: block;
                        line-height: 1.5;
                    }

                    .calendar__status {
                        display: block;
                        height: 1em;
                        font-weight: 500;
                        line-height: 1;
                    }

                        .calendar__icon {
                            aspect-ratio: 1 / 1;
                            display: block;
                            width: 1em;
                            background-repeat: no-repeat;
                            background-size: contain;
                        }
                        .calendar__icon.is-none { background-image: url(../images/trial_lesson/icon-calendar-none.svg) }
                        .calendar__icon.is-true { background-image: url(../images/trial_lesson/icon-calendar-true.svg) }
                        .calendar__icon.is-false { background-image: url(../images/trial_lesson/icon-calendar-false.svg) }


        .calendar__details {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 24px;
        }

            .calendar__details__description {
                background-color: white;
                display: flex;
                align-items: center;
                column-gap: calc(1em * (8 / 18));
                width: fit-content;
                height: 100%;
                padding-right: calc(1em * (20 / 18));
                padding-left: calc(1em * (15 / 18));
                border-radius: 99px;
                font-size: clamp(1.4rem, calc(100vw * (18 / var(--innerContainerSize))), 1.8rem);
                font-weight: 700;
                line-height: calc(32 / 18);
                letter-spacing: .1em;
            }

                .calendar__details__description__icon {
                    display: block;
                    width: calc(1em * (19 / 18));
                    height: calc(1em * (19 / 18));
                    background-repeat: no-repeat;
                    background-size: contain;
                }
                .calendar__details__description__icon.is-none { background-image: url(../images/trial_lesson/icon-calendar-none.svg) }
                .calendar__details__description__icon.is-true { background-image: url(../images/trial_lesson/icon-calendar-true.svg) }
                .calendar__details__description__icon.is-false { background-image: url(../images/trial_lesson/icon-calendar-false.svg) }


            .calendar__details__text {}

                .calendar__caution { letter-spacing: .05em }
                @media screen and (min-width: 768px) {
                    .calendar__caution {
                        font-size: clamp(1.0rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                        line-height: 1.875;
                        text-align: right;
                    }
                }
                @media screen and (max-width: 767px) {
                    .calendar__caution {
                        padding-left: 1.35em;
                        font-size: 1.6rem;
                        line-height: 1.5;
                        text-indent: -1.4em;
                    }
                }



/* Entry */
.entry {
    padding-top: clamp(48px, calc(100vw * (64 / var(--innerContainerSize))), 64px);
    padding-bottom: clamp(96px, calc(100vw * (116 / var(--innerContainerSize))), 116px);
    background-color: var(--primaryColor-100);
}

    .entry__inner {
        padding-top: clamp(20px, calc(100vw * (58 / var(--innerContainerSize))), 58px);
        padding-inline: clamp(16px, calc(100vw * (64 / var(--innerContainerSize))), 64px);
        padding-bottom: clamp(24px, calc(100vw * (64 / var(--innerContainerSize))), 64px);
        border-radius: 10px;
        background-color: white;
    }

        .entry__head { margin-bottom: clamp(48px, calc(100vw * (83 / var(--innerContainerSize))), 83px) }

            .entry__date {
                padding-left: .1em;
                margin-bottom: clamp(20px, calc(100vw * (27 / var(--innerContainerSize))), 27px);
                color: var(--primaryColor-800);
                font-family: var(--font);
                font-size: clamp(1.4rem, calc(100vw * (20 / var(--innerContainerSize))), 2.0rem);
                font-weight: 900;
                line-height: 1;
                letter-spacing: .1em;
                text-align: center;
            }
            .entry__date strong {
                color: var(--accentColor-400);
                font-family: var(--fontEnSub);
                font-size: 1.8em;
                letter-spacing: .05em;
            }

            .entry__caption {
                margin-bottom: 21px;
                padding-left: .1em;
                font-size: 1.6rem;
                font-weight: 500;
                line-height: 1.5;
                letter-spacing: .1em;
                text-align: center;
            }

            .entry__list {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-column-gap: max(20px, calc(100% * (82 / 1152)));
            }

                .entry__item__inner {
                    width: fit-content;
                    min-width: min(100%, 357px);
                }
                .entry__item:nth-of-type(odd) .entry__item__inner { margin-left: auto }
                .entry__item:nth-of-type(even) .entry__item__inner { margin-right: auto }

                    .entry__image { height: clamp(96px, calc(100vw * (212 / var(--innerContainerSize))), 212px) }
                    .entry__image img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }

                    .entry__text {
                        position: relative;
                        padding-block: .25em;
                        padding-left: 2.625em;
                        font-size: clamp(1.2rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                        font-weight: 500;
                        line-height: 1.5;
                        letter-spacing: .1em;
                    }
                    .entry__text::before {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: calc(1em * (32 / 24));
                        height: calc(1em * (32 / 24));
                        border-radius: 100%;
                        background-color: var(--primaryColor-800);
                        color: white;
                        font-family: var(--fontEnSub);
                        font-size: 1.5em;
                        font-weight: 400;
                        line-height: 1.25;
                        letter-spacing: 0;
                        text-align: center;
                    }
                    .entry__item:nth-of-type(1) .entry__text::before { content: "1" }
                    .entry__item:nth-of-type(2) .entry__text::before { content: "2" }
                    .entry__item:nth-of-type(3) .entry__text::before { content: "3" }
                    .entry__item:nth-of-type(4) .entry__text::before { content: "4" }