@charset "utf-8";

/*======================
.trial-fv
====================== */

.trial-fv{
    background-image: url(../images/dodo_png/trial-firstView.png);
    padding:96px 8.5% 32px;
}

.trial-fv__image{
    margin-left:8.5%;
    max-width:214px;
}

.trial-fv__lead{
    margin-top:32px;
}

.trial-fv__copy,
.addition{
    color: var(--vivid-brown);
}

.addition{
    margin:24px auto 0;
    max-width: 327px;
}

.addition p:nth-of-type(1){
    font-size:1.5rem;
}

.addition p:nth-of-type(2){
    font-size:1.5rem;
    margin-top:16px;
}
.addition img{
    width:100px;
    margin-top:8px;
}

.trial-fv__txt{
    margin-top:16px;
}


@media screen and (min-width:768px) {
    .trial-fv{
        padding:125px 5% 88px 7.2%;
    }

  
    .trial-fv__image{
        width:41.9%;
        max-width:604px;
        margin-left:0;
    }
    .trial-fv__flex{
        justify-content: center;
        max-width:1260px;
        margin:0 auto;
        gap:8.5%;
    }
    .trial-fv__copy{
        font-size:2.4rem;
        margin-top:16px;
    }

    .trial-fv__lead{
        margin-top:-40px;
    }
    
}

/*======================
.trial-course
====================== */

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

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

.trial-course__topic{
    text-align: center;
}

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



.trial-fee{
    text-align: left;
    margin-top:8px;
    font-family: var(--font-title);
    font-size:1.8rem;
}
.kome{
    font-size:1.3rem;
}

@media screen and (min-width:768px) {
   
    .trial-course__list{
        padding:64px 0 32px;
        margin:0 auto;
        flex-direction:row;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    
}


/*======================
.trial-flow
====================== */
.trial-flow{
    background-image: url(../images/dodo_png/trial-flow.png);
}

.trial-flow__list{
    display: flex;
    flex-direction: column;
    gap:40px;
    margin:40px auto;
    max-width: 1440px;
}

.flow-topic__group{
    justify-content: flex-start;
    align-items: center;
    gap:8px;
}

.trial-flow__num{
    width:62px;
    height:62px;
    color:var(--primary-white);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none"><path d="M99.388 55.2286C90.7451 98.7831 58.6035 96.2912 48.7812 99.2242C19.7786 104.841 6.44238e-05 79.1921 0 47.1783C-5.51306e-05 19.7824 31.7719 2.15391e-05 54.5006 0C71.0798 -1.57115e-05 104.961 27.1462 99.388 55.2286Z" fill="%23277446"/></svg>');
    display:flex;
align-items: center;
justify-content: center;
background-size:cover;
background-position:center;

}

.flow-topic__group,
.trial-flow__detail{
    margin-top:16px;
}

.caution{
    margin-top:24px;
    display: block;
    font-size:1.4rem;
}

@media screen and (min-width:768px) {
    .trial-flow__list{
        gap:56px;
    }
    .trial-flow__item{
        display: flex;
        gap:88px;
    }
    .trial-flow__item--odd{
        flex-direction: row-reverse;
    }
    .trial-flow__image{
        width:45.6%;
        max-width:657px;
    }
    .trial-flow__txt{
        display:flex;
        flex-direction: column;
        width:41.2%;
        max-width: 594px;
    }
}



/*======================
.trial-coment
====================== */
.trial-coment{
    background-color: #F5F5F5;
}
.trial-coment__inner,
.trial-coment__image,
.trial-coment__topic{
    margin-top:40px;

}

.coment__name,
.trial-coment__topic{
    font-size:1.5rem;
    color:var(--primary-navy);
    text-align: center;
}

.coment__name{
    display: block;
}

.coment__name,
.trial-coment__txt{
    margin-top:4px;
}

.btn-cta--reserve{
    margin:40px auto 0;
}

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

    .trial-coment__inner,
    .trial-coment__image,
    .trial-coment__topic{
        margin-top:48px;
    }
    .trial-coment__topic{
        font-size:2.4rem;
        
    }
    .trial-coment__image{
        width:55.5%;
        max-width:800px;
        display: block;
        margin:48px auto 0;
    }
    .trial-coment__txt{
        max-width:800px;
        width:55.5%;
        margin:0 auto;
    }

}    
/*======================
.trial-member
====================== */
.trial-member{
   text-align: center;
}
.trial-member__image,
.trial-member__txt{
    margin-top:24px;
}
.trial-member__txt{
    text-align: left;
}
.btn-viewmore--member{
    margin:24px auto 0;
}

@media screen and (min-width:768px){
    .trial-member__copy{
        color:var(--light-brown);
    }
    .trial-member__flex{
        display: flex;
        gap: 40px;
        justify-content: center;
        margin-top:48px;
    }
    .trial-member__image{
        margin-top:0;
    }
    .trial-member__txt{
       margin-top:16px;
    }
    .btn-viewmore--member{
        margin:24px auto 0 0;
    }
}