@charset "UTF-8";

body {
    letter-spacing: 0.06em;
}

.flex {
    display: flex;
}

#point {
    .point-head {
        align-items: center;
        gap: 1.6rem;
    }

    .point-label,
    .point-heading {
        margin: 0;
    }

    .point-label {
        flex-shrink: 0;
    }
}

/* banner */

#banner {
    width: 100%;
    max-width: 50rem;
    margin: 0 auto;
    .banner-img {
        position: relative;
        .banner-text {
            padding: 0 1.84rem 0 2rem;
            width: 100%;
            box-sizing: border-box;
            position: absolute;
            bottom: 0;
            left: 0;
            .main-text {
                font-style: normal;
                font-weight: 700;
                font-size: 2.2rem;
                line-height: 140%;
                letter-spacing: 0.02em;
                color: #ffffff;
                text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
                margin-bottom: 1.8rem;
                @media screen and (min-width: 768px) {
                    font-size: 2.9rem;
                    margin-bottom: 1.7rem;
                    padding: 0 0 0 0.5rem;
                    letter-spacing: 0.03em;
                }
                & span {
                    font-size: 1.8rem;
                    line-height: 160%;
                    vertical-align: top;
                }
            }
            .flex-reviews {
                display: flex;
                gap: 0.55rem;
                .review1 {
                    width: 50%;
                    & img {
                        width: 100%;
                    }
                }
                .review2 {
                    width: 50%;
                    & img {
                        width: 100%;
                    }
                }
            }
        }
    }
}

/* feature */

#feature {
    position: relative;
    padding-top: 0.5rem;
    padding-bottom: 6rem;
    background-color: #d9f0f3;
    @media screen and (min-width: 768px) {
        padding-top: 1rem;
    }
    .line1 {
        font-style: normal;
        font-weight: 400;
        font-size: 0.9rem;
        line-height: 180%;
        color: #818181;
        margin-bottom: 3.9rem;
        @media screen and (min-width: 768px) {
            font-size: 1.4rem;
        }
    }
    .feature-title {
        margin-bottom: 1.5rem;
        font-style: normal;
        font-weight: 700;
        font-size: 2rem;
        line-height: 160%;
        text-align: center;
        letter-spacing: 0;
        color: #00899b;
        margin-left: -2rem;
        width: calc(100% + 4rem);
        @media screen and (min-width: 768px) {
            font-size: 1.8rem;
        }
        & span {
            font-size: 1.4rem;
            line-height: 2.2rem;
            vertical-align: top;
        }
    }
    .feature-lead {
        margin-bottom: 2rem;
        font-style: normal;
        font-weight: 400;
        font-size: 1.4rem;
        line-height: 160%;
        text-align: center;
        letter-spacing: 0.04em;
        color: #5b5b5b;
        @media screen and (min-width: 768px) {
            font-size: 1.6rem;
        }
    }
    .feature-cards {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        margin-bottom: 6rem;
        .feature-card {
            width: 100%;
            height: 11.1rem;
            background-color: #fff;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2.8rem;
            padding: 1.5rem 2rem;
            box-sizing: border-box;
            .feature-card-icon {
                width: 8.2rem;
                & img {
                    width: 100%;
                }
            }
            .feature-card-body {
                flex: 1;
                .feature-card-title {
                    margin-bottom: 0.5rem;
                    font-weight: 700;
                    font-size: 1.8rem;
                    line-height: 135%;
                    letter-spacing: 0.06em;
                    color: #00899b;
                    @media screen and (min-width: 768px) {
                        font-size: 2rem;
                    }
                }
                .feature-card-text {
                    font-weight: 400;
                    font-size: 1.4rem;
                    line-height: 160%;
                    letter-spacing: 0.06em;
                    color: #5b5b5b;
                    @media screen and (min-width: 768px) {
                        font-size: 1.6rem;
                    }
                }
            }
        }
    }
}

/* briefing (shared by #feature and #step) */

.briefing {
    overflow: hidden;
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0.4rem 0.4rem 0 rgba(0, 137, 155, 0.12);

    .briefing-visual {
        position: relative;

        & img {
            border-radius: 2rem 2rem 0 0;
            overflow: hidden;
            display: block;
            width: 100%;
            height: auto;
            margin-top: -1px;
        }

        .briefing-badge {
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 0 0 1rem 0;
            background: #f28b82;
            color: #fff;
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1.4;
            height: 3.6rem;
            width: 9.2rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .briefing-label {
            position: absolute;
            width: 23rem;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            & img {
                vertical-align: bottom;
                width: 100%;
            }
        }
    }

    .briefing-content {
        padding: 2rem 2rem 2.4rem;

        .briefing-date {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin: 0 0 3rem;

            & dt {
                color: #f3837c;
                font-size: 1.2rem;
                font-weight: 700;
                line-height: 1.8;
                letter-spacing: 0.08em;
                padding: 1rem 0.3rem;
                box-sizing: border-box;
                border-top: 1.4px solid #f3837c;
                border-bottom: 1.4px solid #f3837c;
                @media screen and (min-width: 768px) {
                    font-size: 1.4rem;
                }
            }

            & dd {
                font-weight: 700;
                font-size: 1.6rem;
                line-height: 1.4;
                color: #5b5b5b;
                letter-spacing: 0;

                & span {
                    font-size: 1.4rem;
                    letter-spacing: 0;
                    @media screen and (min-width: 768px) {
                        font-size: 1.6rem;
                    }
                }
                @media screen and (min-width: 768px) {
                    font-size: 1.8rem;
                }
            }
        }

        .briefing-list {
            margin: 0 0 1.3rem;
            padding: 0;
            list-style: none;

            & li {
                display: flex;
                align-items: flex-start;
                gap: 1rem;
                padding-bottom: 0rem;
                margin-bottom: 0.4rem;
                & span {
                    display: table;
                    line-height: 1.8;

                    font-weight: 500;
                    font-size: 1.4rem;
                    letter-spacing: 0.04em;
                    color: #5b5b5b;
                    padding-bottom: 0.4rem;
                    background-image: radial-gradient(
                        circle,
                        #f28b82 0.15rem,
                        transparent 0.16rem
                    );
                    background-size: 0.7rem 0.35rem;
                    background-position: left bottom;
                    background-repeat: repeat-x;
                    @media screen and (min-width: 768px) {
                        font-size: 1.6rem;
                    }
                }

                &::before {
                    content: "";
                    flex-shrink: 0;
                    width: 2.1rem;
                    height: 2.1rem;
                    margin-top: 0.4rem;
                    background: url("../img/check.png") no-repeat center /
                        contain;
                }

                &:last-child {
                    margin-bottom: 0;
                    padding-bottom: 0;
                    border-bottom: none;
                }
            }
        }

        .briefing-note {
            margin: 0 0 2rem;
            font-style: normal;
            font-weight: 400;
            font-size: 1.4rem;
            line-height: 180%;
            text-align: left;
            letter-spacing: 0.06em;
            color: #5b5b5b;
            padding-left: 1.4rem;
            @media screen and (min-width: 768px) {
                font-size: 1.6rem;
            }
        }

        .briefing-btn {
            margin: 0;

            & a {
                width: 100%;
                max-width: 29.5rem;
                height: 6rem;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 5rem;
                background: #f3837c;
                color: #fff;
                font-size: 1.4rem;
                font-weight: 700;
                line-height: 1;
                text-decoration: none;
                box-shadow: 2px 4px 0 #d05048;
                letter-spacing: 0.04em;
                margin: 0 auto;
                transition: 0.3s all ease-in;
                &:hover {
                    transform: translate(2px, 4px);
                    box-shadow: 0 0 0 #d05048;
                }
                .calendar {
                    width: 1.8rem;
                    margin-right: 1.2rem;
                }

                .arrow {
                    width: 1.9rem;
                    margin-left: 1.6rem;
                }
                @media screen and (min-width: 768px) {
                    font-size: 1.6rem;
                }
            }
        }
    }
}

/* #step keeps its extra spacing below the card */
#step .briefing {
    margin-bottom: 2.4rem;
}

