/* =========================================================
   carmototheft.news 新サイト 共通の部品
   - 外の部品（フォント・ライブラリ）は読み込まない
   - クラス名はすべて cmt- で始める（今の Tailwind と重ならないように）
   ========================================================= */

:root {
  /* 土台（白・グレー・紺） */
  --cmt-white: #FFFFFF;
  --cmt-surface: #F4F6F9;      /* まとまりの面 */
  --cmt-line: #E1E6EC;         /* 線 */
  --cmt-text: #16202B;         /* 文字 */
  --cmt-text-sub: #545E68;     /* 補足の文字 */
  --cmt-navy: #0D2B45;         /* ボタン・見出し・選んだ切り替えだけ。データには使わない */
  --cmt-navy-hover: #081C2E;
  --cmt-cta: #6E1030;          /* 「盗難被害登録」ボタンだけ（えんじ色）。白い文字との比 11.8。捜索中の赤 #8C2F39・#C2414F とは色相と明るさを変えてある */
  --cmt-cta-hover: #560C26;

  /* データの色（種類） */
  --cmt-car: #1C77C3;
  --cmt-car-bg: #EAF3FB;
  --cmt-car-light: #A4CDEE;
  --cmt-bike: #2A9D99;         /* 点・帯・ピン */
  --cmt-bike-text: #14807D;    /* 文字・札の地（白い文字との差を 4.5 以上にするため） */
  --cmt-bike-bg: #EAF7F7;
  --cmt-bike-light: #BEE9E8;
  --cmt-buyer: #4A5058;
  --cmt-cluster: #7F66AC;      /* 地図の「まとまり（数字のピン）」だけ。車の青・バイクの青緑・不審バイヤーの灰と同じ落ち着いた系統で、どれとも違う色相の紫。白い数字との比 4.8（・・で薄く） */
  --cmt-region: #39A9DB;         /* 地域のテーマ（帯・印。文字には --cmt-region-text） */
  --cmt-region-text: #0D2B45;
  --cmt-region-bg: #EEF8FC;
  --cmt-data: #5E7187;         /* 分析・統計資料（青みのグレー） */
  --cmt-data-bg: #EEF2F6;
  --cmt-data-light: #C3CDD8;

  /* 状況の色 */
  --cmt-searching: #8C2F39;    /* 捜索中の帯 */
  --cmt-searching-text: #C2414F; /* 捜索中の文字（白地） */
  --cmt-found: #8D94A0;        /* 発見の帯・点 */
  --cmt-found-text: #6E7681;   /* 発見の文字・札の地 */
  --cmt-plate: #2F6B3A;        /* ナンバーの枠（実物のナンバープレートと同じ緑）。ほかの所には使わない */

  /* 目を引く所（大きな数字と、選んだピンだけ） */
  --cmt-accent: #F04E23;

  /* 文字 */
  --cmt-font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --cmt-font-num: "Oswald", "Bahnschrift", "DIN Alternate", "Arial Narrow", var(--cmt-font);
  --cmt-font-mono: "IBM Plex Mono", ui-monospace, "Consolas", "Menlo", monospace;

  --cmt-fs-xs: 12px;   /* 注記・出典（いちばん小さい。ナビの文字だけ 11px） */
  --cmt-fs-s: 13px;    /* 補足・日付と場所 */
  --cmt-fs-m: 15px;    /* 本文 */
  --cmt-fs-l: 16px;    /* カードの題 */
  --cmt-fs-xl: 20px;   /* 見出し2 */
  --cmt-fs-xxl: 24px;  /* 見出し1 */
  --cmt-fs-num: 40px;  /* 大きな数字 */

  /* 余白（4 の倍数） */
  --cmt-sp-1: 4px;
  --cmt-sp-2: 8px;
  --cmt-sp-3: 12px;
  --cmt-sp-4: 16px;    /* 画面の左右の余白 */
  --cmt-sp-5: 24px;
  --cmt-sp-6: 32px;

  /* 角 */
  --cmt-r-box: 0;      /* カード・箱・写真は角なし */
  --cmt-r-tag: 2px;    /* 札 */
  --cmt-r-btn: 6px;    /* ボタン */
  --cmt-r-pill: 999px; /* 切り替えの枠 */

  --cmt-touch: 44px;   /* 押せる所の高さの下限 */
  --cmt-header-h: 52px;
  --cmt-bnav-h: 58px;
}

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
.cmt-page {
  margin: 0;
  background: var(--cmt-white);
  color: var(--cmt-text);
  font-family: var(--cmt-font);
  font-size: var(--cmt-fs-m);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}
