@charset "UTF-8";

#main-contents,
.main-contents {
    padding-bottom: 17rem;

    @media screen and (max-width: 767px) {
        padding-bottom: 8rem;
    }

    .wrapper {
        display: flex;
        align-items: center;
        gap: 12rem;

        @media screen and (max-width: 767px) {
            flex-direction: column;
            gap: 4rem;
        }


        .img {
            flex-shrink: 0;
            width: 80rem;
            border-radius: 0 8rem 0 0;
            overflow: hidden;

            @media screen and (max-width: 767px) {
                margin-left: -2.4rem;
                width: calc(100% + 2.4rem);
                border-radius: 0 3.6rem 0 0;
            }
        }

        .text {

            .main {
                margin-bottom: 3.6rem;
                font-style: normal;
                font-weight: 600;
                font-size: 3.2rem;
                line-height: 160%;
                letter-spacing: 0.05em;
                color: #000000;

                @media screen and (max-width: 767px) {
                    margin-bottom: 1.6rem;
                    font-size: 1.8rem;
                }
            }

            .sub {
                font-style: normal;
                font-weight: 400;
                font-size: 1.8rem;
                line-height: 200%;
                letter-spacing: 0.1em;
                color: #000000;

                @media screen and (max-width: 767px) {
                    font-size: 1.4rem;
                }
            }
        }
    }
}

.teaching {
    padding-bottom: 15rem;

    @media screen and (max-width: 767px) {
        padding-bottom: 8rem;
    }

    .title {
        margin-bottom: 10rem;

        @media screen and (max-width: 767px) {
            margin-bottom: 4.3rem;
        }
    }

    .img-area {
        display: flex;
        flex-wrap: wrap;
        column-gap: 8.2rem;
        row-gap: 8rem;

        @media screen and (max-width: 767px) {
            column-gap: 4rem;
            row-gap: 3rem;
        }

        .img-wrapper {
            width: calc((100% - 8.2rem) / 2);

            @media screen and (max-width: 767px) {
                width: 100%;
            }

            .img {
                margin-bottom: 3.4rem;
                width: 100%;
                border-radius: 3rem;
                overflow: hidden;

                @media screen and (max-width: 767px) {
                    margin-bottom: 1.6rem;
                    border-radius: 1.5rem;
                }
            }

            .sub {
                font-style: normal;
                font-weight: 400;
                font-size: 1.6rem;
                line-height: 2.6rem;
                letter-spacing: 0.1em;
                color: #000000;

                @media screen and (max-width: 767px) {
                    font-size: 1.4rem;
                    line-height: 2.4rem;
                }
            }
        }
    }
}

.price {
    padding-bottom: 6.6rem;

    @media screen and (max-width: 767px) {
        padding-bottom: 0;
    }

    .table {
        & table {
            width: 100%;

            & tr {
                border-bottom: 1px solid #B9B9B9;

                @media screen and (max-width: 767px) {
                    display: flex;
                    flex-direction: column;
                }

                & th {
                    padding: 3rem 0 3rem 2.4rem;
                    width: 50.4rem;
                    font-style: normal;
                    font-weight: 600;
                    font-size: 1.6rem;
                    line-height: 180%;
                    letter-spacing: 0.05em;
                    color: #000000;
                    text-align: left;
                    vertical-align: middle;

                    @media screen and (max-width: 767px) {
                        padding: 1.5rem 0 0;
                        width: 100%;
                        font-size: 1.4rem;
                    }
                }

                & td,
                & li,
                & a,
                & p {
                    font-style: normal;
                    font-weight: 400;
                    font-size: 1.6rem;
                    line-height: 180%;
                    letter-spacing: 0.1em;
                    color: #000000;
                    text-align: left;

                    @media screen and (max-width: 767px){
                        font-size: 1.4rem;
                    }
                }

                & td {
                    padding: 3rem 0;
                    vertical-align: middle;

                    @media screen and (max-width: 767px) {
                        padding: 0.7rem 0 1.5rem;
                    }

                    & a[target="_blank"] {
                        text-decoration: underline;

                        @media (hover: hover) and (pointer: fine) {
                            &:hover {
                                text-decoration: none;
                            }
                        }

                        &::after {
                            content: "";
                            display: inline-block;
                            margin-left: 0.3rem;
                            margin-bottom: -0.5rem;
                            width: 2.4rem;
                            height: 2.4rem;
                            background-image: url("../../common/img/parts/out-link.svg");
                            background-size: 100% 100%;
                            background-repeat: no-repeat;

                            @media screen and (max-width: 767px) {
                                width: 2rem;
                                height: 2rem;
                            }
                        }
                    }

                    & li {
                        &.has_indent {
                            padding-left: 1.6rem;

                            @media screen and (max-width: 767px) {
                                padding-left: 1.4rem;
                            }
                        }
                    }
                }

            }
        }
    }
}