/* point */

#point {
    padding-top: 6rem;
    padding-bottom: 6rem;
    position: relative;
    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 26rem;
        top: 0;
        left: 0;
        background: url("../img/point-bg.png") no-repeat bottom center / 100%
            auto;
        z-index: 0;
    }
    .point-title {
        font-family: var(--jost);
        font-style: normal;
        font-weight: 700;
        font-size: 4.4rem;
        line-height: 160%;
        text-align: center;
        letter-spacing: 0.05em;
        color: #fff;
        margin-bottom: 0.5rem;
        @media screen and (min-width: 768px) {
            font-size: 5rem;
        }
    }
    .point-lead {
        margin-bottom: 8rem;
        font-style: normal;
        font-weight: 700;
        font-size: 2rem;
        line-height: 160%;
        text-align: center;
        letter-spacing: 0.06em;
        color: #fff;
        margin-left: -2rem;
        width: calc(100% + 4rem);
        @media screen and (min-width: 768px) {
            font-size: 2.2rem;
        }
    }
    .point-list {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        .point-item {
            .point-head.flex {
                display: flex;
                gap: 1.5rem;
                height: 7rem;
                margin-bottom: 1rem;
                .point-label {
                    width: 5rem;
                    background-color: #fff;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    .point-label-text {
                        font-family: var(--jost);

                        font-weight: 700;
                        font-size: 1.4rem;
                        line-height: 160%;
                        text-align: center;
                        letter-spacing: 0.06em;
                        color: #00899b;
                        @media screen and (min-width: 768px) {
                            font-size: 1.6rem;
                        }
                    }
                    .point-num {
                        font-family: var(--jost);

                        font-weight: 500;
                        font-size: 3.4rem;
                        line-height: 1;
                        text-align: center;
                        color: #00899b;
                        @media screen and (min-width: 768px) {
                            font-size: 3.8rem;
                        }
                    }
                }
                .point-heading {
                    background-color: #d9f0f3;
                    flex: 1;
                    width: 100%;
                    height: 100%;
                    padding-left: 1.5rem;
                    box-sizing: border-box;
                    font-weight: 700;
                    font-size: 1.8rem;
                    line-height: 160%;
                    letter-spacing: 0.06em;
                    color: #00899b;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    @media screen and (min-width: 768px) {
                        font-size: 2rem;
                    }
                }
            }
        }
        .point-img {
            width: 100%;
            margin-bottom: 1.5rem;
            & img {
                width: 100%;
            }
        }
        .point-text {
            font-style: normal;
            font-weight: 400;
            font-size: 1.4rem;
            line-height: 180%;
            letter-spacing: 0.06em;
            color: #5b5b5b;
            @media screen and (min-width: 768px) {
                font-size: 1.6rem;
            }
        }
    }
}

/* ------------------------------------------- */
/* training */
/* ------------------------------------------- */
#training {
    padding: 6rem 0 3.3rem;
    background: #f5f1e7;
    .training-title {
        font-style: normal;
        font-weight: 700;
        font-size: 2.4rem;
        line-height: 160%;
        text-align: center;
        letter-spacing: 0.06em;
        color: #5b5b5b;
        margin-bottom: 6rem;
        @media screen and (min-width: 768px) {
            font-size: 2.8rem;
        }
    }
    .training-block {
        margin-bottom: 4rem;

        &:last-child {
            margin-bottom: 0;
        }

        .training-subtitle {
            margin: 0 0 1rem;
            font-style: normal;
            font-weight: 700;
            font-size: 1.8rem;
            line-height: 160%;
            letter-spacing: 0.06em;
            color: #00899b;
            @media screen and (min-width: 768px) {
                font-size: 2rem;
            }
        }

        .training-lead {
            margin: 0 0 2rem;
            font-style: normal;
            font-weight: 400;
            font-size: 1.4rem;
            line-height: 180%;
            letter-spacing: 0.06em;
            color: #5b5b5b;
            @media screen and (min-width: 768px) {
                font-size: 1.6rem;
            }
        }

        .training-profile {
            border: #e9e0ce 1rem solid;
            background-color: #ece6d5;
            padding: 2rem;
            position: relative;
            &::after {
                content: "";
                position: absolute;
                top: -1rem;
                left: -1rem;
                width: 5rem;
                height: 4.5rem;
                background: url("../img/training-edge.png") no-repeat top left /
                    contain;
            }
            .training-profile-head {
                justify-content: space-between;
                align-items: flex-end;
                gap: 1rem;
                .training-profile-info {
                    flex: 1;
                    min-width: 0;

                    .training-profile-name {
                        margin: 0 0 0.8rem;

                        font-weight: 500;
                        font-size: 1.8rem;
                        line-height: 160%;
                        letter-spacing: 0.3em;
                        color: #5b5b5b;
                        @media screen and (min-width: 768px) {
                            font-size: 2rem;
                        }
                    }

                    .training-profile-role {
                        font-weight: 500;
                        font-size: 1.2rem;
                        line-height: 160%;
                        letter-spacing: 0.06em;
                        color: #5b5b5b;
                        @media screen and (min-width: 768px) {
                            font-size: 1.4rem;
                        }
                    }
                }

                .training-profile-img {
                    flex-shrink: 0;
                    width: 15rem;

                    & img {
                        display: block;
                        width: 100%;
                        height: auto;
                        border-radius: 0.4rem;
                    }
                }
            }

            .training-profile-text {
                font-style: normal;
                font-weight: 400;
                font-size: 1.2rem;
                line-height: 180%;
                letter-spacing: 0.06em;
                color: #5b5b5b;
                margin-top: 1.7rem;
                padding-top: 1.7rem;
                border-top: 1px solid #c6bca7;
                @media screen and (min-width: 768px) {
                    font-size: 1.4rem;
                }
            }
        }
    }
}

