/* =========================================================
   新サイト トップ
   - parts.css の後に読み込む。クラス名は pt-
   - 最初の画面の写真は --pt-hero-img、各カードの写真は <img> を足すだけで入る（形はそのまま）
   ========================================================= */


/* 1 最初の画面 */
.pt-hero { padding: 40px 16px 36px; background: var(--cmt-white); border-bottom: 1px solid var(--cmt-line); }
.pt-hero .cmt-lead { color: var(--cmt-text-sub); }
.pt-entries { display: grid; gap: 10px; margin-top: 28px; }
.pt-entries .cmt-btn { min-height: 52px; justify-content: space-between; padding: 0 18px; font-size: 16px; }
.pt-entries .cmt-btn::after { content: "→"; }

/* 2 テーマ */
.pt-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; margin: 0; padding: 0; }
.pt-theme { display: block; height: 100%; padding: 14px 14px 16px; text-decoration: none; background: var(--cmt-white); border: 1px solid var(--cmt-line); border-top: 4px solid var(--cmt-line); }
.pt-theme--car { border-top-color: var(--cmt-car); }
.pt-theme--bike { border-top-color: var(--cmt-bike); }
.pt-theme--guide { border-top-color: var(--cmt-text-sub); }
.pt-theme small { display: block; font-size: 12px; color: var(--cmt-text-sub); }
.pt-theme b { display: block; margin-top: 2px; font-size: 17px; line-height: 1.5; }

/* 3 直近の盗難 */
.pt-recent { margin: 0 -16px; border-top: 1px solid var(--cmt-line); }

/* 4 地図とデータ */
.pt-mapdata { display: grid; gap: 16px; }
.pt-tilemap { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.pt-tilemap rect { stroke: var(--cmt-surface); stroke-width: 2; }
.pt-legend { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--cmt-text-sub); }
.pt-legend i { display: inline-block; width: 18px; height: 10px; }
.pt-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-links .cmt-btn { font-size: 15px; }

/* 5 防ぐ・知らせる */
.pt-act { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cmt-line); }
.pt-act a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--cmt-line); text-decoration: none; }
.pt-act svg { width: 26px; height: 26px; color: var(--cmt-navy); justify-self: center; }
.pt-act b { display: block; font-size: 17px; }
.pt-act small { display: block; font-size: 12px; color: var(--cmt-text-sub); line-height: 1.6; }
.pt-act a::after { content: "→"; color: var(--cmt-navy); }

@media (min-width: 768px) {
  .pt-wrap { max-width: 760px; margin: 0 auto; }
  .pt-entries { grid-template-columns: 1fr 1fr; }
  .pt-themes { grid-template-columns: repeat(4, 1fr); }
  .pt-mapdata { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* 追加 1：最初の画面に写真（淡い青・薄く）、記録の見出しの横に 3 つの数字 */
.pt-hero { position: relative; overflow: hidden; padding: 56px 16px 44px; background: var(--cmt-region-bg); border-bottom: 0; }
.pt-hero-bg {
  position: absolute; inset: -8% -20% -8% -10%;
  background: var(--pt-hero-img, none) 70% 60% / cover no-repeat;
  opacity: .5; transform: scale(1.06);
}
.pt-hero::after { /* 文字側（左上）を白っぽく、写真は右下へ抜ける */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 42%, rgba(238,248,252,.15) 100%);
}
.pt-hero-in { position: relative; z-index: 1; }
.pt-hero .cmt-aside { color: var(--cmt-text); }
.pt-hero .cmt-btn--line { background: rgba(255,255,255,.88); }



/* 追加 2：コーナーの区切り（Airwars を参考に）・数字は見出しの横・テーマに写真 */
.pt-sec { padding: 40px 16px 48px; background: var(--cmt-white); }
.pt-sec--surface { background: var(--cmt-surface); }
.pt-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding-top: 14px; margin-bottom: 20px; border-top: 3px solid var(--cmt-navy);
}
.pt-sec-head .cmt-h-sec { margin: 0; font-size: 20px; }
.pt-sec-head .cmt-eyebrow { color: var(--cmt-navy); }
.pt-sec-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; }
.pt-sec-foot { margin-top: 20px; }
.pt-sec--surface .cmt-list { background: var(--cmt-white); }

/* 見出しの横の数字（2 行・表にしない） */
.pt-stats { flex: none; margin: 0; display: flex; flex-direction: column; align-items: flex-end; font-size: 11px; line-height: 1.5; color: var(--cmt-text-sub); text-align: right; white-space: nowrap; }
.pt-stats b { font-size: 15px; color: var(--cmt-text); margin: 0 1px; }
.pt-stat-total b { font-size: 20px; color: var(--cmt-accent); }