.cmt-page a { color: inherit; }
.cmt-page :focus-visible { outline: 3px solid var(--cmt-accent); outline-offset: 2px; }
.cmt-num { font-family: var(--cmt-font-num); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cmt-mono { font-family: var(--cmt-font-mono); font-variant-numeric: tabular-nums; }
.cmt-page [hidden] { display: none !important; }
.cmt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 値の印 */
.cmt-sample-mark {
  display: inline-block; font-size: 11px; line-height: 1; padding: 3px 6px;
  border: 1px dashed var(--cmt-text-sub); color: var(--cmt-text-sub);
  border-radius: var(--cmt-r-tag); vertical-align: middle; white-space: nowrap; font-weight: 500;
}

/* ---------- 1. ヘッダ ---------- */
.cmt-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--cmt-header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--cmt-sp-2) 0 var(--cmt-sp-4);
  background: var(--cmt-white);
  border-bottom: 1px solid var(--cmt-line);
}
.cmt-logo { display: flex; align-items: center; gap: var(--cmt-sp-2); text-decoration: none; min-height: var(--cmt-touch); }
.cmt-logo-mark { width: 22px; height: 22px; background: var(--cmt-navy); flex: none; position: relative; }
.cmt-logo-mark::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 6px; height: 3px; background: var(--cmt-white); }
.cmt-logo-text { font-size: 14px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.cmt-header-nav { display: none; }
.cmt-icon-btn {
  width: var(--cmt-touch); height: var(--cmt-touch);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--cmt-navy); cursor: pointer; border-radius: var(--cmt-r-btn);
}
.cmt-icon-btn:hover { background: var(--cmt-surface); }
.cmt-icon-btn svg { width: 24px; height: 24px; }

/* ---------- 2. メニュー（右から出る） ---------- */
.cmt-menu-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(22, 32, 43, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.cmt-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(86vw, 360px); background: var(--cmt-white);
  transform: translateX(100%); transition: transform .22s ease;
  display: flex; flex-direction: column;
  box-shadow: -2px 0 16px rgba(22, 32, 43, .15);
}
.cmt-menu[data-open="false"] { visibility: hidden; transition: transform .22s ease, visibility 0s .22s; }
.cmt-menu[data-open="true"] { transform: none; visibility: visible; }
.cmt-menu[data-open="true"] + .cmt-menu-overlay,
.cmt-menu-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
.cmt-menu-head {
  height: var(--cmt-header-h); flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--cmt-sp-2) 0 var(--cmt-sp-4); border-bottom: 1px solid var(--cmt-line);
  font-weight: 700; font-size: var(--cmt-fs-m);
}
.cmt-menu-body { overflow-y: auto; padding: 0 0 var(--cmt-sp-6); }
.cmt-menu-group { padding-top: var(--cmt-sp-4); }
.cmt-menu-group h3 {
  margin: 0; padding: 0 var(--cmt-sp-4) var(--cmt-sp-1);
  font-size: var(--cmt-fs-xs); font-weight: 700; color: var(--cmt-text-sub); letter-spacing: .06em;
}
.cmt-menu-group ul { list-style: none; margin: 0; padding: 0; }
.cmt-menu-group a {
  display: flex; align-items: center; gap: var(--cmt-sp-2);
  min-height: 48px; padding: 0 var(--cmt-sp-4);
  text-decoration: none; font-size: var(--cmt-fs-m); border-bottom: 1px solid var(--cmt-line);
}
.cmt-menu-group a:hover { background: var(--cmt-surface); }
.cmt-menu-group a .cmt-dot { margin-right: 2px; }
.cmt-menu-note { font-size: var(--cmt-fs-xs); color: var(--cmt-text-sub); margin-left: auto; }

