/* 
NOTICE: 
This CSS file contains customized styles for certain pages. Some components could be used in multiple pages.
Please add comment to each component so we can find what component does this style belong to, 
as we will merge CSS files together and remove unnecessary lines or duplicated lines.
When coping with responsive design, please follow the breakpoint in this file.
This file must be loaded after bootstrap.min.css.
*/

/* Desktop Style */
/*-- QA component(page 2002) --*/
.qa-container {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: solid 1px var(--color-dark-blue);
}

    .qa-container:last-of-type {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
    }

    .qa-container .question, .qa-container .answer-wrapper {
        display: flex;
        gap: 20px;
    }

    .qa-container .question {
        padding: 1rem 3rem 1rem 1.5rem;
        background-color: var(--color-background-beige);
        border-radius: 10px;
        font-weight: 500;
        align-items: flex-start;
    }

        .qa-container .question .question-label, .qa-container .answer .answer-label {
            display: inline-flex;
            justify-content: center;
            font-size: 1.375rem;
            font-weight: bold;
            border-radius: 8px;
            height: 40px;
            width: 40px;
            min-width: 40px;
        }

        .qa-container .question .question-content {
            font-size: 1.125rem;
            padding-top: 4px;
            line-height: 1.75;
        }

        .qa-container .question .question-label {
            background-color: #FFFFFF;
            color: var(--color-orange-dark);
        }

    .qa-container .answer {
        display: flex;
        padding: 1rem 1.5rem;
        gap: 16px;
        position: relative;
        z-index: 0;
    }

        .qa-container .answer .answer-click {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .qa-container .answer .answer-label {
            background-color: var(--color-background-beige);
        }

        .qa-container .answer .answer-content {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            font-size: 1.125rem;
            padding-top: 4px;
            line-height: 1.75;
            text-align: left;
        }
            /* Hide <sup> on list page */
            .qa-container .answer .answer-content sup {
                display: none;
            }
            /* Avoid <a> displaying issue in Safari */
            .qa-container .answer .answer-content a {
                display: inline-block;
            }

        .qa-container .answer .answer-btn {
            display: flex;
            flex: 0 0 127px;
            justify-content: center;
            align-items: center;
            color: var(--color-orange-dark);
            border: 1px solid var(--color-orange-dark);
            border-radius: 20px;
            margin: 5px 0;
            margin-left: auto;
            position: relative;
        }

            .qa-container .answer .answer-btn::after {
                position: absolute;
                content: "";
                right: .5rem;
                top: 50%;
                transform: translateY(-50%) rotate(45deg);
                width: 0.5rem;
                height: 0.5rem;
                border-right: 1.5px solid var(--color-orange-dark);
                border-top: 1.5px solid var(--color-orange-dark);
            }
/*--End of QA component --*/

/*-- QA details component(page 2002-00x) --*/
.qa-details-container .question {
    color: var(--color-orange-dark);
    font-size: 1.25rem;
    margin-bottom: 40px;
}

.qa-details-container .question, .qa-details-container .answer .answer-wrapper {
    display: flex;
    gap: 20px;
    line-height: 1.75;
}

    .qa-details-container .question .question-content {
        font-weight: 500;
        font-size: 1.25rem;
        line-height: 1.75;
    }

    .qa-details-container .question .question-label, .qa-details-container .answer .answer-label {
        display: inline-flex;
        justify-content: center;
        font-size: 1.375rem;
        font-weight: bold;
        border-radius: 8px;
        height: 40px;
        width: 40px;
        min-width: 40px;
        background-color: var(--color-background-beige);
    }

.qa-details-container .answer {
    font-size: 1.125rem;
    margin-bottom: 40px;
}

    .qa-details-container .answer .answer-content .inline-link {
        font-weight: bold;
        text-decoration: underline;
    }

    .qa-details-container .answer .answer-content .qa-note-ol {
        margin-top: 20px;
        margin-bottom: 0;
        font-size: 13px;
        padding-left: 1.5rem;
        counter-reset: item;
        list-style: none;
    }

    .qa-details-container .answer .answer-content .qa-note-li {
        padding-left: 0.25rem;
        counter-increment: item;
    }

        .qa-details-container .answer .answer-content .qa-note-li::before {
            content: "※"counter(item);
            position: absolute;
            margin-left: -1.5rem;
        }

.qa-details-container .source {
    position: relative;
    font-size: 13px;
    padding-left: 2.5rem;
    word-break: break-all;
}

    .qa-details-container .source::before {
        position: absolute;
        content: "出典：";
        left: 0;
    }
/*--End of QA details component --*/

/*-- Pagination component --*/
.pagination-ul {
    display: flex;
    margin: 28px 0 0px;
    padding-left: 0;
    width: 100%;
    justify-content: space-between;
}

    .pagination-ul .pagination-li {
        width: 30%;
        font-size: 1.25rem;
        font-weight: bold;
        text-align: center;
        position: relative;
    }

        .pagination-ul .pagination-li .pagination-link {
            display: block;
            width: 100%;
            border: 2px solid var(--color-main);
            border-radius: 35px;
            padding: 14px 0;
        }

            .pagination-ul .pagination-li .pagination-link::after {
                content: "";
                position: absolute;
                right: 1rem;
                top: 50%;
                transform: translateY(-50%) rotate(45deg);
                width: 0.5rem;
                height: 0.5rem;
                border-right: 2px solid var(--color-main);
                border-top: 2px solid var(--color-main);
            }

        .pagination-ul .pagination-li.prev-page .pagination-link::after {
            right: auto;
            left: 1rem;
            transform: translateY(-50%) rotate(225deg);
        }
/*-- End of Pagination component --*/

/* Responsive: Mobile view 390px~768px */
@media (max-width: 767.98px) {
    /*-- QA component --*/
    .qa-container {
        padding-bottom: 1.875rem;
        margin-bottom: 1.875rem;
    }

        .qa-container .question {
            padding: 1rem;
        }

        .qa-container .question, .qa-container .answer-wrapper {
            gap: 12px;
        }

            .qa-container .question .question-content {
                padding-top: 0;
            }

        .qa-container .answer {
            display: block;
            text-align: right;
            padding: 1rem;
        }

            .qa-container .answer .answer-content {
                -webkit-line-clamp: 2;
                padding-top: 0;
            }

            .qa-container .answer .answer-btn {
                display: inline-flex;
                width: 127px;
                margin-top: 24px;
                padding: 2px 0;
            }
    /*--End of QA component --*/

    /*-- QA details component(page 2002-00x) --*/
    .qa-details-container .question, .qa-details-container .answer .answer-wrapper {
        flex-direction: column;
        gap: 20px;
    }

        .qa-details-container .question .question-label, .qa-details-container .answer .answer-label {
            min-width: 100%;
        }

    .qa-details-container .answer {
        margin-bottom: 50px;
    }
    /*--End of QA details component --*/

    /*-- Pagination component --*/
    .pagination-ul {
        flex-direction: column;
        gap: 15px;
        margin: 36px 0 20px;
    }

        .pagination-ul .pagination-li {
            width: 100%;
        }
    /*-- End of Pagination component --*/
}
/*--END of mobile responsive--*/

/* Responsive: Tablet view 769px~1080px */
@media (min-width: 768px) and (max-width: 1079.98px) {
    /*-- Pagination component --*/
    .pagination-ul .pagination-li {
        width: 45%;
    }
    /*-- End of Pagination component --*/
}
/*--END of table responsive--*/

/* Responsive: Desktop view 1440px~1920px only if necessary */
@media (min-width: 1440px) and (max-width: 1919.98px) {
}
/*--END of desktop responsive--*/

/* Responsive: Extra Large Desktop view > 1920px */
@media (min-width: 1920px) {
}
/*--END of extra large desktop responsive--*/