/* 新サイト テーマのページ。parts.css の後に読み込む。クラス名は th- */

/* 頭: 写真の上に言葉（トップのテーマのカードと同じ形） */
.th-hero { position: relative; overflow: hidden; min-height: 240px; display: flex; align-items: flex-end; background: #fff; }
.th-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; filter: saturate(.75); }
.th-hero img.fit { object-fit: contain; object-position: center 25%; padding: 8px 16px 64px; }
.th-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.82) 60%, #fff 100%); }
.th-hero-in { position: relative; z-index: 1; padding: 0 16px 20px; }
.th-hero .cmt-eyebrow { color: var(--cmt-navy); }

/* 段（白とグレーの交互・見出しは小見出し＋紺の題） */
.th-sec { padding: 36px 16px 40px; background: var(--cmt-white); }
.th-sec--surface { background: var(--cmt-surface); }
.th-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.th-sec-head .cmt-h-sec { margin: 0; font-size: 18px; }
.th-sec-head .cmt-eyebrow { color: var(--cmt-navy); }
.th-more { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 700; color: var(--cmt-navy); text-decoration: none; }

/* 大きな数字（オレンジ・言葉は小さく） */
.th-rank { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; font-weight: 700; color: var(--cmt-text); }
.th-rank b { font-family: var(--cmt-font-num); font-size: 44px; line-height: 1; color: var(--cmt-accent); }
.th-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; }
.th-fact { background: var(--cmt-white); padding: 12px; }
.th-sec--surface .th-fact { background: var(--cmt-white); }
.th-sec:not(.th-sec--surface) .th-fact { background: var(--cmt-surface); }
.th-fact small { display: block; font-size: 12px; color: var(--cmt-text-sub); }
.th-fact b { font-size: 20px; }
.th-fact span { font-size: 12px; font-weight: 700; }

/* 順位の表（市区・車名） */
.th-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.th-table th, .th-table td { padding: 10px 4px; border-bottom: 1px solid var(--cmt-line); text-align: left; }
.th-table th { font-size: 12px; font-weight: 400; color: var(--cmt-text-sub); }
.th-table td.n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.th-table td.r { width: 2em; color: var(--cmt-text-sub); font-variant-numeric: tabular-nums; }
.th-table a { text-decoration: none; font-weight: 700; }

/* 説明の文（今の noscript の文を移したもの） */
.th-text { margin: 0; font-size: 15px; line-height: 1.9; }

/* 記録（一覧と同じ行。カードで 1 件ずつ区切る） */
.th-records { margin: 0 -16px; }
.th-records li { background: var(--cmt-white); margin-bottom: 1px; }

/* テーマの一覧 */
.th-shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; margin: 0; padding: 0; }

/* ---------- 決まりの 3 章の並び ---------- */
.th-hero--plain { min-height: 160px; background: var(--cmt-surface); }
.th-hero--plain::after { display: none; }
.th-kind-bar { position: sticky; top: var(--cmt-header-h); z-index: 20; background: var(--cmt-white); padding: 10px 16px; border-bottom: 1px solid var(--cmt-line); }
/* 数を作った日（数字の段の終わりに小さく） */
.th-asof { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--cmt-text-sub); }
.th-box { background: var(--cmt-white); padding: 14px; margin-bottom: 10px; }
.th-box-h { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--cmt-navy); }
.th-grade { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--cmt-line); border-radius: var(--cmt-r-tag); font-size: 11px; font-weight: 700; color: var(--cmt-text-sub); }
.th-reads, .th-cites { list-style: none; margin: 0; padding: 0; }
.th-reads a { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--cmt-line); text-decoration: none; }
.th-reads span { font-size: 12px; font-weight: 700; color: var(--cmt-navy); }
.th-reads b { font-size: 16px; }
.th-reads time, .th-cites time { font-size: 12px; color: var(--cmt-text-sub); }
.th-cites li { padding: 10px 0; border-bottom: 1px solid var(--cmt-line); font-size: 14px; line-height: 1.7; }
.th-cites time { display: block; }
.th-basis { padding: 0 16px; margin: 16px 0 0; }