/* ---------- 3. 下の固定ナビ（スマホ） ---------- */
.cmt-bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--cmt-bnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--cmt-white); border-top: 1px solid var(--cmt-line);
}
.cmt-bnav a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; text-decoration: none; color: var(--cmt-text-sub);
  font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center;
}
.cmt-bnav a svg { width: 22px; height: 22px; }
.cmt-bnav a[aria-current="page"] { color: var(--cmt-navy); }
.cmt-bnav a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; background: var(--cmt-navy);
}
.cmt-bnav a.cmt-bnav-cta {
  margin: 6px 4px 6px 0; background: var(--cmt-cta); color: var(--cmt-white); border-radius: var(--cmt-r-btn);
}
.cmt-bnav-label > span { display: inline-block; }
.cmt-bnav-spacer { height: calc(var(--cmt-bnav-h) + env(safe-area-inset-bottom) + var(--cmt-sp-4)); }

/* ---------- 4. 切り替え ---------- */
/* 4-1 種類の切り替え（横幅いっぱい 4 つ割り・色の丸と件数） */
.cmt-seg-wrap {
  position: sticky; top: var(--cmt-header-h); z-index: 30;
  background: var(--cmt-white); padding: var(--cmt-sp-2) var(--cmt-sp-4);
  border-bottom: 1px solid var(--cmt-line);
}
.cmt-seg {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  padding: 3px; background: var(--cmt-surface); border: 1px solid var(--cmt-line); border-radius: var(--cmt-r-pill);
}
.cmt-seg button {
  min-height: 48px; min-width: 0; padding: 4px 2px;
  border: 0; background: transparent; border-radius: var(--cmt-r-pill); cursor: pointer;
  font: inherit; color: var(--cmt-text); line-height: 1.25;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cmt-seg-label { font-size: 13px; font-weight: 700; white-space: nowrap; }
.cmt-seg-count { font-size: 11px; color: var(--cmt-text-sub); display: inline-flex; align-items: center; gap: 4px; }
.cmt-seg button[aria-pressed="true"] { background: var(--cmt-navy); color: var(--cmt-white); }
.cmt-seg button[aria-pressed="true"] .cmt-seg-count { color: #C9D3DE; }
.cmt-seg button[aria-pressed="true"] .cmt-dot { box-shadow: 0 0 0 2px var(--cmt-white); }

/* 4-2 小さな切り替え（2〜3 個） */
.cmt-toggle {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--cmt-surface); border: 1px solid var(--cmt-line); border-radius: var(--cmt-r-pill);
}
.cmt-toggle button {
  min-height: 38px; padding: 0 14px; border: 0; background: transparent; border-radius: var(--cmt-r-pill);
  font: inherit; font-size: 13px; font-weight: 700; color: var(--cmt-text); cursor: pointer; white-space: nowrap;
}
/* 見た目は 38px でも、押せる所は上下に広げて 44px にする */
.cmt-toggle button { position: relative; }
.cmt-toggle button::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
.cmt-toggle button[aria-pressed="true"] { background: var(--cmt-navy); color: var(--cmt-white); }

/* 色の丸 */
.cmt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--cmt-text-sub); }
.cmt-dot--car { background: var(--cmt-car); }
.cmt-dot--bike { background: var(--cmt-bike); }
.cmt-dot--buyer { background: var(--cmt-buyer); }
.cmt-dot--found { background: var(--cmt-found); }
.cmt-dot--cluster { background: var(--cmt-cluster); }
.cmt-dot--sel { background: var(--cmt-accent); } /* 地図で選んでいる点 */

/* ---------- 5. ボタン ---------- */
.cmt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--cmt-touch); padding: 0 18px;
  border: 1px solid var(--cmt-navy); border-radius: var(--cmt-r-btn);
  background: var(--cmt-navy); color: var(--cmt-white) !important;
  font: inherit; font-size: var(--cmt-fs-m); font-weight: 700; text-decoration: none; cursor: pointer;
}
.cmt-btn:hover { background: var(--cmt-navy-hover); }
.cmt-btn--line { background: var(--cmt-white); color: var(--cmt-navy) !important; }
.cmt-btn--line:hover { background: var(--cmt-surface); }
.cmt-btn--block { display: flex; width: 100%; }

