@charset "utf-8";

/*======================
.member-fv
====================== */
.member-fv {
    background-image: url(../images/dodo_png/member-firstView.png);
    padding: 96px 9.6% 32px;
}

/* .member-fv__image{
    width:57%;
    max-width:214px;
    margin-left:auto;
} */

.member-fv__flex {
    flex-direction: column-reverse;
}

.member-fv__subtitle {
    font-size: 1.4rem;
    margin-top: 24px;
}

.member-fv__image{
    max-width:214px;
    margin-left:auto;
}

.benefit{
    max-width:326px;
    margin-top:40px;
    background-image: url(../images/dodo_png/bgi-benefit.png);
    background-size: contain;
    background-position:center;
    background-repeat: no-repeat;
    aspect-ratio: 326/218;
    text-align: center;
    position:relative;
}

/* .benefit {
    text-align: center;
    background-image: url(../images/dodo_png/white-flame.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 78.9%;
    aspect-ratio: 296/156;
    margin: 48px auto 0;
} */

.benefit__topic {
    width: 77.7%;
    max-width: 230px;
    display:block;
    margin:0 auto;
}

.member-fv__benefit {
    text-align: left;
    max-width:270px;
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    padding:8px;
}

.member-fv__benefit p{
    font-size:1.5rem;
    width:270px;
    margin-top:8px;
}

@media screen and (min-width:768px) {

    .member-fv{
        padding:125px 5% 88px 7.2%;
    }

  
    .member-fv__image{
        width:41.9%;
        max-width:604px;
        margin-left:0;
    }
    .member-fv__flex{
        flex-direction: row;
        justify-content: center;
        align-items: center;
        max-width:1260px;
        margin:0 auto;
        gap:8.5%;
    }
    .member-fv__subtitle{
        font-size:2.4rem;
    }

    .benefit__topic{
        max-width:334px;
    }
    /* .member-fv__flex{
        flex-direction: row;
        align-items: flex-start;
        gap:8.3%;
        justify-content: center;
    }
    .member-fv__subtitle{
        font-size:2.4rem;
    }
    .member-fv__image{
        width:45.6%;
        max-width:657px;
        margin-left:initial;
    } */
   
    
}

/*======================
.member-course
====================== */
.member-course {
    padding: 48px 24px;
}

.member-course__topic {
    color: var(--vivid-brown);
}

.member-course__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.member-course__item {
    max-width: 327px;
}

.member-course__topic,
.member-fee {
    text-align: center;
}

.member-course__image,
.member-course__detail {
    margin-top: 24px;
}

.admission-fee {
    width: 100%;
    border-top: 1px solid #000;
    text-align: center;
    padding: 24px 0;
}

.admission-fee h3 {
    font-size: 1.6rem;
}

.admission-fee h4 {
    font-size: 1.4rem;
}

.admission-fee h4:first-child {
    margin-top: 8px;
}


@media screen and (min-width:768px) {
    .admission-fee{
        max-width:1062px;
    }
    .member-course__list{
        align-items: flex-start;
    }

}

/*======================
.member-coment
====================== */
.member-coment {
    background-image: url(../images/dodo_png/member-firstView.png);
    padding:48px 4.2%;
}

.member-coment__list{
    display:flex;
    flex-direction: column;
    align-items: center;
}


.mark-member{
    max-width:104px;
    display: block;
   margin:0 auto;
}

.member-coment__txt{
    max-width:331px;
}

.member-coment__txt p{
    font-size:1.5rem;
}

.member-coment__item{
    margin-bottom:40px;
}

.btn-cta--member{
    margin:24px auto 0;
}

.member-contact{
    padding:48px 6.4% 0;
}

.free-one,
.free-two,
.free-three,
.ticket,
.once{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    max-width:346px;
    padding:16px 16px 40px;
}

.free-one{
    background-image: url(../images/dodo_png/bgi-free-1.png);
    aspect-ratio:346/98;
}

.free-two{
    background-image: url(../images/dodo_png/bgi-free-2.png);
    aspect-ratio: 346/150;
}

.free-three{
    background-image: url(../images/dodo_png/bgi-free-3.png);
    aspect-ratio: 346/130;
}

.ticket{
    background-image: url(../images/dodo_png/bgi-ticket.png);
    aspect-ratio: 355/106;
}

.once{
    background-image: url(../images/dodo_png/bgi-once.png);
    aspect-ratio: 352/141;
    background-position:bottom;
    padding:20px 8px;
}


@media screen and (min-width:768px) {
.member-course__list{
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

    .member-coment__list{
        flex-direction: row;
        gap:8.8%;
        justify-content: center;
    }
    .contact-form--member{
        margin:0 auto;
        max-width:820px;
    }

}