/* card */
.card__lists--3cols {
    flex-wrap: wrap;
    gap: 31rem 0;
    margin-bottom: 112rem;
}

.card__lists--3cols .card__list {
    width: 320rem;
}

.card__list {
    justify-content: flex-start;
}

.card__heading {
    margin: 16rem 0 9rem;
    line-height: 1.5;
}

.card__heading+.text {
    margin: 0 0 13rem;
    font-size: 14rem;
}

.card__list .btn__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 4rem;
    margin-top: auto;
}

.btn__wrapper .btn--download {
    width: 150rem;
    height: 50rem;
    font-size: 14rem;
    font-weight: 600;
}

.btn__wrapper .btn--more p {
    letter-spacing: .08em;
}

@media screen and (max-width: 767.9px) {
    .card__lists--3cols {
        align-items: center;
        margin-bottom: 51rem;
    }
}

/* CAD */
.cad__wrapper {
    background-color: #F2F0F0;
    border-radius: 10rem;
    color: var(--color-green);
    padding: 10rem 20rem 20rem;
    font-weight: 600;
    margin-bottom: 16rem;
}

.cad__wrapper .btn__wrapper--cad {
    justify-content: flex-end;
    gap: 20rem;
    padding-right: 0;
}

.cad__title {
    display: flex;
    align-items: center;
    gap: 10rem;
    margin-bottom: 10rem;
}

.cad__title::after {
    content: "";
    margin-top: -3rem;
    width: 11rem;
    height: 17rem;
    background: url(/common/img/icon_download_green.svg) center / contain no-repeat;
}

.cad__wrapper .btn {
    background-color: var(--color-white);
    border-radius: 50rem;
    border: 1px solid var(--color-green);
    width: 80rem;
    height: 50rem;
    font-size: 14rem;
    transition: all .4s;
}

.cad__wrapper .btn:hover {
    background-color: var(--color-green);
    color: var(--color-white);
    opacity: 1;
}

/* table */
.mat__table {
    border-collapse: collapse;
}

.mat__table td,
.mat__table th {
    border-bottom: 1px solid var(--color-gray-lighter);
}

/* pageMenu */
.pageMenu {
    background-color: var(--color-green-light);
}

/* matPages */
.matPages .details {
    margin-bottom: 78rem;
}

.matPages .details section {
    padding: 0 0 42rem;
}

.matPages .btn--dlWhite {
    margin: 89rem 0 71rem auto;
}

.matPages .details .bold {
    font-size: 16rem;
}

.matPages .details .bold+.text:not(:last-child) {
    margin-bottom: 32rem;
}

.matPages .details .card__list .text {
    font-size: 16rem;
}

.matPages .details .card__list img {
    margin-top: 8rem;
}

.matPages .details .card__lists--4cols {
    margin-top: 31rem;
}

.matPages .mat__table {
    margin-top: -13rem;
}

.matPages .mat__table th {
    padding: 13rem 145rem 11rem 0;
}

.matPages .mat__table td {
    padding: 13rem 0 11rem 0;
}

.matPages .cad__wrapper {
    margin-top: 7rem;
}

.matPages .details .btn__wrapper--cad {
    justify-content: center;
    gap: 30rem;
}

.matPages .details .movieBtn[href="#"] {
    display: none;
}

.matPages .details .movieBtn {
    margin: 40rem auto 100rem;
    line-height: 1.5;
}

.matPages .details .movieBtn::after {
    top: 38%;
}
.matPages .details .movieSection{
    width: 100vw;
    margin-left: calc((100% - 100vw)/2);
    margin-bottom: 70rem;
}

@media screen and (max-width: 767.9px) {
    .matPages .details {
        margin-bottom: 36rem;
    }

    .matPages .btn--dlWhite {
        margin: 47rem auto 51rem;
    }

    .matPages .details section {
        padding: 0 0 22rem;
    }

    .matPages .details .card__lists--2cols {
        gap: 18rem;

    }

    .matPages .details .card__lists--4cols {
        align-items: center;
    }

    .matPages .mat__table th {
        padding: 13rem 22rem 11rem 0;
        transform: translateX(-10px);
        vertical-align: baseline;
    }

    .matPages .details .movieBtn {
        margin: 18rem auto 40rem;
    }

}

/* movieSection */
.movieSection {
    background-color: var(--color-green-light);
    padding-bottom: 50rem;
}

.movieSection .text {
    font-size: 20rem;
    text-align: center;
    padding: 42rem 0 29rem;
}

.movieSection iframe {
    display: block;
    margin: 0 auto;
    border: none;
}

@media screen and (max-width: 767.9px) {
    .movieSection .text {
        padding: 42rem 20rem 38rem;
    }

    .movieSection iframe {
        width: 335rem;
        height: 189rem;
    }
}

/* btn--bottom */

.btn--bottom {
    margin: 80rem auto 50rem;
}

@media screen and (max-width: 767.9px) {
    .btn--bottom {
        margin: 50rem auto 32rem;
    }
}