/* tone.css から、テーマのページで使う分 */
.cmt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmt-thumb img.fit { object-fit: contain; }

/* 追加の所 */
.th-note { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--cmt-text-sub); }
.th-empty { margin: 0; padding: 12px 0; font-size: 14px; line-height: 1.8; color: var(--cmt-text-sub); }
.th-measure { background: var(--cmt-white); padding: 14px; }
.th-measure-badge { display: inline-block; margin: 0 0 10px; padding: 4px 10px; background: var(--cmt-navy); color: var(--cmt-white); font-size: 14px; font-weight: 700; border-radius: var(--cmt-r-tag); }
.th-measure ol { margin: 0 0 12px; padding-left: 1.5em; font-size: 15px; line-height: 1.9; }
.th-measure li { margin-bottom: 4px; }
.th-links { list-style: none; margin: 0; padding: 0; }
.th-links li { margin: 0; }
.th-links a { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--cmt-navy); }
.th-load-error { padding: 16px; font-size: 14px; line-height: 1.8; background: var(--cmt-surface); }

/* 警察の統計で条件に当たったことば（多発・増えている・急増・注意）。色で脅さず、札の形と文字で分ける */
.th-claims-wrap:empty { display: none; }
.th-claims { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--cmt-line); }
.th-claims .th-claims { margin: 0; border-top: 0; }
.th-claim-model > b { display: block; padding: 10px 0 0; font-size: 15px; }
.th-claim { display: grid; grid-template-columns: 7em 1fr; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--cmt-line); }
.th-flag { display: block; padding: 2px 6px; border: 2px solid #16202B; background: #16202B; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center; border-radius: var(--cmt-r-tag); }
.th-flag--up { background: #fff; color: #16202B; }
.th-flag--note { background: #fff; color: #16202B; border-style: dashed; }
.th-claim-t { font-size: 15px; line-height: 1.6; }
.th-claim-t small { display: block; font-size: 12px; line-height: 1.6; color: var(--cmt-text-sub); }

/* ---------- ページの骨組み（PC で本文と右の欄に分けるための枠。スマホでは今までと同じ順に縦に並ぶ） ---------- */
.th-main { display: flex; flex-direction: column; }
.th-main > * { min-width: 0; }
.th-cols, .th-body, .th-side { display: contents; }
.th-main--region { display: block; }
.th-cols--region { display: block; }
/* スマホの順: 現状と傾向 → 数字 → 記録 → 対策 → 読みもの → 報道 → 質問 → 選んだ基準 → 出典（対策・基準・出典は PC で右の欄にまとめる） */
#sec-outlook { order: 1; }
#sec-numbers { order: 2; }
#sec-records { order: 3; }
#sec-measures { order: 4; }
#sec-reads { order: 5; }
#sec-cites { order: 6; }
#sec-faq { order: 7; }
.th-side > [data-slot="basis"] { order: 8; }
#sources { order: 9; }

/* 全国順位の札: 「多発」「注意」の札はやめ、事実の言い方（全国 ◯ 位）に。色を濃くして目立たせる */
.th-flag--rank { background: #B3260B; border-color: #B3260B; color: #fff; font-size: 15px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #B3260B; }
.th-claim:has(.th-flag--rank) { border-left: 4px solid #B3260B; padding-left: 8px; }
.th-claim:has(.th-flag--rank) { grid-template-columns: 1fr; gap: 6px; }
.th-flag--rank { display: inline-block; justify-self: start; text-align: left; padding: 3px 10px; }


/* 県のページの見出し: 県の写真をうっすら後ろに（写真が無い県は今のまま） */
.th-hero--photo .cmt-region-photo { display: block; }
.th-hero--photo .cmt-region-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.th-hero--photo::after { display: block !important; content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.7) 100%); }
@media (min-width: 768px) { .th-hero--photo::after { background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.86) 45%, rgba(255,255,255,.1) 100%); } }
.th-hero--photo .th-hero-in { z-index: 2; }