@charset "utf-8";
/* ========================
    .faq-fv
    ========================== */
    .faq-fv{
        background-image: url(../images/dodo_png/faq__firstView.png);
        padding:96px 10%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

    }

    .faq-fv__title{
        color:var(--primary-white);
        text-align: center;
    }

    .faq-nav{
        display: flex;
        flex-wrap: wrap;
        gap:16px;
        margin-top:72px;
        justify-content: center;
    }

    .btn--faq{
        width:141px;
        aspect-ratio:141/50 ;
        background-color: var(--primary-white);
        font-weight: 500;
        gap:8px;
    }

    .icon--faqBtn{
        width:18px;
        height:18px;
    }

    #faq-reserve,
    #faq-access,
    #faq-trial,
    #faq-familly,
    #faq-bake{
        scroll-margin-top:15vh ;
    }

    /* ========================
    .faq-container
    ========================== */

    .faq-container{
        background-color: var(--background-beige);
        padding:48px 4.2%;
    }

    .faq-list__title{
        text-align: center;
        margin-top:40px;
    }

    .faq-list{
        display: flex;
        flex-direction: column;
        gap:16px;
    }

    .faq-item{
        font-size:1.4rem;
    }

    .faq-item__question{
        display: flex;
        justify-content: space-between;
        background-color: var(--btn-brown);
        padding:16px;
        align-items: center;
        color:var(--primary-white);
        border-radius: 10px;
        
    }

    .faq-item__question::-webkit-details-marker{
        display:none;
    }

    .question__txt{
        padding:0 16px ;
    }
    
    .answer__txt{
        background-color: #EDEBE7;
        padding:16px;
        border-radius: 10px;
    }

    .question__txt{
        display: inline-block;
    }

    .acordion-mark{
        width:18px;
        height:18px;
        background-image: url(../images/dodo_png/acordion-mark.svg);
       display: inline-block;
       position:relative;
       background-size: cover;
       background-position: center;

    }

    .acordion-mark::after{
        content: '';
        width: 10px;
        height: 2px;
        position: absolute;
        transition: 0.3s;
        top:50%;
        left:50%;
        transform: translateX(-50%);
        background-color:var(--btn-brown);
    }

    .acordion-mark::before{
        content: '';
        width: 10px;
        height: 2px;
        position: absolute;
        transition: 0.3s;
        top:50%;
        left:50%;
        transform: translateX(-50%) rotate(90deg);
        background-color:var(--btn-brown);
    }
    
    .faq-item[open] .acordion-mark::before {
        transform: rotate(180deg);
        width:5px;
    }
   

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

        .faq-fv{
            padding-top:240px;
            padding-bottom:77px;
            background-image: url(../images/dodo_png/faq__firstView\ -\ pc.png);
            
        }
        .faq-nav{
            margin-top:215px;
            justify-content: center;
        }
        
        .faq-list{
            margin:0 auto;
            max-width:1113px;
            width:77.2%;
            gap:24px;
        
        }

        .faq-list__title{
            margin-top: 80px;
        }
    }

     /* ========================
    .contact
    ========================== */
    .contact-top{
        padding:90px 0;
        background-image: url(../images/dodo_png/contact-firstView.png);
        background-size:cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .contact-top h2{
        color:var(--primary-white);
        text-align: center;
    }
    .contact__inner{
        padding:48px 6.4%;
    } 
    .contact-form,
    .btn-cta--submit{
        margin:40px auto 0;
    }
    .contact-form__parts{
        margin-top:16px;
    }

    .contact-form__parts h3{
        font-size:1.6rem;
    }

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

        .contact-top{
            padding:150px 0;
            background-position: center;
            background-image: url(../images/dodo_png/contact__firstView.png);

        }
        .contact__inner{
            max-width:1100px;
            margin:0 auto;
        }
        .contact-form__parts{
            display: flex;
            justify-content: center;
        }

        .contact-form__detail{
            flex: 1;
        }
        .contact-form__parts h3{
            font-size: 2rem;
            width:180px;
        }
        
    }