/* 地図とデータは紺の地で区切る */
.pt-sec--navy { background: var(--cmt-navy); color: #fff; }
.pt-sec--navy .pt-sec-head { border-top-color: #fff; }
.pt-sec--navy .cmt-eyebrow { color: #B3D9FF; }
.pt-sec--navy .cmt-h-sec, .pt-sec--navy .cmt-lead { color: #fff; }
.pt-sec--navy .cmt-aside, .pt-sec--navy .pt-legend { color: #C9D6E3; }
.pt-sec--navy .pt-tilemap rect { stroke: var(--cmt-navy); }
.pt-sec--navy .cmt-btn { background: #fff; color: var(--cmt-navy) !important; border-color: #fff; }
.pt-sec--navy .cmt-btn--line { background: transparent; color: #fff !important; }

/* テーマの写真 */
.pt-theme { padding: 0 0 14px; }
.pt-theme small, .pt-theme b { padding: 0 12px; }
.pt-theme small { margin-top: 10px; }
.pt-theme-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #fff; }
.pt-theme-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pt-theme--car .pt-theme-img img, .pt-theme--bike .pt-theme-img img { object-fit: contain; padding: 4px; }
.pt-theme b { font-size: 16px; }
.cmt-fold { margin-top: 32px; }
.pt-sec-head .cmt-h-sec { font-size: 18px; white-space: nowrap; }
.pt-stat-total b { font-size: 18px; }
.pt-stats b { font-size: 14px; }
.pt-sec--navy .pt-tilemap { max-width: 250px; }
.cmt-fold { margin-top: 8px; }
@media (max-width: 359px) { .pt-sec-head .cmt-h-sec { white-space: normal; } }

/* 追加 3：区切り線をなくす・テーマは写真の上に言葉を載せる */
.pt-sec-head, .pt-sec--navy .pt-sec-head { border-top: 0; padding-top: 0; }
.pt-theme {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 3; padding: 0 0 12px; overflow: hidden; background: #fff;
}
.pt-theme-img { position: absolute; inset: 0; aspect-ratio: auto; background: #fff; }
.pt-theme-img img { width: 100%; height: 100%; object-fit: cover; opacity: .6; filter: saturate(.75); }
.pt-theme--car .pt-theme-img img, .pt-theme--bike .pt-theme-img img { object-fit: contain; object-position: center 20%; padding: 6px 10px 28px; }
.pt-theme::after { /* 下を白く抜いて、言葉を読みやすく */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.78) 62%, rgba(255,255,255,.95) 100%);
}
.pt-theme small, .pt-theme b { position: relative; z-index: 1; }
.pt-theme small { margin-top: 0; font-weight: 700; color: var(--cmt-text-sub); }
.pt-theme b { font-size: 17px; line-height: 1.35; color: var(--cmt-navy); }

/* 追加 4：データ・分析（分析／統計資料の 2 カラム） */
.pt-data { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-data-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 12px 12px; border: 1px solid var(--cmt-line); background: var(--cmt-white); text-decoration: none; color: var(--cmt-text); }
.pt-data-fig { display: block; width: 100%; height: auto; margin-bottom: 8px; background: var(--cmt-surface); padding: 6px; }
.pt-data-card .cmt-eyebrow { margin: 0; color: var(--cmt-navy); }
.pt-data-card b { font-size: 16px; line-height: 1.4; }
.pt-data-card small { font-size: 12px; line-height: 1.6; color: var(--cmt-text-sub); flex: 1; }
.pt-data-more { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--cmt-navy); }
.pt-sec--surface .pt-act { background: transparent; }
@media (max-width: 340px) { .pt-data { grid-template-columns: 1fr; } }

/* 追加 5：MAP は地図の画像の上に文字を重ねる・データ・分析は写真 */
.pt-mapsec { position: relative; overflow: hidden; padding: 0; min-height: 440px; background: #1D232A; }
.pt-mapsec-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.pt-mapsec::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,43,69,.88) 0%, rgba(13,43,69,.25) 30%, rgba(13,43,69,.15) 55%, rgba(13,43,69,.92) 82%); }
.pt-mapsec-in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 440px; padding: 36px 16px 20px; }
.pt-mapsec .pt-sec-head { margin: 0; }
.pt-mapsec-foot .cmt-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.7; }
.pt-mapsec-credit { margin: 10px 0 0; font-size: 10px; color: #C9D6E3; text-align: right; }
.pt-data-fig { display: block; aspect-ratio: 16 / 10; margin: -14px -12px 10px; padding: 0; overflow: hidden; background: var(--cmt-surface); }
.pt-data-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pt-data-fig { width: calc(100% + 24px); max-width: none; align-self: auto; }

/* 追加 6：データ・分析も写真の上に言葉を載せる（テーマと同じ形） */
.pt-data-fig { position: relative; aspect-ratio: 4 / 3; margin-bottom: 10px; }
.pt-data-fig img { opacity: .6; filter: saturate(.75); }
.pt-data-fig::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.78) 60%, rgba(255,255,255,.95) 100%); }
.pt-data-label { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; display: flex; flex-direction: column; }
.pt-data-label .cmt-eyebrow { color: var(--cmt-text-sub); }
.pt-data-label b { font-size: 17px; line-height: 1.35; color: var(--cmt-navy); }
/* PCX の写真は枠いっぱいに（縦横比はそのまま・はみ出る所は切る） */
.pt-theme--bike .pt-theme-img img { object-fit: cover; object-position: center 40%; padding: 0; }

