/* ============================================================
   serp-hub.css — SERP_HUB_2026_11_01
   トップ（「fde 求人」）と /jobs/fde/ に足した区画（日本勤務の求人・会社別件数・
   FDEとは・年収の目安・よくある質問）だけのスタイル。既存のトークン（style.css の :root）を使う。
   ============================================================ */

.serp-section {
    padding: 64px 0;
}
.serp-section--alt {
    background: var(--bg-secondary);
}
.serp-section .section-title .lucide-icon {
    width: 22px;
    height: 22px;
    color: var(--accent);
}

.serp-updated {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.serp-updated .lucide-icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: -2px;
    color: var(--accent);
}

/* 求人の行（hub-job-card を使い、日付・職種の小さな札だけ足す） */
.serp-job-date {
    font-size: 11px;
    color: var(--text-muted);
}
.serp-more {
    margin-top: 8px;
}
.serp-more > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
}
.serp-more > summary::-webkit-details-marker {
    display: none;
}
.serp-more[open] > summary {
    margin-bottom: 8px;
}
.serp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

/* 表（会社別の件数・年収の目安） */
.serp-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
}
.serp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.serp-table th,
.serp-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.serp-table thead th {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    white-space: nowrap;
}
.serp-table tbody tr:last-child th,
.serp-table tbody tr:last-child td {
    border-bottom: none;
}
.serp-table .serp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.serp-table a {
    color: var(--accent-dark);
    font-weight: 600;
}

.serp-table--salary {
    min-width: 440px; /* スマホでは枠の中で横に送る（列を細くして縦に崩さない） */
}

/* 答え先出しの箱（FDEとは・年収） */
.serp-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}
.serp-two-col > * {
    min-width: 0; /* 表の最小幅で列（＝ページ）が横に広がらないように */
}
.serp-answer {
    padding: 24px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
}
.serp-answer-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
}
.serp-answer-title .lucide-icon {
    width: 20px;
    height: 20px;
    color: var(--accent);
}
.serp-answer p,
.serp-answer li {
    font-size: 15px;
    line-height: 1.85;
    color: var(--text-primary);
}
.serp-answer p + p,
.serp-answer p + ul,
.serp-answer ul + p {
    margin-top: 10px;
}
.serp-answer ul {
    padding-left: 1.2em;
    list-style: disc;
}
.serp-answer a {
    color: var(--accent-dark);
    font-weight: 600;
}
.serp-note {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.serp-note a {
    color: var(--accent-dark);
}

/* 勤務地・区分の札 */
.serp-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.serp-chip {
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.serp-chip strong {
    margin-left: 4px;
    color: var(--accent-dark);
    font-weight: 800;
}

/* よくある質問（既存の .cat-faq-section / .faq-item / .faq-question をそのまま使う） */
.serp-faq.cat-faq-section {
    margin-top: 24px;
}
.cat-faq-section .faq-answer {
    padding-left: 56px; /* site-custom.css の padding で「A.」の印が本文に重なっていたのを直す */
}
.serp-faq .faq-answer a {
    color: var(--accent-dark);
    font-weight: 600;
}

/* スマホ: 求人の行は2段（題名を省略させない）、表の「一覧を見る」列は隠す（会社名・件数を優先） */
@media (max-width: 640px) {
    .hub-job-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .hub-job-card-main {
        width: 100%;
    }
    .hub-job-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .hub-job-card-meta {
        justify-content: flex-start;
    }
    .serp-col-link {
        display: none;
    }
}

@media (max-width: 768px) {
    .serp-section {
        padding: 48px 0;
    }
    .serp-two-col {
        grid-template-columns: 1fr;
    }
    .serp-answer {
        padding: 18px;
    }
    .serp-table th,
    .serp-table td {
        padding: 10px;
        font-size: 13px;
    }
}

/* /jobs/fde/ の解説の段落どうしの間（このCSSを読む2ページだけに効く） */
.cat-guide-text p + p {
    margin-top: 10px;
}

/* FDE_REBUILD_2026_11_12: マーケットレポート /report/ と トップの「毎日の増減」 */
.serp-report-answer {
    margin: 24px 0 32px;
    padding: 20px 24px;
    background: var(--bg-secondary);
    border-radius: 12px;
    line-height: 1.8;
}
.serp-report-answer .section-title {
    margin-top: 0;
    font-size: 18px;
}
.serp-report-notes {
    margin: 0 0 24px;
    padding-left: 1.2em;
    line-height: 1.8;
    color: var(--text-secondary);
}
.serp-report-notes li + li {
    margin-top: 8px;
}
.serp-table--daily thead th.serp-num,
.serp-table--daily tbody td.serp-num {
    white-space: nowrap;
}