.genre_lesson_container {
    width: 100%;
    overflow-x: auto;
    font-weight: 700;
    & a {
        text-decoration: none;
    }

    /* level */
    & .other_lesson_list {
        width: 100%;
        display: grid;
        grid-template-columns: auto repeat(5, minmax(164px, 1fr)) !important;
        gap: 0px !important;

        & .line_label {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            text-align: center;
            padding: 0 !important;
        }

        & .lesson_cell {
            border-left: 1px dashed #ed837c;
            border-bottom: 1px dashed #ed837c;
            padding: 10px;
        }

        & .lesson_cell:nth-child(6n + 1)
        {
            border-left: none;
        }

        & .lesson_cell:nth-last-child(-n+6) {
            border-bottom: none;
        }
    }

    & .label_level_container {
        height: auto !important;
        display: flex;
        min-width: 140px;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    & .other_lesson_div {
        height: 81px;
        text-align: center;
        margin-left: 15px;
        margin-right: 15px;
    }

    & .label_level_genre_page_1 {
        background-color: #e5c1c1;
        border-radius: 10px 0 0 10px;
        margin-left: 0px;
        &::before {
            content: "";
            position: absolute;
            right: -19px;
            top: 0;
            width: 20px;
            height: 100%;
            background: inherit;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
    }

    & .label_level_genre_page_2 {
        background-color: #e5b1b1;

        &::after {
            content: "";
            position: absolute;
            left: -19px;
            top: 0;
            width: 20px;
            height: 100%;
            background: inherit;
            clip-path: polygon(
                    100% 0,
                    100% 50%,
                    100% 100%,
                    0% 100%,
                    99% 50%,
                    0% 0%
            );
        }
        &::before {
            content: "";
            position: absolute;
            right: -19px;
            top: 0;
            width: 20px;
            height: 100%;
            background: inherit;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
    }

    & .label_level_genre_page_3 {
        background-color: #e5a3a3;

        &::after {
            content: "";
            position: absolute;
            left: -19px;
            top: 0;
            width: 20px;
            height: 100%;
            background: inherit;
            clip-path: polygon(
                    100% 0,
                    100% 50%,
                    100% 100%,
                    0% 100%,
                    99% 50%,
                    0% 0%
            );
        }
        &::before {
            content: "";
            position: absolute;
            right: -19px;
            top: 0;
            width: 20px;
            height: 100%;
            background: inherit;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
    }
    & .label_level_genre_page_4 {
        background-color: #e5918f;

        &::after {
            content: "";
            position: absolute;
            left: -19px;
            top: 0;
            width: 20px;
            height: 100%;
            background: inherit;
            clip-path: polygon(
                    100% 0,
                    100% 50%,
                    100% 100%,
                    0% 100%,
                    99% 50%,
                    0% 0%
            );
        }
        &::before {
            content: "";
            position: absolute;
            right: -19px;
            top: 0;
            width: 20px;
            height: 100%;
            background: inherit;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
    }
    & .label_level_genre_page_5 {
        background-color: #ed837c;
        border-radius: 0 10px 10px 0;
        margin-right: 0px;

        &::after {
            content: "";
            position: absolute;
            left: -19px;
            top: 0;
            width: 20px;
            height: 100%;
            background: inherit;
            clip-path: polygon(
                    100% 0,
                    100% 50%,
                    100% 100%,
                    0% 100%,
                    99% 50%,
                    0% 0%
            );
        }
    }

    & .other_lesson_div .title {
        font-weight: bold;
        display: inline-block;
        position: relative;
        text-decoration: underline;
        text-underline-offset: 8px;
    }

    & .other_lesson_div .level_label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        height: 80px;
        word-break: keep-all;
        overflow-wrap: break-word;
        text-align: center;

        & .desc {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            line-height: 17px;
            padding: 3px 0;
        }
    }

    & .other_lesson_div .level_label.label_jp {
        font-size: 13px;
        height: 60px;
        width: 140px;
    }

    & .lesson_item_image_container {
        position: relative;

        & .lesson_viewing {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            & span {
                background: rgba(0, 0, 0, 0.6);
                color: white;
                height: 70px;
                width: 70px;
                border-radius: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }

    & .other_lesson_container {
        min-height: 550px;
        display: flex;
    }

    & .other_lesson_container {
        &  .lesson_box {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease-in-out;
            background: white;
            border-width: 0;
            display: flex;
            flex-direction: column;
            flex: 1;

            & .view-more-btn {
                margin-top: auto;
            }

            &:hover {
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            }

            & .image .square .inner img {
                width: 100%;
                height: auto;
                border-bottom-left-radius: unset;
                border-bottom-right-radius: unset;
                aspect-ratio: 1;
                object-fit: cover;
            }
        }

        & .other_lesson_teacher {
            display: flex;
            align-items: center;
            position: relative;
            margin-left: 10px;

            & .icon img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                position: absolute;
                top: -60%;
                background-color: white;
                object-fit: cover;
            }

            & .name {
                margin-left: 45px;
                font-size: 14px;

                & a {
                    font-weight: bold;
                    color: #333;
                    text-decoration: none;
                }
            }
        }

        & .other_lesson_title {
            padding: 10px;
            font-size: 16px;
            font-weight: bold;

            & a {
                color: #ed837c !important;
                word-wrap: break-word;
                white-space: normal;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 50px;
                font-size: 11pt;
                line-height: 13pt;
            }
        }

        & .other_lesson_info {
            padding: 10px;
            font-size: 14px;
            color: #555;
            display: flex;
            flex-direction: column;
            gap: 5px;
            min-height: 230px !important;
            & div {
                display: flex;
            }
            & img {
                width: 25px;
                height: 25px;
            }
            & span {
                font-weight: bold;
                margin-left: 5px;
            }

            & p {
                margin: unset;
            }
        }
    }

    & .other_lesson_btn_view_more {
        padding: 10px 0 10px 25px;
        width: 130px;
        height: 30px;
        background-color: #ed837c;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        font-size: 11px;
        gap: 10px;
        border: none;

        & .text {
            color: #fff;
            font-size: 13px;
        }

        & img {
            margin-left: 8px;
            margin-right: 8px;
            width: 10px;
        }
    }

    & .level-box {
        display: inline-block;
        background: #deb2b2;
        font-family: Arial, sans-serif;
        clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 51%, 0% 0%);
        border-radius: 10px;
        text-align: center;
        font-size: 13px;
        width: 100%;
        height: 80px;

        & .title {
            font-weight: bold;
            margin-bottom: 5px;
            text-decoration: underline;
            width: 100%;
            color: #000;
        }
    }

    & .level_content {
        position: relative;
    }

    & .lesson_view_more_link {
        padding: 6px 15px;
        background-color: #ED837C;
        border-radius: 30px;
        color: white;
        font-size: 14px;
        line-height: 18px;
        text-align: center;
        -moz-text-align-last: center;
        text-align-last: center;
        & * {
            color: white;
        }
    }
}

@media (max-width: 1024px) {
    .genre_lesson_container {
        & .other_lesson_list .genre_lesson_container .other_lesson_child:nth-child(even) .genre_lesson_container .level_content::after {
            display: block !important;
        }
    }
    .sp {
        display: inherit;
    }
}

@media (max-width: 568px) {
    .genre_lesson_container {
        & .lesson_view_more_link {
            font-size: 11px;
            padding: 6px 4px;
        }
    }
}