/* ------------------------------------------- */
/* course */
/* ------------------------------------------- */
#course {
    width: 100%;
    position: relative;
    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 26rem;
        top: 0;
        left: 0;
        background: url("../img/course-bg.png") no-repeat top center / 100% auto;
        z-index: 0;
        @media screen and (min-width: 768px) {
            background: url("../img/course-bg.png") no-repeat bottom center /
                100% auto;
        }
    }
    .block {
        padding-top: 6rem;
        overflow: hidden;
        margin-bottom: 6.5rem;
        .course-hero {
            text-align: center;
            margin-bottom: 9.3rem;
            .course-title {
                font-family: var(--jost);
                color: #fff;
                font-size: 4.4rem;
                font-weight: 700;
                line-height: 1.6;
                letter-spacing: 0.05em;
                margin-bottom: 0.5rem;
                @media screen and (min-width: 768px) {
                    font-size: 5rem;
                }
            }

            .course-lead {
                font-style: normal;
                font-weight: 700;
                font-size: 2rem;
                line-height: 160%;
                text-align: center;
                letter-spacing: 0.06em;
                color: #ffffff;
                text-shadow: 0px 0px 25px #00899b;
                @media screen and (min-width: 768px) {
                    font-size: 2.2rem;
                }
            }
        }

        .course-intro {
            padding: 0;

            .course-heading {
                display: flex;
                align-items: center;
                gap: 1.2rem;
                margin: 0 0 1rem;
                color: #1a8a9c;
                font-size: 1.8rem;
                font-weight: 700;
                line-height: 1.4;
                font-style: normal;
                font-weight: 700;
                font-size: 2rem;
                line-height: 180%;
                letter-spacing: 0.06em;
                color: #5b5b5b;
                &::before {
                    content: "";
                    flex-shrink: 0;
                    width: 1.2rem;
                    height: 1.2rem;
                    border-radius: 50%;
                    background: #5ab8c2;
                }
                @media screen and (min-width: 768px) {
                    font-size: 2.2rem;
                }
            }

            .course-intro-text {
                margin: 0;
                color: #5b5b5b;
                font-size: 1.4rem;
                line-height: 1.8;
                letter-spacing: 0.06em;
                margin-bottom: 2rem;
                @media screen and (min-width: 768px) {
                    font-size: 1.6rem;
                }
            }
        }

        .course-entry {
            padding: 0;

            .course-box-entry {
                background-color: #e0edd0;
                margin-bottom: 4rem;
            }
        }

        .course-flow {
            position: relative;
            padding: 3.5rem 2rem 2rem 1.3rem;
            box-sizing: border-box;
            border: 2px solid #7ac5d0;
            border-radius: 0.8rem;

            .course-steps {
                .course-label {
                    position: absolute;
                    top: 0;
                    left: 50%;
                    margin: 0;
                    transform: translate(-50%, -50%);
                    white-space: nowrap;
                }

                .course-step-list {
                    margin: 0;
                    padding: 0;
                    list-style: none;

                    .course-step-item {
                        position: relative;
                        padding-left: 2.4rem;
                        padding-bottom: 0.4rem;

                        &:last-child {
                            padding-bottom: 0;
                        }

                        &::before {
                            content: "";
                            position: absolute;
                            left: 0.4rem;
                            top: 5.5rem;
                            z-index: 1;
                            width: 1rem;
                            height: 1rem;
                            border-radius: 50%;
                            background: #1a8a9c;
                        }

                        &:not(:last-child) {
                            &::after {
                                content: "";
                                position: absolute;
                                left: 0.65rem;
                                top: 5.5rem;
                                height: 100%;
                                bottom: 0;
                                width: 0.4rem;
                                background-image: radial-gradient(
                                    circle,
                                    #7ac5d0 0.1rem,
                                    transparent 0.11rem
                                );
                                background-size: 0.2rem 0.6rem;
                                background-repeat: repeat-y;
                                background-position: center top;
                            }
                        }

                        .course-box-step {
                            background: #d9f0f3;
                        }
                    }
                }
            }

            .course-master {
                margin-top: 1.6rem;

                .course-box-master {
                    background: #ffe5e3;

                    .course-box-title {
                        color: #da6854;
                    }

                    .course-master-img {
                        margin-top: 1.4rem;
                        text-align: center;

                        & img {
                            display: block;
                            width: 100%;
                            height: auto;
                        }
                    }
                }
            }
        }
    }

    /* shared, reused course parts */
    .course-label {
        display: table;
        margin: 0 auto 1rem;
        padding: 1.5rem 2rem;
        border-radius: 4rem;
        background: #00899b;
        color: #fff;
        font-size: 1.3rem;
        font-weight: 700;
        line-height: 1.4;
        text-align: center;
        height: 4rem;
        @media screen and (min-width: 768px) {
            font-size: 1.5rem;
        }
    }
    .course-label.green {
        background-color: #3c8d58;
    }

    .course-box {
        border-radius: 0.8rem;
        padding: 1.6rem;
    }

    .course-box-title {
        margin: 0 0 0.5rem;
        color: #00899b;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0.06rem;
        @media screen and (min-width: 768px) {
            font-size: 1.8rem;
        }
    }
    .course-box-title.green {
        color: #3c8d58;
    }

    .course-box-text {
        margin: 0;
        color: #5b5b5b;
        font-size: 1.4rem;
        line-height: 1.8;
        @media screen and (min-width: 768px) {
            font-size: 1.6rem;
        }
    }

    .course-teal-block {
        padding: 10rem 0 6rem;
        color: #5b5b5b;
        background-color: #00899b;
        position: relative;
        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4rem;
            background: url("../img/course-teal-block-bg.png") no-repeat bottom
                center / 100% auto;
            @media screen and (max-width: 767px) {
                height: 3rem;
            }
        }
    }

    .course-detail-title {
        font-style: normal;
        font-weight: 700;
        font-size: 2.4rem;
        line-height: 160%;
        text-align: center;
        letter-spacing: 0.06em;
        color: #ffffff;
        margin-bottom: 3.4rem;
        @media screen and (min-width: 768px) {
            font-size: 2.8rem;
        }
    }

    .course-detail {
        position: relative;
    }

    .course-tabs {
        display: flex;
        gap: 0.5rem;
        margin: 0 0 2rem;
        padding: 0;
        list-style: none;
        & li {
            flex: 1;
        }
    }
    .course-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 5.6rem;
        padding: 0 0 1rem;
        box-sizing: border-box;
        background: #fff;
        color: #00899b;
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        text-decoration: none;
        position: relative;
        width: 6.3rem;
        height: 6.3rem;
        @media screen and (min-width: 768px) {
            width: 8.7rem;
            height: 8.7rem;
        }
        &::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 1rem;
            width: 2rem;
            height: 0.9rem;
            margin-left: -1rem;
            background: #5ab8c2;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
        }
        @media screen and (min-width: 768px) {
            font-size: 1.6rem;
        }
    }

    .course-tab-intro {
        color: #65ba82;

        &::after {
            background: #65ba82;
        }
    }

    .course-tab-master {
        color: #da6854;

        &::after {
            background: #f3837c;
        }
    }

    .course-panel-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .course-panel {
        margin-bottom: 2.4rem;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .course-card {
        overflow: hidden;
        border-radius: 1.6rem;
        background: #fff;
    }

    .course-card-main {
        padding: 2.6rem 2rem 3rem;
    }

    .course-card-title {
        margin: 0 0 2.2rem;
        padding-bottom: 2.6rem;
        border-bottom: 1.6px solid #5a9e4a;
        font-style: normal;
        font-weight: 700;
        font-size: 2rem;
        line-height: 1;
        letter-spacing: 0.06em;
        color: #3c8d58;
        @media screen and (min-width: 768px) {
            font-size: 2.2rem;
        }
    }

    .course-card-title-master {
        color: #da6854;
        border-bottom-color: #f3837c;
    }

    .course-badge {
        margin: 0 0 1rem;
        padding: 0 1rem;
        background: #65ba82;
        color: #fff;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1;
        height: 2.3rem;
        display: inline-flex;
        align-items: center;
        border-radius: 0.2rem;
        height: 2.3rem;
        @media screen and (min-width: 768px) {
            font-size: 1.4rem;
        }
    }
    .course-meta {
        margin-bottom: 1.8rem;
    }

    .course-fee {
        margin-bottom: 3.6rem;
    }

    .course-curriculum {
        @media screen and (min-width: 768px) {
            margin-bottom: 0;
        }
    }

    .course-meta-title {
        margin: 0 0 0.4rem;
        color: #3c8d58;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.6;
        @media screen and (min-width: 768px) {
            font-size: 1.8rem;
        }
    }

    .course-meta-note {
        margin: 0 0 2rem;
        color: #5b5b5b;
        font-size: 1.4rem;
        line-height: 1.6;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.06em;
        @media screen and (min-width: 768px) {
            font-size: 1.6rem;
        }
    }
    .course-price {
        margin: 0;
        color: #5b5b5b;
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0;
        .course-price-unit {
            font-size: 1.6rem;
            @media screen and (min-width: 768px) {
                font-size: 1.8rem;
            }
        }

        .course-price-tax {
            font-size: 1.4rem;
            font-weight: 400;
            @media screen and (min-width: 768px) {
                font-size: 1.6rem;
            }
        }
        @media screen and (min-width: 768px) {
            font-size: 2.4rem;
        }
    }

    .course-curriculum {
        padding: 1.5rem 2rem;
        box-sizing: border-box;
        border-radius: 1rem;
        background: #dcf2e3;

        .course-curriculum-head {
            margin-bottom: 0.8rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px solid #3c8d58;
            display: flex;
            align-items: baseline;
            gap: 1rem;
            .course-curriculum-en {
                color: #3c8d58;
                font-family: var(--jost);
                font-size: 2.2rem;
                font-weight: 400;
                line-height: 1.6;
                @media screen and (min-width: 768px) {
                    font-size: 2.4rem;
                }
            }
            .course-curriculum-ja {
                font-size: 1rem;
                line-height: 1.6;
                font-weight: 400;
                letter-spacing: 0.06em;
                color: #5b5b5b;
                @media screen and (min-width: 768px) {
                    font-size: 1.4rem;
                }
            }
        }

        .course-curriculum-time,
        .course-curriculum-duration {
            margin: 0 0 1rem;
            color: #5b5b5b;
            font-size: 1.2rem;
            line-height: 1.6;
            letter-spacing: 0.06em;
            @media screen and (min-width: 768px) {
                font-size: 1.4rem;
            }
        }

        .course-curriculum-day {
            margin-bottom: 1.2rem;

            &:last-of-type {
                margin-bottom: 0;
            }

            .course-curriculum-day-title {
                margin: 0 0 0.6rem;
                padding: 0.6rem 1rem;
                background: #65ba82;
                color: #fff;
                font-size: 1.2rem;
                font-weight: 700;
                line-height: 1.4;
                text-align: center;
                height: 2.2rem;
                display: flex;
                align-items: center;
                justify-content: center;
                @media screen and (min-width: 768px) {
                    font-size: 1.4rem;
                }
            }

            .course-curriculum-list {
                margin: 0;
                padding: 0;
                list-style: none;

                & li {
                    position: relative;
                    padding-left: 1.6rem;
                    color: #5b5b5b;
                    font-size: 1.2rem;
                    line-height: 1.6;

                    &::before {
                        content: "・";
                        position: absolute;
                        left: 0.2rem;
                        top: 0;
                    }
                    @media screen and (min-width: 768px) {
                        font-size: 1.4rem;
                    }
                }
            }

            .course-curriculum-list-border {
                padding: 1.2rem;
                border: 1px dotted #7fb8d0;
            }

            .course-curriculum-note {
                margin: 1.2rem 0 0;
                color: #5b5b5b;
                font-size: 1.2rem;
                line-height: 1.7;
                @media screen and (min-width: 768px) {
                    font-size: 1.4rem;
                }
            }

            .course-curriculum-note-border {
                padding: 1.2rem;
                border: 1px dashed #7fb8d0;
            }
        }
        .course-curriculum-note {
            margin-top: 1rem;
            font-style: normal;
            font-weight: 300;
            font-size: 0.9rem;
            line-height: 160%;
            letter-spacing: 0.06em;
            color: #5b5b5b;
            @media screen and (min-width: 768px) {
                font-size: 1.4rem;
            }
        }
    }
    .course-after {
        padding: 3rem 2rem;
        box-sizing: border-box;
        background: #ffffe2;
        .course-after-title {
            margin: 0 0 1rem;
            color: #3c8d58;
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1.6;
            @media screen and (min-width: 768px) {
                font-size: 1.6rem;
            }
        }
        .course-after-text {
            margin: 0;
            color: #5b5b5b;
            font-size: 1.2rem;
            line-height: 1.6;
            letter-spacing: 0.06em;
            @media screen and (min-width: 768px) {
                font-size: 1.4rem;
            }
        }
    }

    .course-panel-basic,
    .course-panel-middle,
    .course-panel-advanced {
        .course-badge {
            background: #5ab8c2;
        }

        .course-card-title {
            color: #00899b;
            border-bottom-color: #00899b;
        }

        .course-meta-title {
            color: #00899b;
        }

        .course-curriculum {
            background: #def2f5;

            .course-curriculum-head {
                border-bottom-color: #00899b;

                .course-curriculum-en {
                    color: #00899b;
                }
            }

            .course-curriculum-day {
                .course-curriculum-day-title {
                    background: #5ab8c2;
                }
            }

            > .course-curriculum-day-title {
                margin: 0 0 0.8rem;
                padding: 0.6rem 1rem;
                background: #5ab8c2;
                color: #fff;
                font-size: 1.2rem;
                font-weight: 700;
                line-height: 1.4;
                text-align: center;
                height: 2.2rem;
                display: flex;
                align-items: center;
                justify-content: center;
                @media screen and (min-width: 768px) {
                    font-size: 1.4rem;
                }
            }

            > .course-curriculum-list {
                margin: 0;
                padding: 0;
                list-style: none;

                & li {
                    position: relative;
                    padding-left: 1.4rem;
                    color: #5b5b5b;
                    font-size: 1.2rem;
                    line-height: 1.6;

                    &::before {
                        content: "・";
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                    @media screen and (min-width: 768px) {
                        font-size: 1.4rem;
                    }
                }
            }

            > .course-curriculum-note {
                margin: 1.2rem 0 0;
            }
        }

        .course-after {
            background: #ffffe2;

            .course-after-title {
                color: #00899b;
            }
        }
    }

    .course-panel-master {
        .course-badge {
            background: #f3837c;
        }

        .course-card-title {
            color: #da6854;
            border-bottom-color: #f3837c;
        }

        .course-meta-title {
            color: #da6854;
        }

        .course-curriculum {
            background: #ffe5e3;

            .course-curriculum-head {
                border-bottom-color: #f3837c;

                .course-curriculum-en {
                    color: #da6854;
                }
            }

            > .course-curriculum-day-title {
                margin: 0 0 0.8rem;
                padding: 0.6rem 1rem;
                background: #f3837c;
                color: #fff;
                font-size: 1.2rem;
                font-weight: 700;
                line-height: 1.4;
                text-align: center;
                min-height: 2.2rem;
                display: flex;
                align-items: center;
                justify-content: center;
                @media screen and (min-width: 768px) {
                    font-size: 1.4rem;
                }
            }

            > .course-curriculum-list {
                margin: 0;
                padding: 0;
                list-style: none;

                & li {
                    position: relative;
                    padding-left: 1.6rem;
                    margin-bottom: 0.4rem;
                    color: #5b5b5b;
                    font-size: 1.2rem;
                    line-height: 1.6;
                    letter-spacing: 0.06em;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    &::before {
                        content: "・";
                        position: absolute;
                        left: 0.2rem;
                        top: 0;
                    }
                    @media screen and (min-width: 768px) {
                        font-size: 1.4rem;
                    }
                }
            }

            > .course-curriculum-note {
                margin: 1.2rem 0 0;
                font-size: 1.2rem;
                line-height: 1.7;
                letter-spacing: 0.06em;
                @media screen and (min-width: 768px) {
                    font-size: 1.4rem;
                }
            }

            .course-curriculum-note-border {
                padding: 1.2rem;
                border: 1px dashed #f3837c;
            }
        }

        .course-after {
            .course-after-title {
                color: #da6854;
            }
        }
    }
}

/* ------------------------------------------- */
/* beige block */
/* ------------------------------------------- */
#beige-block {
    padding: 6rem 0;
    background: #f5f1e7;

    .recommend-title {
        margin: 0 0 2.4rem;
        text-align: center;
        padding: 0 2rem;
        & img {
            display: inline-block;
            width: auto;
            max-width: 100%;
            height: auto;
        }
    }
    .recommend-list {
        margin: 0;
        padding: 0;
        list-style: none;
        padding: 0 2rem;
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        & li {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0 2rem;
            background: #fff;
            border-radius: 0.6rem;
            height: 5rem;
            box-shadow: 3px 3px 0px #e9e0ce;
            & img {
                width: 2rem;
                vertical-align: top;
            }
            & span {
                font-size: 1.6rem;
                font-weight: 700;
                line-height: 1.6;
                font-weight: 400;
                letter-spacing: 0.06em;
                color: #00899b;
                @media screen and (min-width: 768px) {
                    font-size: 1.8rem;
                }
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .recommend-check {
        flex-shrink: 0;
        width: 2rem;
        height: auto;
    }
}

/* ------------------------------------------- */
/* voice */
/* ------------------------------------------- */
#voice {
    padding: 5rem 0 8rem;

    .voice-title {
        margin: 0;
        color: #208e9b;
        font-size: 4.4rem;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        font-family: var(--jost);
        @media screen and (min-width: 768px) {
            font-size: 5rem;
        }
    }

    .voice-lead {
        margin: 0.8rem 0 4.8rem;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1.6;
        text-align: center;
        letter-spacing: 0.06em;
        color: #00899b;
        @media screen and (min-width: 768px) {
            font-size: 2.8rem;
        }
    }

    .voice-list {
        margin: 0;
        padding: 0;
        list-style: none;

        .voice-item {
            margin-bottom: 4rem;
            &:last-child {
                margin-bottom: 0;
            }

            .voice-visual {
                margin-bottom: 1rem;
                margin-left: -2rem;
                width: calc(100% + 4rem);
                & img {
                    display: block;
                    width: 100%;
                    height: auto;
                }
            }
            .voice-name {
                margin: 0 0 3rem;
                color: #5b5b5b;
                font-size: 1.4rem;
                font-weight: 700;
                line-height: 1.6;
                letter-spacing: 0.06em;
                @media screen and (min-width: 768px) {
                    font-size: 1.6rem;
                }
            }

            .voice-qa {
                margin: 0;
                & dt {
                    position: relative;
                    margin: 0 0 1rem;
                    color: #208e9b;
                    font-size: 1.4rem;
                    font-weight: 700;
                    line-height: 1.6;
                    letter-spacing: 0.06em;
                    @media screen and (min-width: 768px) {
                        font-size: 1.6rem;
                    }
                }
                & dd {
                    margin: 0 0 3rem;
                    padding-left: 1.5rem;
                    border-left: 1px solid #208e9b;
                    font-size: 1.2rem;
                    line-height: 1.8;
                    color: #5b5b5b;
                    font-weight: 400;
                    &:last-child {
                        margin-bottom: 0;
                    }
                    @media screen and (min-width: 768px) {
                        font-size: 1.4rem;
                    }
                }
            }
        }
    }
}

/* ------------------------------------------- */
/* graduate */
/* ------------------------------------------- */
#graduate {
    .graduate-part {
        padding: 6rem 0;
        background: #e8f6f8;
    }

    .graduate-part-2 {
        padding-top: 0;
    }

    .graduate-head {
        margin-bottom: 2.4rem;
        text-align: center;
        .graduate-head-title {
            margin: 0 0 1rem;
            color: #208e9b;
            font-size: 2.4rem;
            font-weight: 700;
            line-height: 1.6;
            letter-spacing: 0.06em;
            @media screen and (min-width: 768px) {
                font-size: 2.8rem;
            }
        }

        .graduate-head-lead {
            margin: 0 auto 4rem;
            color: #5b5b5b;
            font-size: 1.2rem;
            line-height: 1.6;
            letter-spacing: 0.06em;
            @media screen and (min-width: 768px) {
                font-size: 1.4rem;
            }
        }
    }

    .graduate-visual {
        margin-bottom: 2rem;
        overflow: hidden;
        border-radius: 0.8rem;

        & img {
            display: block;
            width: 100%;
            height: auto;
        }
    }

    .graduate-body {
        & p {
            margin: 0 0 1.6rem;
            color: #5b5b5b;
            font-size: 1.2rem;
            line-height: 1.8;
            letter-spacing: 0.06em;
            &:last-child {
                margin-bottom: 0;
            }
            @media screen and (min-width: 768px) {
                font-size: 1.4rem;
            }
        }
    }

    .graduate-part-1 .graduate-body {
        margin-top: 2rem;
    }

    .graduate-part-2 .graduate-body {
        margin-bottom: 2.4rem;
    }

    .graduate-btn {
        margin: 0 0 2rem;
        text-align: center;

        & a {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 1.7rem;
            height: 6rem;
            width: 100%;
            max-width: 32rem;
            padding: 1.4rem 2rem;
            border: 1px solid #208e9b;
            border-radius: 5rem;
            background: #fff;
            color: #208e9b;
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.04em;
            text-decoration: none;
            transition:
                background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease;
            @media screen and (min-width: 768px) {
                font-size: 1.6rem;
                max-width: 34rem;
            }
            &::after {
                content: "→";
                font-size: 2.4rem;
                transition: transform 0.25s ease;
                @media screen and (min-width: 768px) {
                    font-size: 2.8rem;
                }
            }

            @media (hover: hover) and (pointer: fine) {
                &:hover {
                    background-color: #208e9b;
                    color: #fff;

                    &::after {
                        transform: translateX(0.3rem);
                    }
                }
            }
        }
    }

    .graduate-note {
        margin: 0;
        color: #999;
        font-size: 0.9rem;
        line-height: 1.7;
        text-align: center;
        @media screen and (min-width: 768px) {
            font-size: 1.4rem;
        }
    }
}

/* ------------------------------------------- */
/* income */
/* ------------------------------------------- */
#income {
    padding: 6rem 0;
    background: #00899b;
    color: #fff;
    .income-title {
        position: relative;
        margin: 0 0 1.6rem;
        padding-left: 2.4rem;
        color: #fff;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0.06em;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.7rem;
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
            background: #fff;
        }
        @media screen and (min-width: 768px) {
            font-size: 1.8rem;
        }
    }

    .income-sub {
        margin: 0 0 1rem;
        color: #fff;
        font-size: 0.9rem;
        line-height: 1.6;
        font-weight: 300;
        letter-spacing: 0.06em;
        @media screen and (min-width: 768px) {
            font-size: 1.4rem;
        }
    }

    .income-list {
        margin: 0 0 2rem;
        padding: 0;
        list-style: none;

        .income-card {
            margin-bottom: 1rem;
            overflow: hidden;
            border-radius: 0.8rem;
            background: #fff;
            border: 0.4rem solid #fff;

            &:last-child {
                margin-bottom: 0;
            }
            .income-card-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1.2rem;
                padding: 1.4rem 1.6rem;
                background: #def2f5;
                height: 6.5rem;
                border-bottom: #5ab8c2 solid 1px;
                .income-card-person {
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                    margin: 0;
                    min-width: 0;

                    & img {
                        flex-shrink: 0;
                        width: 4.2rem;
                        height: 4.2rem;
                    }

                    .income-card-name {
                        color: #208e9b;
                        font-size: 1.4rem;
                        font-weight: 700;
                        line-height: 1.4;
                        letter-spacing: 0.06rem;
                        @media screen and (min-width: 768px) {
                            font-size: 1.6rem;
                        }
                    }
                }

                .income-card-amount {
                    margin: 0;
                    color: #5b5b5b;
                    font-size: 1.8rem;
                    font-weight: 700;
                    line-height: 1.2;
                    white-space: nowrap;

                    .income-card-yen {
                        margin-left: 0.2rem;
                        font-size: 1.4rem;
                        color: #5b5b5b;
                        @media screen and (min-width: 768px) {
                            font-size: 1.6rem;
                        }
                    }
                    @media screen and (min-width: 768px) {
                        font-size: 2rem;
                    }
                }

                .income-card-amount-wrap {
                    flex-shrink: 0;
                    text-align: right;

                    .income-card-amount-note {
                        margin: 0.2rem 0 0;
                        color: #5b5b5b;
                        font-size: 1.1rem;
                        line-height: 1.4;
                        @media screen and (min-width: 768px) {
                            font-size: 1.4rem;
                        }
                    }
                }
            }

            .income-card-body {
                padding: 1.1rem 1.6rem;
                height: 7.9rem;
                .income-card-details {
                    display: grid;
                    grid-template-columns: max-content max-content max-content;
                    width: fit-content;
                    row-gap: 0.6rem;
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }

                .income-card-row {
                    display: contents;
                }

                .income-card-label {
                    color: #208e9b;
                    font-size: 1.4rem;
                    font-weight: 700;
                    line-height: 1.6;
                    @media screen and (min-width: 768px) {
                        font-size: 1.6rem;
                    }
                }

                .income-card-colon {
                    color: #5b5b5b;
                    font-size: 1.4rem;
                    line-height: 1.6;
                    @media screen and (min-width: 768px) {
                        font-size: 1.6rem;
                    }
                }

                .income-card-value {
                    color: #5b5b5b;
                    font-size: 1.4rem;
                    line-height: 1.6;
                    @media screen and (min-width: 768px) {
                        font-size: 1.6rem;
                    }
                }
            }
        }
    }

    .income-lead {
        margin: 2rem 0 1rem;
        color: #fff;
        font-size: 1.2rem;
        line-height: 1.6;
        letter-spacing: 0.06em;
        @media screen and (min-width: 768px) {
            font-size: 1.4rem;
        }
    }

    .income-notes {
        margin: 0;
        padding: 0;
        list-style: none;

        & li {
            margin-bottom: 0.4rem;
            color: #fff;
            font-size: 0.9rem;
            line-height: 1.6;
            font-weight: 300;
            &:last-child {
                margin-bottom: 0;
            }
            @media screen and (min-width: 768px) {
                font-size: 1.4rem;
            }
        }
    }
}

