/* Q&A 表形式スタイル */

/* nmlmain.css の achievements 系クラスを qa 系に置き換え */
#qa-page {
    padding: calc(var(--header-h) + 32px) 0 80px;
}

.qa-inner {
    max-width: 900px;
}

.qa-block {
    margin-bottom: 48px;
    overflow: hidden;
}

.qa-lead {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text-inv);
    background: linear-gradient(to right, var(--c-school), var(--c-found));
    padding: 10px 20px;
    border-radius: var(--r-sm);
    margin-bottom: 16px;
    letter-spacing: .06em;
}

.qa-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.qa-table thead th {
    background: linear-gradient(to right, var(--c-school), var(--c-found));
    color: #fff;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: left;
}

.qa-table thead th:first-child {
    width: 42%;
    border-right: 2px solid rgba(255, 255, 255, 0.2);
}

.qa-table tbody tr {
    border-bottom: 1px solid var(--c-border);
    transition: background .15s;
}

.qa-table tbody tr:last-child {
    border-bottom: none;
}

.qa-table tbody tr:nth-child(even) {
    background: rgba(234, 244, 238, 0.45);
}

.qa-table tbody tr:hover {
    background: var(--c-school-pale);
}

.qa-table tbody td {
    padding: 16px 20px;
    font-size: .92rem;
    line-height: 1.85;
    vertical-align: top;
    color: var(--c-text);
}

.qa-table tbody td:first-child {
    color: var(--c-school);
    font-weight: 600;
    border-right: 2px solid rgba(30, 107, 58, 0.15);
    width: 42%;
}

.qa-table tbody td a {
    color: var(--c-found);
}

.qa-table tbody td a:hover {
    color: var(--c-school);
}

/* スマホ：縦積み表示 */
@media (max-width: 600px) {
    .qa-table thead {
        display: none;
    }

    .qa-table,
    .qa-table tbody,
    .qa-table tbody tr,
    .qa-table tbody td {
        display: block;
    }

    .qa-table tbody tr {
        margin-bottom: 16px;
        border-radius: var(--r-md);
        overflow: hidden;
        box-shadow: var(--shadow);
        border-bottom: none;
    }

    .qa-table tbody td {
        width: 100%;
    }

    .qa-table tbody td:first-child {
        background: var(--c-school-pale);
        border-right: none;
        border-bottom: 2px solid rgba(30, 107, 58, 0.15);
        padding: 12px 16px;
    }

    .qa-table tbody td:last-child {
        padding: 12px 16px;
    }
}