@charset "utf-8";

.sec-intro {
    margin-bottom: 150px;
}

.sec-main {
    overflow-x: hidden;
    margin-bottom: 160px;
}

.classlist {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.class {
    position: relative;
    z-index: 5;
}

.class::before {
    content: "";
    position: absolute;
    width: 100svw;
    height: 100%;
    border-radius: 80px 0px 0px 80px;
    background: #fffeea;
    left: 0;
    top: 0;
    z-index: -1;
}

.class .inner {
    padding: 100px 6vw 100px 3vw;
}

.class .title {
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 40px;
}

.class .title .num {
    font-family: var(--eng);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: #d32e26;
    margin-top: 21px;
}

.class .title .class-ttl {
    font-family: var(--main);
    font-weight: 700;
    font-size: 48px;
    font-size: clamp(2rem, 1.757rem + 1.04vw, 3rem);
    letter-spacing: 0.08em;
    color: #000;
}

.class .inner>.desc {
    margin-bottom: 80px;
}

.features-table {
    background-color: #FFF;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 20px;
    gap: 2px;
    margin-bottom: 80px;
}

.features-table .item {
    display: flex;
    flex-direction: column;
}

.features-table .item:first-child .thead {
    border-radius: 20px 0 0 0;
}


.features-table .item:last-child .thead {
    border-radius: 0 20px 0 0;
}

.features-table .item .thead {
    background: #489fe4;
    text-align: center;
    font-family: var(--main);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.08em;
    line-height: 40px;
    text-align: center;
    color: #fff;
}

.features-table .item .tbody {
    display: table;
    height: 100%;
    font-family: var(--main);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 24px;
    text-align: center;
    color: #000;

}

.features-table .item .tbody p {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    padding: 17px 0;
    word-break: auto-phrase;
}

.about {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 5%;
    margin-bottom: 80px;
}

.about .text {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
}

.about .text .ttl {
    font-family: var(--main);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.08em;
    color: #212121;
    padding-bottom: 24px;
    position: relative;
}

.about .text .ttl::before {
    content: "";
    width: 24px;
    height: 24px;
    background: #d32e26;
    border-radius: 50px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 8px;
}

.about .text .ttl::after {
    content: "";
    vertical-align: sub;
    margin-right: 8px;
    background-size: 100% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(to right, #c84a3b, #c84a3b 8px, transparent 8px, transparent 16px);
}

.about .text .desc p {
    font-size: 16px;
    letter-spacing: 0.04em;
    line-height: 26px;
    color: #212121;
}

.movie,
.flow {
    margin-bottom: 80px;
}

.flow {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.movie iframe {
    width: 100%;
    border-radius: 20px;
    height: 583px;
}

.flow .ttl {
    font-family: var(--main);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.08em;
    color: #212121;
    position: relative;
}

.flow .ttl::before {
    content: "";
    width: 24px;
    height: 24px;
    background: #F2E300;
    border-radius: 50px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 8px;
}

.flow .column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4%;
}

.flow .column .item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flow .column .item .icon {
    width: 74px;
    height: 73px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.flow .column .item .sub-ttl {
    font-family: var(--main);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.08em;
    line-height: 40px;
    text-align: center;
    color: #212121;
    margin-bottom: 16px;
}

.flow .column .item .desc p {
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 20px;
}



.genre>.ttl {
    font-family: var(--main);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.08em;
    color: #212121;
    position: relative;
    margin-bottom: 32px;
}

.genre>.ttl::before {
    content: "";
    width: 24px;
    height: 24px;
    background: #489FE4;
    border-radius: 50px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 8px;
}

.genre .box {
    border-radius: 30px;
    box-shadow: inset 16px 8px 0px rgba(0, 0, 0, 0.08);
    color: #FFF;
    background: #489fe4;
    margin-bottom: 16px;
}

.genre .box:last-child {
    margin-bottom: 0;
}

.genre .box .box-inner {
    padding: 32px 88px;
}

.genre .box .box-ttl {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
}

.genre .box .box-ttl .num {
    font-family: var(--eng);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: #fdf250;
}

.genre .box .box-ttl .main {
    font-family: var(--main);
    font-weight: 700;
    font-size: 32px;
    font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
    letter-spacing: 0.08em;
    color: #fff;
}

.genre .box .desc {
    margin-bottom: 24px;
}

.genre .box .desc p {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    line-height: 24px;
    color: #fff;
}

.genre .box .recommend {
    border-radius: 20px;
    background: #fff;
    padding: 32px 88px;
}

.genre .box .recommend .ttl {
    font-family: var(--main);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    color: #212121;
}

.genre .box .recommend .ttl::before {
    background: #c84a3b;
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 50px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 8px;
}

.genre .box .recommend .tags {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 8px 4%;
    font-family: var(--main);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #212121;
}

@media (max-width: 1200px) {
    .sidemenu .select-trigger {
        border-radius: 20px;
    }

    .sidemenu.is-open .select-trigger {
        border-radius: 20px 20px 0 0;
    }
}

@media (max-width: 960px) {
    .sec-intro {
        margin-bottom: 40px;
    }

    .class .title .class-ttl {
        align-items: flex-end;
    }

    .features-table {
        display: flex;
        flex-direction: column;
    }



    .features-table .item {
        display: grid;
        grid-template-columns: 40% 1fr;
    }

    .features-table .item:last-child .thead {
        border-radius: 0 0 0 20px;
    }

    .features-table .item .thead {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .about {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .movie iframe {
        height: 300px;
    }

    .flow .column {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .genre .box {
        box-shadow: inset 8px 8px 0px rgba(0, 0, 0, 0.08);
    }

    .genre .box .box-inner {
        padding: 32px 20px;
    }

    .genre .box .recommend {
        padding: 32px 20px;
    }

    .genre .box .recommend .tags {
        grid-template-columns: 1fr;
    }

    .sec-main {
        margin-bottom: 0;
    }

    .class::before {
        border-radius: 40px;
    }

    .class .inner {
        padding: 100px 0;
        width: 90%;
        margin: 0 auto;
    }




}