/* ------------------------------------------- */
/* step */
/* ------------------------------------------- */
#step {
    padding: 6rem 0;
    background: #e8f6f8;

    .flow-title {
        margin: 0;
        color: #5ab8c2;
        font-size: 5.4rem;
        font-weight: 500;
        line-height: 1.6;
        font-family: var(--jost);
        text-align: center;
        font-style: normal;
        letter-spacing: 0.02em;
        @media screen and (min-width: 768px) {
            font-size: 6rem;
        }
    }

    .flow-lead {
        margin: 0 0 1rem;
        color: #00899b;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        letter-spacing: 0.06em;
        @media screen and (min-width: 768px) {
            font-size: 2.8rem;
        }
    }

    .flow-intro {
        margin: 0 0 3.4rem;
        color: #5b5b5b;
        font-size: 1.4rem;
        line-height: 1.6;
        letter-spacing: 0.06em;
        text-align: center;
        font-weight: 400;
        @media screen and (min-width: 768px) {
            font-size: 1.6rem;
        }
    }

    .flow-step-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .flow-step {
        margin-bottom: 2rem;
        overflow: hidden;
        border: 1px solid #5ab8c2;

        &:last-child {
            margin-bottom: 0;
        }

        .flow-step-head {
            display: flex;
            align-items: center;
            gap: 3.2rem;
            padding: 1.3rem 3rem;
            background: #5ab8c2;
            height: 9.2rem;

            .flow-step-label {
                flex-shrink: 0;
                margin: 0;
                text-align: center;

                .flow-step-num {
                    display: block;
                    color: #fff;
                    font-size: 4.4rem;
                    font-weight: 700;
                    font-family: var(--jost);
                    font-style: normal;
                    font-weight: 600;
                    line-height: 1;
                    text-align: center;
                    letter-spacing: 0.02em;
                    color: #ffffff;
                    @media screen and (min-width: 768px) {
                        font-size: 5rem;
                    }
                }

                .flow-step-en {
                    display: block;
                    color: #fff;
                    font-family: var(--jost);
                    font-size: 1.2rem;
                    font-weight: 700;
                    line-height: 1.6;
                    letter-spacing: 0.14em;
                    @media screen and (min-width: 768px) {
                        font-size: 1.4rem;
                    }
                }
            }

            .flow-step-title {
                margin: 0;
                color: #fff;
                font-size: 1.6rem;
                font-weight: 700;
                line-height: 1.6;
                letter-spacing: 0.06em;
                @media screen and (min-width: 768px) {
                    font-size: 1.8rem;
                }
            }
        }

        .flow-step-body {
            padding: 2rem;
            background: #fff;

            .flow-line-btn {
                margin: 2rem 0;

                & a {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    padding: 1.4rem 2.5rem;
                    border-radius: 5rem;
                    background: #06c755;
                    color: #fff;
                    font-size: 1.4rem;
                    font-weight: 700;
                    line-height: 1.4;
                    text-decoration: none;
                    height: 6rem;
                    letter-spacing: 0.04em;
                    box-shadow: 2px 4px 0 #05863a;
                    max-width: 29.5rem;
                    margin: 0 auto;
                    transition: 0.3s all ease-in;
                    &:hover {
                        transform: translate(2px, 4px);
                        box-shadow: 0 0 0 #05863a;
                    }
                    @media screen and (min-width: 768px) {
                        font-size: 1.6rem;
                        max-width: 32rem;
                    }
                    .line-icon {
                        flex-shrink: 0;
                        width: 2.6rem;
                        height: auto;
                        margin-right: 3rem;
                    }
                    .arrow {
                        width: 1.9rem;
                        margin-left: 5rem;
                    }
                }
            }

            .flow-step-items {
                margin: 1rem 0;
                padding: 0;
                list-style: none;

                & li {
                    margin-bottom: 2rem;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .flow-step-items-text {
                        flex: 1;
                        min-width: 0;

                        .flow-step-items-title {
                            margin: 0 0 0.5rem;
                            color: #5b5b5b;
                            font-size: 1.4rem;
                            font-weight: 700;
                            line-height: 1.6;
                            @media screen and (min-width: 768px) {
                                font-size: 1.6rem;
                            }
                        }

                        .flow-step-items-note {
                            margin: 0;
                            color: #5b5b5b;
                            font-size: 1.2rem;
                            line-height: 1.6;
                            @media screen and (min-width: 768px) {
                                font-size: 1.4rem;
                            }
                        }
                    }
                }
            }

            .flow-step-pay {
                margin: 1rem 0;
                color: #5b5b5b;
                font-size: 1.4rem;
                line-height: 1.9;
                @media screen and (min-width: 768px) {
                    font-size: 1.6rem;
                }
            }
        }
    }
}

