@charset "UTF-8";

/* ==========================================================================
   Project Styles: Q&A Page (.p-qa / qa.css)
   Figma Screenshots: qa.png & qa-sp.png
   Figma Component JSON: p-qa-answer__text.json
   ========================================================================== */

/* 1. Main Container (.p-qa) */
.p-qa {
    width: 100%;
    background-color: #ffffff;
    padding: 60px 0 80px 0;
}

@media screen and (max-width: 768px) {
    .p-qa {
        padding: 32px 0 60px 0;
    }
}

/* 2. Q&A List & Item (.p-qa-list, .p-qa-item) */
.p-qa-list {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

@media screen and (max-width: 768px) {
    .p-qa-list {
        gap: 40px;
    }
}

.p-qa-item {
    display: flex;
    flex-direction: column;
}

/* 3. Question Header (.p-qa-question) */
.p-qa-question {
    background-color: #efefef;
    border-radius: 16px;
    padding: 28px 36px;
    margin-bottom: 28px;
}

@media screen and (max-width: 768px) {
    .p-qa-question {
        border-radius: 12px;
        padding: 21px 16px;
        margin-bottom: 20px;
    }
}

.p-qa-question__title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    display: flex;
    color: #6e2c2c;
    margin: 0;
}

.p-qa-question__q {
    padding-right: 8px;
}

@media screen and (max-width: 768px) {
    .p-qa-question__title {
        font-size: 18px;
        line-height: 1.5;
        gap: 8px;
    }
}

/* 4. Answer Section (.p-qa-answer) */
.p-qa-answer {
    padding: 12px 36px;
}

.p-qa-answer--with-img {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.p-qa-answer--with-img img {
    max-width: 203px;
}

.p-qa-answer--with-img-vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}


@media screen and (max-width: 768px) {
    .p-qa-answer {
        padding: 0 16px;
    }

    .p-qa-answer--with-img {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

}

/* Answer Text Block (.p-qa-answer__text) */
.p-qa-answer__text {
    line-height: 1.6;
    color: #000000;
    display: flex;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .p-qa-answer__text {
        font-size: 15px;
        line-height: 1.6;
    }
}

/* Answer Prefix (.p-qa-answer__a) - Embedded inside .p-qa-answer__text */
.p-qa-answer__a {
    color: #6e2c2c;
    font-size: 28px;
    font-weight: 700;
    margin-top: -8px;
    line-height: 1.6;
    margin-right: 16px;
    display: inline-block;
    vertical-align: baseline;
}

@media screen and (max-width: 768px) {
    .p-qa-answer__a {
        margin-top: -4px;
        font-size: 18px;
        margin-right: 10px;
    }
}

.p-qa-answer__list {
    padding: 0;
    list-style: none;
}

.p-qa-answer__list-item {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    padding-left: 1em;
    text-indent: -1em;
}

@media screen and (max-width: 768px) {
    .p-qa-answer__list-item {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 6px;
        padding-left: 0;
        text-indent: 0;
    }
}

/* 5. Figure / Images (.p-qa-figure) */
.p-qa-figure {
    margin-top: 32px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .p-qa-figure {
        margin-top: 20px;
    }
}

.p-qa-figure__img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* 6. Caution Box (.p-qa-caution) */
.p-qa-caution {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #fffada;
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 32px;
}

@media screen and (max-width: 768px) {
    .p-qa-caution {
        gap: 12px;
        padding: 16px;
        margin-top: 24px;
    }
}

.p-qa-caution__icon {
    width: 36px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .p-qa-caution__icon {
        width: 28px;
        height: 28px;
    }
}

.p-qa-caution__text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #231815;
    margin: 0;
}

/* 7. Divider Line (.p-qa-divider) */
.p-qa-divider {
    width: 100%;
    height: 6px;
    background-color: #7c1649;
    margin: 60px 0 80px 0;
}

@media screen and (max-width: 768px) {
    .p-qa-divider {
        margin: 40px 0 60px 0;
    }
}