@charset "utf-8";


/*-------------------------------------------------------------
common
-------------------------------------------------------------*/
@media only screen and (max-width: 599px) {
    #site_title_logo .site_title {
        display: none;
        opacity: 0;
    }
}


/*-------------------------------------------------------------
MV
-------------------------------------------------------------*/
#seminar_mv {
    padding: 100px 0 0;
    margin-bottom: 90px;
    display: flex;
    justify-content: flex-end;
}
#seminar_mv .mv_inner {
    width: 100%;
    position: relative;
}

#seminar_mv .mv_img {
    width: 2000px;
    max-width: 100%;
}

#seminar_mv .mv_lead {
    width: 662px;
    max-width: 33.2%;
    aspect-ratio: 662 / 513;
    position: absolute;
    top: 7.6dvw;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    padding: 0 2% 2% 0;
    writing-mode: vertical-rl;
}
#seminar_mv .mv_lead .lead_txt {
    display: flex;
    flex-direction: column;
}
#seminar_mv .mv_lead .txt_1 {
    font-size: 1.5rem;
    font-size: 1.1dvw;
    line-height: 1em;
}
#seminar_mv .mv_lead .txt_2 {
    font-size: 2.8rem;
    font-size: 2dvw;
    line-height: 1.25em;
    margin: 0 1.2em 0 1em;
}
#seminar_mv .mv_lead .txt_2 span {
    font-size: 0.4em;
    display: block;
    line-height: 1;
    margin-right: 1em;
    white-space: nowrap;
}
#seminar_mv .mv_lead .txt_3 {
    font-size: 2rem;
    font-size: 1.5dvw;
    line-height: 1em;
    margin-top: auto;
}
#seminar_mv .mv_lead .txt_3 span {
    font-size: 0.65em;
    display: block;
    margin-top: -1.5em;
    margin-left: 0.4em;
}

@media only screen and (max-width: 599px) {
    #seminar_mv {
        padding: 75px 0 0;
        margin-bottom: 16dvw;
    }
    
    #seminar_mv .mv_lead {
        width: 536px;
        max-width: 90%;
        aspect-ratio: 1 / 1;
        top: 71dvw;
        left: 0;
        right: 0;
        margin: auto;
        padding: 0px 3.8% 1.5% 0;
    }
    
    #seminar_mv .mv_lead .txt_1 {
        font-size: 4dvw;
    }
    #seminar_mv .mv_lead .txt_2 {
        font-size: 7.5dvw;
    }
    #seminar_mv .mv_lead .txt_3 {
        font-size: 5.3dvw;
    }
    #seminar_mv .mv_lead .txt_3 span {
        margin-top: -1.2em;
    }
}


/*-------------------------------------------------------------
内容
-------------------------------------------------------------*/
#about {
    padding-bottom: 110px;
}

.catch {
    width: 90%;
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    margin: 0 auto 100px;
}
.catch span {
    line-height: 1.5em;
    display: inline-block;
}