/* ---- 追加の所 ---- */
/* 写真が無いときの形 */
.pt-theme-img:empty { background: var(--cmt-surface); }
.pt-theme--car .pt-theme-img:empty { background: var(--cmt-car-bg); }
.pt-theme--bike .pt-theme-img:empty { background: var(--cmt-bike-bg); }
.pt-data-fig:empty { background: var(--cmt-surface); }
.pt-mapsec { background: var(--cmt-navy); }
.pt-mapsec::after { background: none; }
/* 行き先が決まっていない入口は出さない（href を付けないでおけば、画面から消える） */
.pt-act li:has(> a:not([href])), .pt-sec-more:not([href]), .pt-data-card:not([href]), .pt-entries a:not([href]) { display: none; }
.pt-data:not(:has(> a[href])), .pt-act:not(:has(a[href])) { display: none; }
.pt-empty { padding: 16px; font-size: 15px; color: var(--cmt-text-sub); line-height: 1.7; }
.pt-sec:has(.pt-data:not(:has(> a[href]))), .pt-sec:has(.pt-act:not(:has(a[href]))) { display: none; }
.pt-mapsec, .pt-mapsec-in { min-height: 0; }
.pt-mapsec-in { padding: 36px 16px 28px; gap: 20px; }
.lm-sample { background: var(--cmt-surface); border-bottom: 1px solid var(--cmt-line); padding: 8px 16px; font-size: 12px; color: var(--cmt-text-sub); line-height: 1.6; }

/* ---------- トップの追加分 ---------- */
.pt-hero-bg { --pt-hero-img: url("../img/top-hero.svg"); opacity: 1; }
.pt-hero-sub { margin: 10px 0 0; font-size: 14px; line-height: 1.7; font-weight: 700; color: var(--cmt-text); }
.pt-mapsec-bg { opacity: .9; }
.pt-measures { display: grid; gap: 16px; margin-bottom: 20px; }
.pt-measures-col { background: var(--cmt-white); padding: 16px 16px 8px; border-top: 4px solid var(--cmt-car); }
.pt-measures-col--bike { border-top-color: var(--cmt-bike); }
.pt-measures-col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 17px; color: var(--cmt-navy); }
.pt-measures-col .cmt-measures-caveat { padding-bottom: 8px; }
.pt-act { margin-top: 0; }
@media (min-width: 768px) { .pt-measures { grid-template-columns: 1fr 1fr; } }

/* 小さい画面で横にはみ出さない（見出しの横の数字は折り返す・背景は枠で切る） */
.pt-wrap { overflow-x: clip; }
.pt-sec-head { flex-wrap: wrap; }
.pt-stats { white-space: normal; align-items: flex-start; text-align: left; }
.pt-stats > span { display: block; }
@media (min-width: 768px) { .pt-stats { align-items: flex-end; text-align: right; } }

/* テーマカードの写真（白地の車・バイクの写真）: 切り取らず全体を見せる・色は薄めない・下の言葉の場所を空ける。拡大しすぎない（枠より大きくしない） */
.pt-theme--car .pt-theme-img img, .pt-theme--bike .pt-theme-img img { object-fit: contain; object-position: center top; padding: 8px 10px 52px; opacity: 1; filter: none; image-rendering: auto; }
.pt-theme-img { background: #fff; }
.pt-theme::after { background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.9) 78%, rgba(255,255,255,.97) 100%); }