/* ---------- 6. 札 ---------- */
.cmt-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cmt-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border-radius: var(--cmt-r-tag); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
}
/* 種類の札：種類の色で塗る */
.cmt-tag--car { background: var(--cmt-car); color: var(--cmt-white); }
.cmt-tag--bike { background: var(--cmt-bike-text); color: var(--cmt-white); }
.cmt-tag--buyer { background: var(--cmt-buyer); color: var(--cmt-white); }
/* 状況の札：文字の色だけ（警察と不審バイヤーには付けない） */
.cmt-tag--searching { color: var(--cmt-searching-text); border-color: var(--cmt-searching-text); background: var(--cmt-white); }
.cmt-tag--found { color: var(--cmt-white); background: var(--cmt-found-text); }
/* 出どころの札：白地に灰色の枠 */
.cmt-tag--src { color: var(--cmt-text-sub); border-color: #B9C1CB; background: var(--cmt-white); font-weight: 500; }

/* ---------- 7. 記録のカード ---------- */
.cmt-list { list-style: none; margin: 0; padding: 0; }

/* 7-1 小さく並べる（サムネイル＋1行） */
.cmt-row {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--cmt-sp-3);
  align-items: start; min-height: 88px;
  padding: var(--cmt-sp-3) var(--cmt-sp-4);
  border-bottom: 1px solid var(--cmt-line);
  text-decoration: none; color: inherit;
}
.cmt-row:hover { background: var(--cmt-surface); }
.cmt-row-body { min-width: 0; }
.cmt-row-title {
  margin: 4px 0 2px; font-size: var(--cmt-fs-l); font-weight: 700; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cmt-meta { font-size: var(--cmt-fs-s); color: var(--cmt-text-sub); line-height: 1.5; }
.cmt-meta time { font-family: var(--cmt-font-mono); font-variant-numeric: tabular-nums; }

/* サムネイル（下に種類の色の帯） */
.cmt-thumb {
  position: relative; width: 72px; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--cmt-surface); border-radius: var(--cmt-r-box);
  border-bottom: 5px solid var(--cmt-text-sub);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.cmt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmt-thumb--car { border-bottom-color: var(--cmt-car); }
.cmt-thumb--bike { border-bottom-color: var(--cmt-bike); }
.cmt-thumb--buyer { border-bottom-color: var(--cmt-buyer); background: #3A3F46; }
.cmt-thumb--found { border-bottom-color: var(--cmt-found); }
.cmt-thumb-note { font-size: 11px; font-weight: 700; color: var(--cmt-text-sub); line-height: 1.35; padding: 0 4px; }
/* 写真の代わり */
.cmt-thumb-sample {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #C9D1DA 0%, #9AA5B1 55%, #6F7A86 100%);
  display: flex; align-items: flex-end; justify-content: flex-start; padding: 4px;
  font-size: 10px; color: var(--cmt-white); font-weight: 700;
}
.cmt-flyer-icon { width: 30px; height: 38px; background: var(--cmt-white); position: relative; }
.cmt-flyer-icon::before {
  content: ""; position: absolute; left: 5px; right: 5px; top: 7px; height: 20px;
  background: repeating-linear-gradient(#9AA1AD 0 2px, transparent 2px 6px);
}

/* 7-2 写真を大きく（2 列） */
.cmt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cmt-sp-4) var(--cmt-sp-3); padding: var(--cmt-sp-4); list-style: none; margin: 0; }
.cmt-card { display: block; text-decoration: none; color: inherit; min-width: 0; }
.cmt-card .cmt-thumb { width: 100%; aspect-ratio: 4 / 3; border-bottom-width: 6px; }
.cmt-card .cmt-tags { margin-top: var(--cmt-sp-2); }
.cmt-card .cmt-row-title { font-size: 15px; }

/* ---------- 8. 状況の帯（記録ページの頭） ---------- */
.cmt-status {
  padding: var(--cmt-sp-3) var(--cmt-sp-4); color: var(--cmt-white);
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--cmt-sp-3); row-gap: 2px;
}
.cmt-status-kind { font-size: var(--cmt-fs-xs); font-weight: 700; width: 100%; opacity: .9; }
.cmt-status-name { font-size: 26px; font-weight: 900; line-height: 1.2; }
.cmt-status-text { font-size: var(--cmt-fs-s); }
.cmt-status--searching { background: var(--cmt-searching); }
.cmt-status--found { background: var(--cmt-found-text); }
.cmt-status--police { background: var(--cmt-surface); color: var(--cmt-text); border-bottom: 1px solid var(--cmt-line); }
.cmt-status--buyer { background: var(--cmt-buyer); }