.about_wrap {
    width: 1366px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 130px;
}
.about_wrap .about_cont {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 70px;
}
.about_wrap .about_cont .img_area {
    width: 645px;
    max-width: 47vw;
}
.about_wrap .about_cont .txt_area {
    width: 450px;
    max-width: 41%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.about_wrap .about_cont .txt_area h3 {
    font-size: 2.5rem;
    line-height: 1;
    position: relative;
    display: inline-block;
    margin: 0 auto 1.3em;
    padding-bottom: 0.75em;
}
.about_wrap .about_cont .txt_area h3::after {
    content: "";
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.department_1 .about_wrap .about_cont .txt_area h3::after {
    background: linear-gradient(90deg, #aad2e1, #f9cfcc);
}
.department_2 .about_wrap .about_cont .txt_area h3::after {
    background: linear-gradient(90deg, #fff9b1, #f7c5c6);
}

.about_wrap .about_cont .txt_area p {
    font-size: 1.6rem;
    line-height: 2.1em;
}

.about_wrap .about_cont.about_cont_v2 {
    width: 970px;
    max-width: 90%;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 90px 6%;
}
.about_wrap .about_cont.about_cont_v2 .txt_area {
    width: 47%;
    max-width: 100%;
}
.about_wrap .about_cont.about_cont_v2 .img_area {
    width: 100%;
    max-width: 100%;
}

.about_img_list {
    width: 970px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 3%;
}

@media only screen and (max-width: 1366px) {
    .about_wrap .about_cont {
        gap: 5.7%;
    }
    .about_wrap .about_cont.about_cont_v2 {
        gap: 90px 6%;
    }
}

@media only screen and (max-width: 1024px) {
    .catch {
        font-size: 2rem;
    }
    
    .about_wrap .about_cont {
        gap: 40px;
        flex-direction: column-reverse;
    }
    .about_wrap .about_cont.about_cont_v2 {
        gap: 50px 6%;
        flex-direction: row;
    }
    
    .about_wrap .about_cont .img_area,
    .about_wrap .about_cont .txt_area {
        max-width: 100%;
    }
    
    .about_wrap .about_cont .txt_area h3 {
        font-size: 2rem;
    }

    .about_wrap .about_cont .txt_area p {
        font-size: 1.4rem;
    }
}

@media only screen and (max-width: 599px) {
    #about {
        padding-bottom: 37dvw;
    }

    .catch {
        font-size: 6vw;
        line-height: 1.9em;
        margin: 0 auto 13dvw;
    }
    .catch span {
        display: inline;
    }

    .about_wrap {
        gap: 26dvw;
    }
    .about_wrap .about_cont {
        gap: 13dvw;
    }
    
    .about_wrap .about_cont .txt_area h3 {
        font-size: 6.7dvw;
    }
    
    .about_wrap .about_cont .txt_area p {
        width: 90%;
        font-size: 4dvw;
    }
    
    .about_wrap .about_cont.about_cont_v2 {
        max-width: 100%;
        gap: 13dvw;
        flex-direction: column-reverse;
    }
    .about_wrap .about_cont.about_cont_v2 .txt_area {
        width: 100%;
        max-width: 100%;
    }

    .about_img_list {
        width: 90%;
        flex-direction: column;
        align-items: center;
        gap: 13dvw;
    }
}


/*-------------------------------------------------------------
Voice
-------------------------------------------------------------*/
#voice {
    padding: 150px 0;
}
.department_1 #voice {
    background: linear-gradient(90deg, #aad2e1, #f9cfcc);
}
.department_2 #voice {
    background:linear-gradient(90deg, #fff9b1, #f7c5c6);
}

.voice_inner {
    width: 970px;
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 170px;
}

@media only screen and (max-width: 599px) {
    #voice {
        padding: 24dvw 0;
    }

    .voice_inner {
        gap: 26dvw;
    }
}

.voice_profile {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 50px;
}
.voice_profile .txt_area {
    width: 365px;
    max-width: 38%;
}
.voice_profile .img_area {
    width: 570px;
    max-width: 60%;
}

.voice_ttl_wrap {
    display: flex;
    align-items: flex-end;
    margin-bottom: 50px;
}
.voice_ttl_wrap .voice_ttl {
    width: 185px;
    aspect-ratio: 185 / 60;
    -webkit-mask: url("../img/seminar/text_voice.svg") no-repeat;
    mask: url("../img/seminar/text_voice.svg") no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: #fde3a4;
}
.department_2 .voice_ttl_wrap .voice_ttl {
    background: #f5b1a2;
}
.voice_ttl_wrap .voice_student {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
    margin-left: 0.7em;
    margin-bottom: 0.8em;
}

.voice_name {
    text-align: right;
}
.voice_name .txt_1 {
    font-size: 1.6rem;
}
.voice_name .txt_2 {
    font-size: 2.3rem;
}

.voice_note {
    font-size: 1.5rem;
    text-align: right;
}

@media only screen and (max-width: 1024px) {
    .voice_profile {
        gap: 5%;
    }
    .voice_profile .txt_area {
        max-width: 50%;
    }
    .voice_profile .img_area {
        max-width: 45%;
    }
    
    .voice_ttl_wrap .voice_ttl {
        max-width: 45%;
    }
    
    .voice_ttl_wrap .voice_student {
        font-size: 1.4rem;
    }

    .voice_name .txt_1 {
        font-size: 1.4rem;
    }
    .voice_name .txt_2 {
        font-size: 2rem;
    }
    
    .voice_note {
        font-size: 1.3rem;
    }
}

@media only screen and (max-width: 599px) {
    .voice_profile {
        flex-direction: column;
        gap: 8dvw;
        margin-bottom: 11dvw;
    }
    .voice_profile .txt_area {
        width: 365px;
        max-width: 100%;
    }
    .voice_profile .img_area {
        width: 570px;
        max-width: 100%;
    }

    .voice_ttl_wrap {
        justify-content: center;
        margin-bottom: 13dvw;
    }
    .voice_ttl_wrap .voice_ttl {
        max-width: 49dvw;
    }
    .voice_ttl_wrap .voice_student {
        font-size: 4dvw;
    }
    .voice_ttl_wrap .nb {
        max-width: 6.7dvw;
        margin-right: 3%;
    }

    .voice_name {
        text-align: center;
    }
    .voice_name .txt_1 {
        font-size: 4dvw;
    }
    .voice_name .txt_2 {
        font-size: 6dvw;
    }
    
    .voice_note {
        font-size: 3.5dvw;
    }
}

.faq {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.faq li {
    display: flex;
    justify-content: space-between;
}
.faq li .q_cont {
    width: 45%;
}
.faq li .a_cont {
    width: 52%;
}
.faq li .faq_txt {
    font-size: 1.6rem;
    line-height: 2.1em;
    padding-top: 1.1em;
    padding-left: 5.6em;
    position: relative;
}
.faq li .faq_txt::before {
    content: "";
    width: 5em;
    aspect-ratio: 1 / 1;
    background: #fde3a4;
    position: absolute;
    top: 0;
    left: 0;
}
.faq li .faq_txt.q_cont::before {
    -webkit-mask: url("../img/seminar/text_q.svg") no-repeat;
    mask: url("../img/seminar/text_q.svg") no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.faq li .faq_txt.a_cont::before {
    -webkit-mask: url("../img/seminar/text_a.svg") no-repeat;
    mask: url("../img/seminar/text_a.svg") no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.department_2 .faq li .faq_txt::before {
    background: #f5b1a2;
}

@media only screen and (max-width: 1024px) {
    .faq li .faq_txt {
        font-size: 1.4rem;
    }
}

@media only screen and (max-width: 599px) {
    .faq {
        gap: 24dvw;
    }
    .faq li {
        flex-direction: column;
        gap: 13dvw;
    }
    .faq li .q_cont {
        width: 100%;
    }
    .faq li .a_cont {
        width: 100%;
    }
    .faq li .faq_txt {
        font-size: 4dvw;
        padding-top: 16dvw;
        padding-left: 0;
    }
    .faq li .faq_txt::before {
        width: 15dvw;
        right: 0;
        margin: auto;
    }
}


/*-------------------------------------------------------------
教員紹介
-------------------------------------------------------------*/
#faculty {
    width: 100%;
    padding: 200px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
}

#faculty .txt_area {
    width: 470px;
    max-width: 34.5%;
    border-top: 1px solid #231815;
    border-bottom: 1px solid #231815;
    padding: 45px 0;
    position: relative;
}
#faculty .txt_area .area_ttl {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1;
    display: inline-block;
    background-color: #fff;
    padding-right: 0.3em;
    position: absolute;
    top: -0.6em;
    left: 0;
}
#faculty .txt_area .name {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.2em;
}
#faculty .txt_area .profile {
    font-size: 1.6rem;
    line-height: 2.1em;
}

#faculty .img_area {
    width: 415px;
    max-width: 30.5%;
}

@media only screen and (max-width: 1024px) {
    #faculty {
        flex-direction: column;
    }
    
    #faculty .txt_area {
        max-width: 90%;
    }
    #faculty .txt_area .area_ttl {
        font-size: 1.6rem;
    }
    #faculty .txt_area .name {
        font-size: 1.8rem;
    }
    #faculty .txt_area .profile {
        font-size: 1.4rem;
    }
    
    #faculty .img_area {
        width: 450px;
        max-width: 100%;
    }
}

@media only screen and (max-width: 599px) {
    #faculty {
        padding: 27dvw 0 15dvw;
        gap: 11dvw;
    }
    
    #faculty .txt_area {
        padding: 8dvw 0 7dvw;
    }
    
    #faculty .txt_area .area_ttl {
        font-size: 4.5dvw;
    }
    
    #faculty .txt_area .name {
        font-size: 5dvw;
    }
    #faculty .txt_area .profile {
        font-size: 4dvw;
    }
}