@charset "utf-8";
/* ivents */

/* header */
.logo img {
    max-width: 40%;
}

.nav__item {
    color: var(--primary-black);
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: 0.2rem;
}

.header {
    position: relative;
}

/* projects lesson*/
.projects h1 {
    margin-top: -58px;
}

.subTitle {
    line-height: 1;
    text-align: center;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.subTitle::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 40px;
    background-color: var(--primary-blue);
    margin: 0 auto 0;
}

.text16--lesson {
    text-align: center;
    margin: 60px 0;
}

.lesson__detail {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 100px 6%;
    justify-content: center;
}

.lesson__detail img {
    width: 35%;
}

.eachLesson {
    display: flex;
    flex-direction: column;
    max-width: 35%;
    align-items: flex-start;
}

.lessonTitle {
    color: var(--primary-black);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.5;
    letter-spacing: 0.2;
}

.text16--lessonTxt {
    margin: 68px 0 26px;
}

.eachLesson--seirinkai {
    margin: 0 auto;
}

.btn {
    margin: 100px auto 0;
}

/* lesson SP < 768 */
@media screen and (max-width: 768px) {
    .hamburger span {
        background-color: var(--primary-black);
    }

    .nav__item {
        color: white;
        font-weight: 400;
        letter-spacing: 0.4rem;
    }

    .projects h1 {
        margin-top: -26px;
    }

    .subTitle--lesson {
        margin-top: 60px;
    }

    .subTitle::after {
        height: 30px;
    }

    .text16--lesson {
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 2.5;
        letter-spacing: 0.15rem;
        margin: 60px 5% 0;
        text-align: left;
    }

    .lesson__detail {
        flex-direction: column;
        gap: 20px;
        padding: 0;
    }

    .lesson__detail img {
        width: 100%;
    }

    .eachLesson {
        max-width: 100%;
        display: block;
    }

    .text16--lessonTxt {
        margin-top: 26px;
    }

    .lessonImg {
        padding: 100px 5% 20px;
    }

    .eachLesson p {
        padding: 0 10%;
    }

    .lessonTitle {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .lessonTitle::before {
        content: "";
        display: inline-block;
        width: 32px;
        height: 1px;
        background-color: var(--primary-black);
        top: 0;
        left: 0;
    }

    .eachLesson--seirinkai {
        padding-top: 48px;
    }

}

/* projects workshop*/

.subTitle--workshop {
    margin-top: 80px;
}

.subTitle--workshop::after {
    background-color: var(--primary-green);
}

.text16--workshop {
    text-align: right;
}

.workshop__copy {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14%;
    margin: 80px auto;
}

.workshop__txt {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10%;
    margin: 100px auto;
    justify-content: center;
}

.text14--workshop,
.text14--exampleText {
    width: 30%;
}

.exampleText {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
    margin: 80px auto;
}

.exampleTitle {
    color: var(--primary-black);
    text-align: center;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.2;
    letter-spacing: 0.2rem;
}

.exampleCopy {
    color: var(--primary-black);
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 2.5;
    letter-spacing: 0.15rem;
    text-align: center;
    margin-top: 20px;
}

.workshop__example {
    padding: 80px;
    margin: 15% 0 0;
    background-color: var(--primary-lightGreen);
}

.btn {
    width: 324px;
}

.workshop__copy picture {
    width: 20%;
}

.workshop__txt picture {
    width: 26%;
}

.exampleText picture {
    width: 24%;
}

/* workshop SP < 768 */
@media screen and (max-width: 768px) {
    .workshop__copy {
        margin: 40px 5%;
        display: flex;
        flex-direction: column-reverse;
    }

    .text16--workshop {
        text-align: left;
    }

    .workshop__txt {
        margin: 40px 5%;
        display: flex;
        flex-direction: column-reverse;
    }

    .workshop__copy picture {
        width: 30%;
        margin-left: auto;
    }

    .workshop__txt picture {
        width: 40%;
        margin-left: auto;
    }

    .workshop__example {
        padding: 60px 6% 40px;
        margin: 40px 0;
    }

    .exampleText {
        margin: 60px auto;
        flex-direction: column-reverse;
    }

    .exampleText picture {
        text-align: center;
        margin-top: 80px;
        width: 70%;
    }

    .text14--workshop,
    .text14--exampleText {
        width: 100%;
    }

    .btn {
        width: 200px;
    }
}