/* ---------- 9. 件数と注記 ---------- */
.cmt-count { padding: var(--cmt-sp-3) var(--cmt-sp-4) var(--cmt-sp-2); font-size: var(--cmt-fs-s); color: var(--cmt-text-sub); line-height: 1.6; }
.cmt-count strong { color: var(--cmt-text); font-size: var(--cmt-fs-m); }

/* ---------- 10. 出典の欄・注記の箱 ---------- */
.cmt-note {
  margin: var(--cmt-sp-5) var(--cmt-sp-4); padding-top: var(--cmt-sp-3);
  border-top: 2px solid var(--cmt-text); background: var(--cmt-white);
  font-size: var(--cmt-fs-s); color: var(--cmt-text-sub); line-height: 1.7;
}
.cmt-note h3 { margin: 0 0 var(--cmt-sp-2); font-size: var(--cmt-fs-m); color: var(--cmt-text); }
.cmt-note p, .cmt-note ul { margin: 0 0 var(--cmt-sp-2); }
.cmt-note ul { padding-left: 1.2em; }
.cmt-note a { color: var(--cmt-navy); font-weight: 700; text-underline-offset: 3px; }
.cmt-more {
  display: inline-flex; align-items: center; min-height: var(--cmt-touch);
  color: var(--cmt-navy); font-weight: 700; text-underline-offset: 3px;
}

/* ---------- 11. ページ下の欄 ---------- */
.cmt-footer { background: var(--cmt-surface); border-top: 1px solid var(--cmt-line); padding: var(--cmt-sp-5) var(--cmt-sp-4); font-size: var(--cmt-fs-s); }
.cmt-footer h3 { margin: 0 0 var(--cmt-sp-2); font-size: var(--cmt-fs-xs); color: var(--cmt-text-sub); letter-spacing: .06em; }
.cmt-footer ul { list-style: none; margin: 0 0 var(--cmt-sp-4); padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--cmt-sp-4); }
.cmt-footer a { display: inline-flex; align-items: center; min-height: var(--cmt-touch); text-decoration: none; font-weight: 500; }
.cmt-footer small { color: var(--cmt-text-sub); font-size: var(--cmt-fs-xs); }
.cmt-footer .cmt-footer-license { margin: var(--cmt-sp-3) 0 0; font-size: var(--cmt-fs-xs); line-height: 1.8; color: var(--cmt-text-sub); }
.cmt-footer .cmt-footer-license .cmt-footer-cc { display: inline; min-height: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 広い画面（タブレット横・PC・スマホ横） ---------- */
@media (min-width: 768px) {
  .cmt-bnav, .cmt-bnav-spacer { display: none; }
  .cmt-header { padding: 0 var(--cmt-sp-4); }
  .cmt-header-nav { display: flex; align-items: stretch; height: 100%; margin-left: auto; margin-right: var(--cmt-sp-2); }
  .cmt-header-nav a {
    display: flex; align-items: center; padding: 0 12px; text-decoration: none;
    font-size: 14px; font-weight: 700; color: var(--cmt-text-sub); border-bottom: 3px solid transparent;
  }
  .cmt-header-nav a[aria-current="page"] { color: var(--cmt-navy); border-bottom-color: var(--cmt-navy); }
  .cmt-header-nav a.cmt-header-cta {
    margin: 8px 0 8px 8px; padding: 0 14px; background: var(--cmt-cta); color: var(--cmt-white);
    border-radius: var(--cmt-r-btn); border-bottom: 0;
  }
  .cmt-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
/* とても狭いスマホ（360px 未満） */
@media (max-width: 359px) {
  .cmt-seg-label { font-size: 12px; letter-spacing: -.03em; }
  .cmt-logo-text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .cmt-menu, .cmt-menu-overlay { transition: none; }
}

/* =========================================================
   見せる順番の決まり
   - 見せる順番を決める（まとまりごとの余白・見出しの強弱）
   ========================================================= */
:root {
  --cmt-gap-section: 48px;  /* 大きなまとまり（トップの段）の間 */
  --cmt-gap-group: 24px;    /* 見出しと中身・中のまとまりの間 */
  --cmt-gap-item: 8px;      /* 並んだものの間 */
}
.cmt-page { line-height: 1.8; }

/* 見出しの強弱（大きさより、太さ・色・字間で差を付ける） */
.cmt-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--cmt-text-sub); margin-bottom: 4px; }
.cmt-h-sec { margin: 0 0 var(--cmt-gap-group); font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; color: var(--cmt-navy); }
.cmt-lead { margin: 0; font-size: 15px; line-height: 1.9; color: var(--cmt-text); }
.cmt-aside { font-size: 12px; line-height: 1.7; color: var(--cmt-text-sub); }