/* 最初の画面の写真: うっすら敷く（主役はキャッチコピー）。写真は切り取って全面に。薄い白を重ねる */
.pt-hero { background: #fff; }
.pt-hero-bg { position: absolute; inset: 0; background: none; opacity: 1; transform: none; margin: 0; }
.pt-hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: .32; filter: saturate(.8); }
.pt-hero::after { background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,.8) 100%); }
.pt-hero .cmt-page-title, .pt-hero-sub { text-shadow: 0 0 10px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.9); }
.pt-hero-sub { color: var(--cmt-text); }
@media (min-width: 768px) { .pt-hero::after { background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.4) 100%); } }

/* テーマの地域（写真なし・色の帯だけ） */
.pt-theme--region { aspect-ratio: auto; min-height: 84px; justify-content: center; border-top-color: var(--cmt-line); background: var(--cmt-surface); }
.pt-theme--region::after { display: none; }
.pt-theme--region .pt-theme-img { display: none; }
.pt-theme--region small { color: var(--cmt-text-sub); } .pt-theme--region b { color: var(--cmt-navy); }
.pt-theme--region { padding: 12px 0; }
.pt-themes--region { margin-top: 10px; }
.pt-themes--region:empty { display: none; }
.pt-theme--region { min-height: 64px; }
@media (min-width: 768px) { .pt-themes--region { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* MAP と 分析・統計資料の背景の写真（うっすら敷く・文字を目立たせる） */
.pt-mapsec-bg { position: absolute; inset: 0; z-index: 0; opacity: 1; display: block; }
.pt-mapsec-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; opacity: .26; filter: saturate(.7); }
.pt-mapsec::after { background: linear-gradient(180deg, rgba(13,43,69,.55) 0%, rgba(13,43,69,.3) 45%, rgba(13,43,69,.7) 100%); }
.pt-mapsec .cmt-h-sec, .pt-mapsec .cmt-lead { text-shadow: 0 0 8px rgba(13,43,69,.9); }
.pt-data-fig picture { display: block; width: 100%; height: 100%; }
.pt-data-fig img { opacity: .42; filter: saturate(.7); }
.pt-data-fig::after { background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,.95) 100%); }


/* 県の写真がある県の地域のカード: 写真をうっすら後ろに敷き、白を重ねて文字を読めるように（写真が無い県は県の形のカードのまま） */
.pt-theme--photo .cmt-region-photo { position: absolute; inset: 0; display: block; }
.pt-theme--photo .cmt-region-photo img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.pt-theme--region.pt-theme--photo::after { display: block; background: linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.84) 48%, rgba(255,255,255,.12) 100%); }

/* 地域のカードは、車・バイクのテーマのカードと同じ大きさ（横 4：縦 3）。写真は全面に敷き、下に白のぼかしで文字を読めるように（写真が無い県も同じ大きさ） */
.pt-theme--region { aspect-ratio: 4 / 3; min-height: 0; padding: 0 0 12px; justify-content: flex-end; }
.pt-theme--region.pt-theme--photo::after { display: block; background: linear-gradient(180deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.9) 78%, rgba(255,255,255,.97) 100%); }

/* テーマが 5 つのときは、PC では 1 列に 5 枚並べる（4 枚＋1 枚に分かれて崩れないように）。数が変わると元の 4 列に戻る */
@media (min-width: 768px) { .pt-themes:not(.pt-themes--region):has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* PC では、車・バイクのカードも県のカードも同じ列の幅（1 行 5 枚）にして、全部のカードを同じ大きさに */
@media (min-width: 768px) { .pt-themes, .pt-themes--region { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* トップのテーマの車・バイクのカードも、説明（small）の長さで写真の大きさが変わらないようにする。説明は写真の左上の小さな札、写真の枠はどのカードも同じ大きさ */
.pt-theme--car small, .pt-theme--bike small { position: absolute; z-index: 2; left: 6px; top: 6px; max-width: calc(100% - 12px); margin: 0; padding: 2px 6px; background: rgba(255,255,255,.92); border: 1px solid var(--cmt-line); font-size: 11px; line-height: 1.35; font-weight: 500; color: var(--cmt-text); }
.pt-theme--car .pt-theme-img img, .pt-theme--bike .pt-theme-img img { object-position: center; padding: 36px 10px 40px; }
@media (min-width: 760px) { .pt-theme--car .pt-theme-img img, .pt-theme--bike .pt-theme-img img { padding-top: 30px; } }
.pt-theme--car, .pt-theme--bike { aspect-ratio: 1 / 1; }