/* ------------------------------------------- */
/* schedule */
/* ------------------------------------------- */
#schedule {
    padding: 6rem 0;
    background: #fff;
    .schedule-wrap {
        padding: 0;
    }
    .schedule-title {
        margin: 0 0 1rem;
        padding: 0;
        color: #00899b;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0.06em;
        text-align: center;
        @media screen and (min-width: 768px) {
            font-size: 2.8rem;
        }
    }
    .schedule-lead {
        margin: 0 0 4rem;
        padding: 0;
        color: #5b5b5b;
        font-size: 1.4rem;
        line-height: 1.6;
        text-align: center;
        letter-spacing: 0.06em;
        @media screen and (min-width: 768px) {
            font-size: 1.6rem;
        }
    }

    .schedule-block {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 2rem;
        align-items: stretch;
        margin-bottom: 2.4rem;
        padding: 0;
        background: #fff;

        &:last-of-type {
            margin-bottom: 2.4rem;
        }
    }

    .schedule-side {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        justify-self: start;
        gap: 0.2rem;
        width: 6.6rem;
        margin: 0;
        padding: 2rem 0.6rem;
        border-radius: 0.6rem;
        background: #dbeef1;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0.12em;
        text-align: center;
        letter-spacing: 0.06em;
        color: #00899b;
        @media screen and (min-width: 768px) {
            font-size: 1.8rem;
            width: 7.6rem;
        }
        & span {
            display: block;
        }
    }

    .schedule-main {
        min-width: 0;
        padding: 0;
    }

    .schedule-venue {
        margin-bottom: 2rem;

        &:last-of-type {
            margin-bottom: 0;
        }

        .schedule-venue-title {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin: 0 0 0.4rem;
            font-size: 1.6rem;
            font-weight: 500;
            line-height: 1.6;
            letter-spacing: 0.06em;
            color: #00899b;
            &::before {
                content: "";
                flex-shrink: 0;
                width: 0.5rem;
                height: 0.5rem;
                border-radius: 50%;
                background: #208e9b;
            }
            @media screen and (min-width: 768px) {
                font-size: 1.8rem;
            }
        }

        .schedule-venue-time {
            margin: 0 0 0.8rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px dotted #4db6ac;
            color: #5b5b5b;
            font-size: 1.2rem;
            line-height: 1.6;
            @media screen and (min-width: 768px) {
                font-size: 1.4rem;
            }
        }

        .schedule-dates {
            display: flex;
            gap: 2rem;

            .schedule-dates-col {
                flex: 1;
                margin: 0;
                padding: 0;
                list-style: none;

                & li {
                    color: #5b5b5b;
                    font-size: 1.4rem;
                    line-height: 2;
                    @media screen and (min-width: 768px) {
                        font-size: 1.6rem;
                    }
                }
            }
        }

        .schedule-note {
            margin: 1.4rem 0 0;
            color: #5b5b5b;
            font-size: 0.9rem;
            line-height: 1.7;
            @media screen and (min-width: 768px) {
                font-size: 1.4rem;
            }
        }
    }

    .schedule-note-block {
        margin: 1.6rem 0 0;
        color: #5b5b5b;
        font-size: 1.1rem;
        line-height: 1.6;
        font-weight: 300;
        letter-spacing: 0.06em;
        color: #5b5b5b;
        @media screen and (min-width: 768px) {
            font-size: 1.4rem;
        }
    }

    .schedule-simple {
        margin-bottom: 2rem;
        padding: 1.5rem 2rem;
        border-radius: 0.8rem;

        &:last-child {
            margin-bottom: 0;
        }

        .schedule-simple-title {
            margin: 0 0 0.8rem;
            font-size: 1.6rem;
            font-weight: 700;
            line-height: 1.4;
            @media screen and (min-width: 768px) {
                font-size: 1.8rem;
            }
        }

        .schedule-simple-text {
            margin: 0;
            font-size: 1.4rem;
            line-height: 1.8;
            font-weight: 400;
            letter-spacing: 0.06em;
            color: #5b5b5b;
            @media screen and (min-width: 768px) {
                font-size: 1.6rem;
            }
        }
    }

    .schedule-simple-intro {
        background: #e0edd0;

        .schedule-simple-title {
            color: #3c8d58;
        }

        .schedule-simple-text {
            color: #5b5b5b;
        }
    }

    .schedule-simple-master {
        background: #fce4d6;

        .schedule-simple-title {
            color: #da6854;
        }

        .schedule-simple-text {
            color: #5b5b5b;
        }
    }
}