/* 段（トップなどの大きなまとまり） */
.cmt-band { padding: var(--cmt-gap-section) var(--cmt-sp-4) 0; }
.cmt-band--surface { background: var(--cmt-surface); padding-bottom: var(--cmt-gap-section); margin-top: var(--cmt-gap-section); }
.cmt-band-foot { margin-top: var(--cmt-gap-group); }

/* 文字は 3 段（NERV 防災アプリの「落ち着いて読める」考え方を参考に・見た目はまねしない）
   主な情報 17px・700 ／ 本文 15px・400 ／ 補足 12px・400（灰色）。ページのいちばん上の題だけ 24px（1 ページに 1 つ） */
.cmt-row-title { font-size: 17px; margin: 4px 0 2px; }
.cmt-card .cmt-row-title { font-size: 17px; }
.cmt-meta { font-size: 12px; }
.cmt-page-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; color: var(--cmt-navy); }

/* データの色は小さな印や帯だけ: 種類の札は色の地をやめ、色の丸＋文字に */
.cmt-tag--car, .cmt-tag--bike, .cmt-tag--buyer { background: transparent; color: var(--cmt-text); padding-left: 0; gap: 5px; }
.cmt-tag--car::before, .cmt-tag--bike::before, .cmt-tag--buyer::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cmt-tag--car::before { background: var(--cmt-car); }
.cmt-tag--bike::before { background: var(--cmt-bike); }
.cmt-tag--buyer::before { background: var(--cmt-buyer); }
/* 出どころの札は枠をやめ、補足の文字に */
.cmt-tag--src { border-color: transparent; padding: 0 2px; color: var(--cmt-text-sub); font-weight: 400; }

/* 件数の注記は 1 行に */
.cmt-count-line { margin: 0; padding: 8px var(--cmt-sp-4); font-size: 12px; color: var(--cmt-text-sub); }

/* 出典をたたむ */
.cmt-fold { margin: var(--cmt-gap-group) var(--cmt-sp-4); border-top: 1px solid var(--cmt-line); font-size: 12px; color: var(--cmt-text-sub); }
.cmt-fold summary { min-height: var(--cmt-touch); display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--cmt-text); font-size: 13px; list-style: none; }
.cmt-fold summary::-webkit-details-marker { display: none; }
.cmt-fold summary::after { content: "＋"; margin-left: auto; color: var(--cmt-navy); }
.cmt-fold[open] summary::after { content: "－"; }
.cmt-fold ul { margin: 0 0 12px; padding-left: 1.2em; line-height: 1.7; }

/* ロゴ画像（今のロゴ文字と同じくらいの大きさ） */
.cmt-logo-img { display: block; height: 24px; width: auto; max-width: calc(100vw - 80px); }

/* 行き先が決まっていない入口は出さない（href を付けないでおくと画面から消える。いま開いているページの印は残す） */
.cmt-header-nav a:not([href]):not([aria-current]), .cmt-bnav a:not([href]):not([aria-current]), .cmt-footer li:has(> a:not([href])) { display: none; }
.cmt-footer ul:not(:has(a[href])), .cmt-footer h3:has(+ ul:not(:has(a[href]))) { display: none; }
.cmt-more[href="#"], .th-more[href="#"] { display: none; }

