@charset "utf-8";

/*==========================
common
==========================*/
:root {
    --primary-b: #573525;
    --primary-back01: #F7F6F4;
    --primary-back02: #FFFFFF;
    --primary-cream: #F0EDE9;
}

/* pagetop  */

.pagemain {
    background: url(../image/faq_main.png);
}

.section-faq {
    display: flex;
    padding: 0px 9.7% 0px;
    flex-direction: column;
    align-items: center;
    background-color: var(--primary-back01);
}

.sectionhub {
    max-width: 1160px;
    margin: 0 auto;
}

/* =============
Q & A
============= */
.faqunit {
    display: flex;
    max-width: 1160px;
    width: 80.5vw;
    margin-top: 40px;
    background-color: var(--primary-back02);
    justify-content: space-between;
    padding: 20px 20px 40px;
}

.faqtxt {
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}

.question {
    display: flex;
    align-items: baseline;
    border-bottom: 1.0px solid #573525;
}

.answer {
    display: flex;
    align-items: center;
    text-indent: 4.0em;
    margin-top: 10px;
}

.q-icon {
    color: #573525;
    font-size: 4.0rem;
}

.q-txt {
    font-family: "Zen Old Mincho";
    font-size: 1.6rem;
    margin-left: 10px;
    margin-left: 20px;
}

.a-icon {
    color: #573525;
    font-size: 4.0rem;
}

.a-txt {
    font-family: "Zen Old Mincho";
    font-size: 1.6rem;
    text-indent: 0;
    margin-left: 20px;
}

.faqImg {
    width: 180px;
    height: 180px;
    margin: auto 20px;
}

.spfaqImg {
    display: none;
}

.faq_Obi {
    width: 100vw;
    height: auto;
    object-fit: cover;
    margin-top: 60px;
    margin-bottom: 60px;
}

@media screen and (max-width:768px) {
    .question {
        align-items: center;
        padding-bottom: 10px;
    }

    .answer {
        text-indent: 0em;
    }

    .a-icon,
    .q-icon {
        font-size: 3.0rem;
    }

    .a-txt,
    .q-txt {
        font-size: 1.6rem;
        margin-left: 10px;
    }
    
    .faqImg {
        display: none;
    }

    .spfaqImg {
        display: block;
        width: 180px;
        height: auto;
        margin: 40px auto;
    }
}

@media screen and (max-width:428px) {
    .faq_Obi {
        height: 120px;
        object-fit: cover;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}