/* ------------------------------------------- */
/* faq */
/* ------------------------------------------- */
#faq {
    padding: 6rem 0;
    background: #fff;
    .section-label {
        font-style: normal;
        font-weight: 700;
        font-size: 2.4rem;
        line-height: 160%;
        text-align: center;
        letter-spacing: 0.06em;
        color: #00899b;
        margin-bottom: 4rem;
        @media screen and (min-width: 768px) {
            font-size: 2.8rem;
        }
    }

    .faq-list {
        margin: 0;
    }

    .faq-item {
        margin-bottom: 1rem;
        @media screen and (min-width: 768px) {
            margin-bottom: 2rem;
        }
        &:first-child {
            padding-top: 0;
        }

        &:last-child {
            padding-bottom: 0;
            border-bottom: none;
        }
    }

    .faq-item dt,
    .faq-item dd {
        display: flex;
        gap: 1rem;
        margin: 0;
        font-size: 1.4rem;
        line-height: 1.6;
        padding: 1rem;
        @media screen and (min-width: 768px) {
            font-size: 1.6rem;
            padding: 1.6rem;
        }
    }

    .faq-item dt {
        position: relative;
        background-color: #d9f0f3;
        border-radius: 0.6rem;
        color: #00899b;
        font-weight: 700;
        padding-right: 4.8rem;
        cursor: pointer;
    }

    .faq-item dd {
        display: none;
        color: #5b5b5b;
    }

    .faq-item.is-open dd {
        display: flex;
    }

    .faq-question-text {
        flex: 1;
        min-width: 0;
    }

    .faq-toggle {
        position: absolute;
        top: 50%;
        right: 1.6rem;
        width: 1.6rem;
        height: 1.6rem;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
    }

    .faq-item.is-open .faq-toggle {
        transform: translateY(-50%) rotate(180deg);
    }

    .faq-toggle-bar {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1.6rem;
        height: 0.2rem;
        background: #00899b;
        transform: translate(-50%, -50%);
    }

    .faq-toggle-bar.is-vertical {
        transform: translate(-50%, -50%) rotate(90deg);
        transition: opacity 0.3s ease;
    }

    .faq-item.is-open .faq-toggle-bar.is-vertical {
        opacity: 0;
    }

    .faq-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 50%;
        font-size: 1.3rem;
        font-weight: 700;
        line-height: 1;
        @media screen and (min-width: 768px) {
            font-size: 1.5rem;
        }
    }
    .faq-item dd {
        .answer {
            font-weight: 400;
            font-size: 1.4rem;
            line-height: 180%;
            letter-spacing: 0.06em;
            color: #5b5b5b;
            @media screen and (min-width: 768px) {
                font-size: 1.6rem;
            }
        }
    }
    .faq-icon-a,
    .faq-icon-q {
        font-family: var(--jost);
        font-style: normal;
        font-weight: 500;
        font-size: 2rem;
        line-height: 160%;
        letter-spacing: 0.06em;
        color: #00899b;
        vertical-align: top;
        @media screen and (min-width: 768px) {
            font-size: 2.2rem;
        }
    }
}