/* ---------- フッターの見出しとリンクの書体の区別・ライセンスの文の行間 ---------- */
.cmt-footer h3 { margin: 0 0 var(--cmt-sp-1); padding-left: 8px; border-left: 3px solid var(--cmt-navy); font-size: 13px; line-height: 1.4; font-weight: 700; color: var(--cmt-text); letter-spacing: .08em; }
.cmt-footer ul { margin-bottom: var(--cmt-sp-5); }
.cmt-footer a { font-weight: 400; color: var(--cmt-navy); text-decoration: underline; text-decoration-color: var(--cmt-line); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cmt-footer a:hover { text-decoration-color: var(--cmt-navy); }
.cmt-footer .cmt-footer-license a { display: inline; min-height: 0; padding: 0; text-decoration-color: currentColor; }
.cmt-footer .cmt-footer-license { margin-top: var(--cmt-sp-4); padding-top: var(--cmt-sp-3); border-top: 1px solid var(--cmt-line); }
/* 公式チャンネルは外のサイトに行くことが分かるように、右上の矢印を付ける */
.cmt-footer a[href^="https://x.com"]::after, .cmt-footer a[href^="https://www.youtube.com"]::after, .cmt-footer a[href^="https://www.tiktok.com"]::after { content: "↗"; margin-left: 3px; font-size: 12px; }

/* ---------- スマホのメニュー（見出しをやめてリンクだけ・被害登録を目立たせる・公式チャンネル） ---------- */
.cmt-menu-body { padding: var(--cmt-sp-3) 0 var(--cmt-sp-6); }
.cmt-menu-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: var(--cmt-sp-1) var(--cmt-sp-4) var(--cmt-sp-3); min-height: 56px; background: var(--cmt-cta); color: #fff !important; font-size: 17px; font-weight: 700; text-decoration: none; border-radius: var(--cmt-r-btn, 4px); }
.cmt-menu-cta::before { content: "＋"; font-weight: 700; }
.cmt-menu-list { list-style: none; margin: 0; padding: 0; }
.cmt-menu-list + .cmt-menu-list { margin-top: var(--cmt-sp-3); border-top: 6px solid var(--cmt-surface); }
.cmt-menu-list a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 var(--cmt-sp-4); border-bottom: 1px solid var(--cmt-line); text-decoration: none; font-size: var(--cmt-fs-m); color: var(--cmt-text); }
.cmt-menu-list a::after { content: "›"; color: var(--cmt-text-sub); font-size: 20px; }
.cmt-menu-list--sub a { min-height: 44px; font-size: 14px; color: var(--cmt-text-sub); }
.cmt-menu-list--ch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: var(--cmt-sp-3) var(--cmt-sp-4) 0; border-top: 6px solid var(--cmt-surface); margin-top: var(--cmt-sp-3); }
.cmt-menu-list--ch a { justify-content: center; min-height: 44px; padding: 0; border: 1px solid var(--cmt-line); font-weight: 700; font-size: 14px; color: var(--cmt-navy); }
.cmt-menu-list--ch a::after { content: "↗"; margin-left: 3px; font-size: 12px; color: var(--cmt-text-sub); }

/* ---------- 対策の共通の部品（data/measures.json から出す） ---------- */
.cmt-measures { list-style: none; counter-reset: ms; margin: 0; padding: 0; }
.cmt-measures li { counter-increment: ms; position: relative; display: grid; gap: 2px; padding: 12px 0 12px 40px; border-bottom: 1px solid var(--cmt-line); }
.cmt-measures li::before { content: counter(ms); position: absolute; left: 0; top: 12px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cmt-navy); color: #fff; font-size: 14px; font-weight: 700; }
.cmt-measures b { font-size: 16px; line-height: 1.6; color: var(--cmt-text); }
.cmt-measures span { font-size: 13px; line-height: 1.7; color: var(--cmt-text-sub); }
.cmt-measures-caveat { margin: 12px 0 0; font-size: 12px; line-height: 1.8; color: var(--cmt-text-sub); }
.cmt-menu-list--ch a.cmt-menu-logo::after { display: none; }
.cmt-menu-list--ch a.cmt-menu-logo img { display: block; height: 20px; width: auto; max-width: 84%; }