@media (min-width: 768px) {
    .spi-hub-catalog .spi-hub-sec .spi-hub-grid:not(:has(.spi-hub-thumb)) { gap: 10px 12px; }
    .spi-hub-catalog .spi-hub-sec .spi-hub-card:not(:has(> .spi-hub-thumb)) {
        flex-direction: row; align-items: center; box-sizing: border-box; min-height: 54px;
        padding: 11px 12px 11px 16px; background: #fff; border: 1px solid #e3e6e6; border-radius: 10px;
        transition: border-color .15s ease, background-color .15s ease;
    }
    .spi-hub-catalog .spi-hub-sec .spi-hub-card:not(:has(> .spi-hub-thumb)) .spi-hub-card-body { flex: 1 1 0; min-width: 0; padding: 0; }
    .spi-hub-catalog .spi-hub-sec .spi-hub-card:not(:has(> .spi-hub-thumb))::after {
        content: "\203A"; flex: none; margin-left: auto; padding-left: 8px;
        font-size: 20px; line-height: 1; color: var(--hub-tc, #26A69A); font-weight: 700;
    }
    .spi-hub-catalog .spi-hub-sec .spi-hub-card:not(:has(> .spi-hub-thumb)):hover { border-color: var(--hub-tc, #26A69A); background: #F8FFFE; }
    .spi-hub-catalog .spi-hub-sec .spi-hub-card:not(:has(> .spi-hub-thumb)):has(.spi-hub-meta.is-on) { border-color: var(--hub-tc, #26A69A); }
    .spi-hub-catalog .spi-hub-sec .spi-hub-card:not(:has(> .spi-hub-thumb)) .spi-hub-meta { margin: 3px 0 0; }
}
.spi-hub-catalog > .spi-hub-sechead .spi-hub-h3 > .spi-hub-count { display: none; }

/* 練習一覧の差し色 */
.spi-hub-catalog .spi-hub-tab:hover { border-color: var(--hub-tc, #26A69A); color: var(--hub-tc, #26A69A); }
.spi-hub-catalog .spi-hub-tab.is-on { background: var(--hub-tc, #26A69A); border-color: var(--hub-tc, #26A69A); color: #fff; }
.spi-hub-catalog .spi-hub-tabs .spi-hub-tab[style]::before {
    content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 7px 1px 0; border-radius: 3px;
    background: var(--hub-tc); vertical-align: middle;
}
.spi-hub-catalog .spi-hub-tabs .spi-hub-tab.is-on[style]::before { background: rgba(255,255,255,.85); }
.spi-hub-catalog .spi-hub-sec .spi-hub-count,
.spi-hub-catalog .spi-hub-fieldrow .spi-hub-count { background: var(--hub-soft, #E4F8F6); color: var(--hub-tc, #26A69A); }
.spi-hub-catalog h3.spi-hub-h3--band { border-left-color: var(--hub-tc, #26A69A); }
.spi-hub-catalog .spi-hub-meta.is-on { color: var(--hub-tc, #26A69A); }
.spi-hub-catalog .spi-hub-card[data-open="1"] { border-color: var(--hub-tc, #26A69A); }
.spi-hub-catalog .spi-hub-card:hover .spi-hub-thumb { border-color: var(--hub-tc, #26A69A); }
.spi-hub-catalog .spi-hub-card:hover .spi-hub-card-title { color: var(--hub-tc, #26A69A); }
.spi-hub-catalog .spi-hub-card::after { color: var(--hub-tc, #26A69A); }
.spi-hub-catalog .spi-hub-more:hover { border-color: var(--hub-tc, #26A69A); color: var(--hub-tc, #26A69A); }

/* 模試ツール／性格検査／問題集の横並び（PC・タブレット） */
@media (min-width: 768px) {
    /* 見出し・補足・カードの3段を列どうしで揃える（補足は模試ツールだけ＝サムネの上端がずれない） */
    /* 列は節の数によらず3等分（2節のときもカードの大きさを揃える） */
    .spi-hub-secrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 18px; margin: 0 0 30px; }
    .spi-hub-secrow > .spi-hub-sec { display: grid; grid-row: span 3; grid-template-rows: subgrid; min-width: 0; margin: 0; }
    .spi-hub-secrow > .spi-hub-sec > h3 { grid-row: 1; align-self: end; }
    .spi-hub .spi-hub-secrow h3.spi-hub-h3 { font-size: 15px; }
    .spi-hub-secrow > .spi-hub-sec > .spi-hub-note { grid-row: 2; }
    .spi-hub-secrow > .spi-hub-sec > .spi-hub-grid { grid-row: 3; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) { .spi-hub-secrow:not(:last-child) { margin-bottom: 20px; } }

/* 横並びのサムネカードは4列グリッドの1枚と同じ大きさ（1/3幅いっぱいに広げない） */
@media (min-width: 768px) {
    .spi-hub-secrow > .spi-hub-sec > .spi-hub-grid > .spi-hub-card:has(> .spi-hub-thumb) { width: calc(75% - 4.5px); }
}
/* サイドバー経由・未登録の入口カード：「N問 練習し放題」の行を足しても3枚のアイコンとボタンの高さを揃える */
@media (min-width: 640px) {
    .spi-hub-quick[data-cold="1"] { grid-template-rows: auto auto 1fr auto; }
    .spi-hub-quick[data-cold="1"] > .spi-hub-quick-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 8px; justify-items: center; }
    .spi-hub-quick[data-cold="1"] .spi-hub-quick-title { grid-row: 1; }
    .spi-hub-quick[data-cold="1"] .spi-hub-cold-count { grid-row: 2; margin: 0; }
    .spi-hub-quick[data-cold="1"] .spi-hub-quick-icon { grid-row: 3; align-self: stretch; margin: 6px 0; }
    .spi-hub-quick[data-cold="1"] .spi-hub-quick-btn { grid-row: 4; }
}

/* 手順の中の単元カード（苦手な単元を練習する 等）のスマホ＝PCと同じ枠つきの1枚ずつにする */
@media (max-width: 767px) {
    .spi-hub-quest-flow-body .spi-hub-grid:not(:has(.spi-hub-thumb)) { display: flex; flex-direction: column; gap: 8px; }
    .spi-hub-quest-flow-body .spi-hub-card:not(:has(> .spi-hub-thumb)) {
        box-sizing: border-box; min-height: 50px; padding: 10px 12px 10px 14px;
        background: #fff; border: 1px solid #e3e6e6; border-radius: 10px;
    }
    .spi-hub-quest-flow-body .spi-hub-card:not(:has(> .spi-hub-thumb)) .spi-hub-card-body { flex: 1 1 0; min-width: 0; padding: 0; }
    .spi-hub-quest-flow-body .spi-hub-card:not(:has(> .spi-hub-thumb)):has(.spi-hub-meta.is-on) { border-color: var(--hub-tc, #26A69A); }
    .spi-hub-quest-flow-body .spi-hub-card:not(:has(> .spi-hub-thumb)) .spi-hub-meta { margin: 3px 0 0; }
}