/* ------------------------------------------- */
/* contact */
/* ------------------------------------------- */
#contact {
    .contact-head {
        padding: 2rem 0;
        /* background: #f5f1e7; */
        .section-label {
            margin-bottom: 1rem;
            font-style: normal;
            font-weight: 700;
            font-size: 2.4rem;
            line-height: 160%;
            text-align: center;
            letter-spacing: 0.06em;
            color: #00899b;
            @media screen and (min-width: 768px) {
                font-size: 2.8rem;
            }
        }
        .description {
            font-style: normal;
            font-weight: 400;
            font-size: 1.2rem;
            line-height: 160%;
            text-align: center;
            letter-spacing: 0.06em;
            color: #5b5b5b;
            margin-bottom: 3.1rem;
            @media screen and (min-width: 768px) {
                font-size: 1.4rem;
            }
        }
    }

    .contact-body {
        min-height: 8rem;
        padding: 0 0 4rem;
        .nocover-body {
            background: #f5f1e7 !important;
        }
        .formrun-embed {
            /* border-bottom: 1px solid #ddd; */
            padding-bottom: 3rem;
        }
    }
}

/* ------------------------------------------- */
/* footer */
/* ------------------------------------------- */
#footer {
    position: relative;
    padding: 3rem 0 9.5rem;
    background: #fff;
    @media screen and (min-width: 766px) {
        padding: 3rem 0 3rem;
    }
    .footer-inner {
        width: calc(100% - 3rem);
        max-width: 37.5rem;
        margin: 0 auto;
        text-align: center;
    }

    .footer-logo {
        margin: 0 0 0.5rem;

        & img {
            display: inline-block;
            width: 7.4rem;
        }
    }
    .f-text {
        font-style: normal;
        font-weight: 400;
        font-size: 0.7rem;
        line-height: 180%;
        letter-spacing: 0.04em;
        color: #5b5b5b;
        margin-bottom: 0.5rem;
        @media screen and (min-width: 768px) {
            font-size: 1.4rem;
        }
    }
    .footer-copy {
        font-style: normal;
        font-weight: 300;
        font-size: 0.7rem;
        line-height: 180%;
        text-align: center;
        letter-spacing: 0.04em;
        color: #5b5b5b;
        @media screen and (min-width: 768px) {
            font-size: 1.2rem;
        }
    }
    .pageup {
        position: fixed;
        right: 1.6rem;
        bottom: 1.6rem;
        z-index: 100;
        display: none;
        width: 4.4rem;
        height: 4.4rem;
        border-radius: 50%;
        background: #208e9b;
        box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
        text-indent: -9999px;
        overflow: hidden;

        &::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 1rem;
            height: 1rem;
            margin: -0.3rem 0 0 -0.5rem;
            border-top: 0.2rem solid #fff;
            border-left: 0.2rem solid #fff;
            transform: rotate(45deg);
        }
    }
}

