/* ==============================
   トップページ（地域ポータル。top_preview.php → 確定後 index.php, inc/top/）
   スマホ優先・1カラム。PCは一部のブロックを2列に。見出しはカゴミルの赤、面の色は白のまま。
============================== */
.tp-wrap { max-width: 720px; margin: 0 auto; padding: 12px 12px 24px; }
.tp-block { background: #fff; border-radius: 12px; padding: 16px 16px 12px; margin-bottom: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.tp-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.tp-h { font-size: 1.12rem; font-weight: 900; color: #1a1a1a; padding-left: 10px; border-left: 4px solid #c62828; line-height: 1.3; }
.tp-head-sub { font-size: .82rem; color: #666; font-weight: 700; }
.tp-count { font-size: .95rem; font-weight: 900; color: #c62828; }
.tp-h3 { font-size: .92rem; font-weight: 800; color: #333; margin: 14px 0 4px; }
.tp-lead { font-size: .82rem; color: #666; margin: -4px 0 8px; }
.tp-empty { font-size: .88rem; color: #888; padding: 6px 0; }
.tp-credit { font-size: .7rem; color: #999; margin-top: 8px; }
.tp-more { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: 8px; border-top: 1px solid #f1f1f1; font-size: .88rem; font-weight: 800; color: #c62828; }
.tp-more:hover { background: #fff8f8; }

/* A. 今日の鹿児島：3枚を横並び（スマホでも） */
.tp-today .kt-alert { margin-bottom: 8px; }
.tp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tp-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: #f7f7f7; color: inherit; min-height: 92px; }
a.tp-tile:hover { background: #f1f1f1; }
.tp-tile-label { font-size: .74rem; font-weight: 800; color: #777; }
.tp-tile-label span { font-weight: 600; margin-left: 4px; color: #999; }
.tp-tile-main { font-size: 1.02rem; font-weight: 900; color: #1a1a1a; line-height: 1.35; margin: 2px 0; }
.tp-tile-sub { font-size: .76rem; color: #555; line-height: 1.45; }
.tp-ok { color: #2e7d32; }
.tp-ng { color: #c62828; }
@media (max-width: 380px) { .tp-tile { padding: 8px; } .tp-tile-main { font-size: .9rem; } }

/* B. 今日のニュース */
.tp-summary { background: #fafafa; border-radius: 10px; padding: 12px; }
.tp-summary-label { font-size: .78rem; font-weight: 800; color: #c62828; display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.tp-summary-label span { color: #999; font-weight: 600; }
.tp-summary-text { font-size: .92rem; line-height: 1.8; color: #333; }
.tp-summary-btn { margin-top: 4px; min-height: 36px; padding: 0 4px; border: none; background: none; color: #c62828; font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }

/* 一覧（ニュース・イベント・お店） */
.tp-list { list-style: none; }
.tp-list > li + li { border-top: 1px solid #f1f1f1; }
.tp-news, .tp-ev, .tp-shop { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; color: inherit; }
.tp-news:hover .tp-news-title, .tp-ev:hover .tp-ev-title, .tp-shop:hover .tp-shop-name { color: #c62828; }
.tp-news-title { font-size: .95rem; font-weight: 700; line-height: 1.5; color: #1a1a1a; }
.tp-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .74rem; color: #888; }
.tp-cat { font-size: .68rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; color: var(--ctg, #455a64); background: var(--ctg-bg, #eceff1); }
.tp-list--compact .tp-news, .tp-list--compact .tp-shop { padding: 8px 0; }
.tp-list--compact .tp-news-title { font-size: .88rem; }

.tp-ev-date { font-size: .78rem; font-weight: 800; color: #c62828; }
.tp-ev-title { font-size: .98rem; font-weight: 800; line-height: 1.45; color: #1a1a1a; }
.tp-ev-place { font-size: .8rem; color: #666; }
.tp-free { display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 800; color: #1b5e20; background: #e8f5e9; padding: 1px 7px; border-radius: 999px; vertical-align: 2px; }

/* D. 週末のジャンル */
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.tp-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 1px solid #e3e3e3; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #333; background: #fff; }
.tp-chip span { font-size: .72rem; color: #999; }
.tp-chip:hover { border-color: #c62828; color: #c62828; }

/* E. 鹿児島スポーツ */
.tp-teams { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tp-team { border: 1px solid #eee; border-radius: 10px; padding: 12px 12px 0; }
.tp-team-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 8px; }
.tp-team-name { font-size: 1rem; font-weight: 900; }
.tp-team-name a { color: #1a1a1a; }
.tp-team-rank { display: flex; align-items: baseline; gap: 6px; font-size: .78rem; color: #666; }
.tp-team-rank strong { font-size: 1.15rem; font-weight: 900; color: #c62828; }
.tp-team-rec { color: #888; }
.tp-match { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; background: #f7f7f7; color: inherit; margin-bottom: 6px; }
.tp-match:hover { background: #f1f1f1; }
.tp-match-label { flex: 0 0 auto; width: 64px; font-size: .68rem; font-weight: 900; letter-spacing: .02em; color: #777; }
.tp-match-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-match-score { font-size: .95rem; font-weight: 900; color: #1a1a1a; }
.tp-match-sub { font-size: .74rem; color: #777; }
.tp-match--next .tp-match-label, .tp-match--today .tp-match-label { color: #c62828; }
.tp-match--today, .tp-match--live { background: #fff4f4; }
.tp-match--live .tp-match-label { color: #c62828; }
.tp-res { flex: 0 0 auto; font-size: .7rem; font-weight: 900; padding: 2px 8px; border-radius: 4px; color: #fff; }
.tp-res--win { background: #c62828; }
.tp-res--draw { background: #757575; }
.tp-res--lose { background: #37474f; }
.tp-team .tp-more { margin-top: 0; }

/* F. 開店・閉店 */
.tp-shops { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; }
.tp-shop-kind { font-size: .72rem; font-weight: 900; letter-spacing: .04em; margin-top: 2px; }
.tp-shop-kind--open { color: #c62828; }
.tp-shop-kind--close { color: #616161; }
.tp-shop-name { font-size: .95rem; font-weight: 800; color: #1a1a1a; }
.tp-shop-meta { font-size: .78rem; color: #777; }

/* G. いま話題 */
.tp-rank { list-style: none; }
.tp-rank > li + li { border-top: 1px solid #f1f1f1; }
.tp-rank .tp-news { flex-direction: row; gap: 12px; align-items: flex-start; }
.tp-rank .tp-news > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tp-rank-no { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #9e9e9e; color: #fff; font-size: .82rem; font-weight: 900; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.tp-rank li:nth-child(1) .tp-rank-no { background: #c62828; }
.tp-rank li:nth-child(2) .tp-rank-no { background: #e64a19; }
.tp-rank li:nth-child(3) .tp-rank-no { background: #f57c00; }
.tp-views { color: #999; }

/* H. 地域から探す */
.tp-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tp-area { display: flex; justify-content: space-between; align-items: center; min-height: 46px; padding: 0 14px; border: 1px solid #e6e6e6; border-radius: 10px; font-size: .92rem; font-weight: 800; color: #1a1a1a; }
.tp-area span { font-size: .72rem; color: #999; font-weight: 600; }
.tp-area:hover { border-color: #c62828; color: #c62828; }

/* PC：一部を2列に（並び順・優先順位はスマホと同じ） */
@media (min-width: 960px) {
    .tp-wrap { max-width: 1240px; padding: 20px 24px 60px; }   /* 他のページ（.page-layout）・ヘッダーと同じ幅 */
    .tp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
    .tp-row > .tp-block { margin-bottom: 12px; }
    .tp-teams { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tp-shops { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tp-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tp-tile { min-height: 100px; padding: 12px 14px; }
}