/* ------------------------------------------- */
/* SP fixed CTA */
/* ------------------------------------------- */
.sp-fixed-cta {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    width: min(50rem, 100%);
    padding: 0;
    box-sizing: border-box;
    transform: translateX(-50%);
    pointer-events: none;

    @media screen and (min-width: 768px) {
        display: none;
    }

    .sp-fixed-cta-btn {
        display: inline-flex;
        flex-direction: column;
        gap: 0.6rem;
        width: 17.1rem;
        height: 7.5rem;
        border-radius: 1.2rem 1.2rem 0 0;
        box-sizing: border-box;
        text-decoration: none;
        pointer-events: auto;
        padding: 0.8rem 0.8rem 0;
        transition: 0.3s all ease-in;
        .sp-fixed-cta-label {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 2rem;
            padding: 0.3rem 1rem;
            border-radius: 1.3rem;
            background: #fff;
            font-size: 1rem;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.02em;
            white-space: nowrap;
            width: 100%;
        }

        .sp-fixed-cta-text {
            color: #fff;
            font-size: 1.3rem;
            font-weight: 700;
            line-height: 1.35;
            letter-spacing: 0.04em;
            text-align: center;
            min-height: 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        &.sp-fixed-cta-briefing {
            background: #f3837c;
            box-shadow: 0.2rem 0.3rem 0 #d05048;

            &:hover {
                transform: translate(0.2rem, 0.3rem);
                box-shadow: 0 0 0 #d05048;
            }

            .sp-fixed-cta-label {
                color: #f3837c;
            }
        }

        &.sp-fixed-cta-line {
            background: #06c755;
            box-shadow: 0.2rem 0.3rem 0 #05863a;

            &:hover {
                transform: translate(0.2rem, 0.3rem);
                box-shadow: 0 0 0 #05863a;
            }

            .sp-fixed-cta-label {
                color: #06c755;
            }
        }
    }
}