hp-archive: 市民向けの情報をアイコンと色で見やすく

3 files changed, 370 insertions, 27 deletions

diff --git a/src/components/KodairaNews.astro b/src/components/KodairaNews.astro
index ffe1b89..a8a0d5c 100644
--- a/src/components/KodairaNews.astro
+++ b/src/components/KodairaNews.astro
@@ -21,6 +21,18 @@ const CATS: { id: CatId | "all"; label: string }[] = [
 
 const X = (id: string) => `https://twitter.com/kodaira_tokyo/status/${id}`;
 
+const X_ACCOUNT = "https://twitter.com/kodaira_tokyo";
+const X_LOGO =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.451-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z"/></svg>';
+
+const LABEL: Record<CatId, string> = {
+  status: "障害・復旧",
+  procedure: "手続き・申請",
+  meeting: "審議会・議会",
+  event: "イベント・募集",
+  other: "その他",
+};
+
 const posts: Post[] = [
   {
     date: "10月16日",
@@ -272,11 +284,20 @@ const countOf = (id: CatId | "all") =>
 ---
 
 <div class="kd-news" data-kodaira-news>
+  <header class="kd-news-head">
+    <span class="kd-news-x" set:html={X_LOGO}></span>
+    <span class="kd-news-head-text">
+      <strong>小平市公式X</strong>
+      <span class="kd-news-handle">@kodaira_tokyo</span>
+    </span>
+    <a class="kd-news-follow" href={X_ACCOUNT} rel="noopener">Xで見る</a>
+  </header>
+
   <fieldset class="kd-news-filter">
     <legend class="kd-news-legend">分類で絞る</legend>
     {
       CATS.map((c) => (
-        <label class="kd-news-chip">
+        <label class={`kd-news-chip kd-news-chip--${c.id}`}>
           <input type="radio" name="kd-news-cat" value={c.id} checked={c.id === "all"} />
           <span>
             {c.label}
@@ -293,15 +314,20 @@ const countOf = (id: CatId | "all") =>
     <ul class="kd-news-list">
       {
         posts.map((p) => (
-          <li data-cat={p.cat}>
-            {p.date}{" "}
-            {p.links.map((l, i) => (
-              <>
-                {i > 0 && "／"}
-                <a href={l.url}>{l.text}</a>
-              </>
-            ))}
-            {p.note && `（${p.note}）`}
+          <li data-cat={p.cat} class={`kd-news-item kd-news-item--${p.cat}`}>
+            <span class={`kd-news-badge kd-news-badge--${p.cat}`}>{LABEL[p.cat]}</span>
+            <span class="kd-news-date">{p.date}</span>
+            <span class="kd-news-body">
+              {p.links.map((l, i) => (
+                <>
+                  {i > 0 && "／"}
+                  <a href={l.url} rel="noopener">
+                    {l.text}
+                  </a>
+                </>
+              ))}
+              {p.note && `（${p.note}）`}
+            </span>
           </li>
         ))
       }
@@ -312,10 +338,65 @@ const countOf = (id: CatId | "all") =>
 </div>
 
 <style>
+  .kd-news-head {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+    margin: 0 0 0.7rem;
+    padding: 0.6rem 0.85rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 10px;
+    background: var(--sl-color-bg-sidebar);
+  }
+  .kd-news-x {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 1.9rem;
+    height: 1.9rem;
+    border-radius: 50%;
+    background: var(--sl-color-text);
+    color: var(--sl-color-bg);
+  }
+  .kd-news-x :global(svg) {
+    width: 1.05rem;
+    height: 1.05rem;
+    display: block;
+  }
+  .kd-news-head-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    line-height: 1.25;
+  }
+  .kd-news-head-text strong {
+    font-size: 0.95rem;
+  }
+  .kd-news-handle {
+    font-size: 0.78rem;
+    opacity: 0.7;
+  }
+  .kd-news-follow {
+    flex: none;
+    margin-left: auto;
+    padding: 0.3rem 0.75rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 999px;
+    color: var(--sl-color-text-accent);
+    font-size: 0.82rem;
+    font-weight: 700;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .kd-news-follow:hover {
+    background: var(--sl-color-accent-low);
+  }
+
   .kd-news-filter {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.4rem 1rem;
+    gap: 0.4rem;
     align-items: center;
     margin: 0 0 0.5rem;
     padding: 0.5rem 0.8rem;
@@ -328,23 +409,90 @@ const countOf = (id: CatId | "all") =>
     opacity: 0.7;
   }
   .kd-news-chip {
+    position: relative;
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
-    font-size: 0.85rem;
+    padding: 0.18rem 0.65rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 999px;
+    font-size: 0.82rem;
     cursor: pointer;
   }
   .kd-news-chip input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
     margin: 0;
+    opacity: 0;
   }
   .kd-news-chip:has(input:checked) {
     font-weight: 700;
   }
+  .kd-news-chip:has(input:focus-visible) {
+    outline: 2px solid var(--sl-color-accent);
+    outline-offset: 2px;
+  }
   .kd-news-count {
-    margin-left: 0.25rem;
+    margin-left: 0.15rem;
     font-size: 0.75em;
     opacity: 0.7;
   }
+  .kd-news-chip--all:has(input:checked) {
+    color: var(--sl-color-text-accent);
+    border-color: currentColor;
+    background: var(--sl-color-accent-low);
+  }
+  .kd-news-chip--status:has(input:checked) {
+    color: #b3261e;
+    border-color: #f2b8b5;
+    background: #fce8e6;
+  }
+  .kd-news-chip--procedure:has(input:checked) {
+    color: #0b57d0;
+    border-color: #a8c7fa;
+    background: #e8f0fe;
+  }
+  .kd-news-chip--meeting:has(input:checked) {
+    color: #6a1b9a;
+    border-color: #ce93d8;
+    background: #f3e5f5;
+  }
+  .kd-news-chip--event:has(input:checked) {
+    color: #1b5e20;
+    border-color: #a5d6a7;
+    background: #e8f5e9;
+  }
+  .kd-news-chip--other:has(input:checked) {
+    color: #455a64;
+    border-color: #b0bec5;
+    background: #eceff1;
+  }
+  :global([data-theme="dark"]) .kd-news-chip--status:has(input:checked) {
+    color: #ffb4ab;
+    border-color: rgba(255, 180, 171, 0.45);
+    background: rgba(255, 180, 171, 0.14);
+  }
+  :global([data-theme="dark"]) .kd-news-chip--procedure:has(input:checked) {
+    color: #a8c7fa;
+    border-color: rgba(168, 199, 250, 0.45);
+    background: rgba(168, 199, 250, 0.14);
+  }
+  :global([data-theme="dark"]) .kd-news-chip--meeting:has(input:checked) {
+    color: #ce93d8;
+    border-color: rgba(206, 147, 216, 0.45);
+    background: rgba(206, 147, 216, 0.16);
+  }
+  :global([data-theme="dark"]) .kd-news-chip--event:has(input:checked) {
+    color: #a5d6a7;
+    border-color: rgba(165, 214, 167, 0.45);
+    background: rgba(165, 214, 167, 0.14);
+  }
+  :global([data-theme="dark"]) .kd-news-chip--other:has(input:checked) {
+    color: #cfd8dc;
+    border-color: rgba(207, 216, 220, 0.4);
+    background: rgba(207, 216, 220, 0.12);
+  }
   .kd-news-hint {
     margin: 0 0 0.4rem;
     font-size: 0.8rem;
@@ -361,18 +509,97 @@ const countOf = (id: CatId | "all") =>
   }
   .kd-news-list {
     margin: 0;
-    padding-inline-start: 1.3rem;
+    padding: 0;
+    list-style: none;
   }
   .kd-news-list li {
-    margin-bottom: 0.35rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.45rem;
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px dashed var(--sl-color-gray-6, var(--sl-color-gray-5));
     line-height: 1.6;
   }
   .kd-news-list li:last-child {
     margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
   }
   .kd-news-list li.is-hidden {
     display: none;
   }
+  .kd-news-badge {
+    flex: none;
+    padding: 0.1rem 0.45rem;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    font-size: 0.68rem;
+    font-weight: 700;
+    line-height: 1.5;
+    white-space: nowrap;
+  }
+  .kd-news-date {
+    flex: none;
+    font-size: 0.78rem;
+    opacity: 0.75;
+    font-variant-numeric: tabular-nums;
+  }
+  .kd-news-body {
+    flex: 1 1 12rem;
+    min-width: 0;
+  }
+  .kd-news-badge--status {
+    color: #b3261e;
+    background: #fce8e6;
+    border-color: #f2b8b5;
+  }
+  .kd-news-badge--procedure {
+    color: #0b57d0;
+    background: #e8f0fe;
+    border-color: #a8c7fa;
+  }
+  .kd-news-badge--meeting {
+    color: #6a1b9a;
+    background: #f3e5f5;
+    border-color: #ce93d8;
+  }
+  .kd-news-badge--event {
+    color: #1b5e20;
+    background: #e8f5e9;
+    border-color: #a5d6a7;
+  }
+  .kd-news-badge--other {
+    color: #455a64;
+    background: #eceff1;
+    border-color: #b0bec5;
+  }
+  :global([data-theme="dark"]) .kd-news-badge--status {
+    color: #ffb4ab;
+    background: rgba(255, 180, 171, 0.14);
+    border-color: rgba(255, 180, 171, 0.4);
+  }
+  :global([data-theme="dark"]) .kd-news-badge--procedure {
+    color: #a8c7fa;
+    background: rgba(168, 199, 250, 0.14);
+    border-color: rgba(168, 199, 250, 0.4);
+  }
+  :global([data-theme="dark"]) .kd-news-badge--meeting {
+    color: #ce93d8;
+    background: rgba(206, 147, 216, 0.16);
+    border-color: rgba(206, 147, 216, 0.4);
+  }
+  :global([data-theme="dark"]) .kd-news-badge--event {
+    color: #a5d6a7;
+    background: rgba(165, 214, 167, 0.14);
+    border-color: rgba(165, 214, 167, 0.4);
+  }
+  :global([data-theme="dark"]) .kd-news-badge--other {
+    color: #cfd8dc;
+    background: rgba(207, 216, 220, 0.12);
+    border-color: rgba(207, 216, 220, 0.35);
+  }
   .kd-news-none {
     margin: 0.5rem 0 0;
     font-size: 0.85rem;
diff --git a/src/content/docs/kodaira-data/hp-archive.mdx b/src/content/docs/kodaira-data/hp-archive.mdx
index 921a5ac..70f7277 100644
--- a/src/content/docs/kodaira-data/hp-archive.mdx
+++ b/src/content/docs/kodaira-data/hp-archive.mdx
@@ -77,7 +77,14 @@ import KodairaNews from '@/components/KodairaNews.astro';
 
 ## お問い合わせ先（電話番号）
 
-各課の電話番号は、市の[臨時案内ページ（暫定ページ）](https://www.city.kodaira.tokyo.jp/)の「[各課の電話番号一覧](https://www.city.kodaira.tokyo.jp/contact-info/index.html)」に、部署・担当別にまとまっています。代表電話は 042-341-1211 です。
+<div class="info-callout">
+<p class="info-callout-icon" aria-hidden="true">📞</p>
+<div class="info-callout-body">
+<p class="info-callout-label">市役所 代表電話</p>
+<p class="info-callout-tel"><a href="tel:0423411211">042-341-1211</a></p>
+<p class="info-callout-note">各課の電話番号は、市の<a href="https://www.city.kodaira.tokyo.jp/">臨時案内ページ（暫定ページ）</a>の「<a href="https://www.city.kodaira.tokyo.jp/contact-info/index.html">各課の電話番号一覧</a>」に、部署・担当別にまとまっています。</p>
+</div>
+</div>
 
 ## よく使うアプリと緊急時の情報
 
@@ -85,14 +92,44 @@ import KodairaNews from '@/components/KodairaNews.astro';
 
 ### スマートフォンアプリ
 
-- **小平ごみ分別アプリ**: 地区別の収集カレンダー、分別方法、収集日のお知らせなどを確認できます。[App Store](https://apps.apple.com/jp/app/id1434362104)／[Google Play](https://play.google.com/store/apps/details?id=jp.gomisuke.app.Gomisuke0125)
-- **小平市防災マップアプリ**: 避難場所・避難所などを、オフラインでも確認できます。[App Store](https://apps.apple.com/jp/app/id789620170)／[Google Play](https://play.google.com/store/apps/details?id=jp.chuogeomatics.kodairabousai)
+<div class="info-cards">
+
+<div class="info-card">
+<p class="info-card-icon" aria-hidden="true">🗑️</p>
+<div>
+<p><strong>小平ごみ分別アプリ</strong></p>
+<p>地区別の収集カレンダー、分別方法、収集日のお知らせなどを確認できます。</p>
+<p class="info-card-links"><a href="https://apps.apple.com/jp/app/id1434362104">App Store</a>／<a href="https://play.google.com/store/apps/details?id=jp.gomisuke.app.Gomisuke0125">Google Play</a></p>
+</div>
+</div>
+
+<div class="info-card">
+<p class="info-card-icon" aria-hidden="true">🗺️</p>
+<div>
+<p><strong>小平市防災マップアプリ</strong></p>
+<p>避難場所・避難所などを、オフラインでも確認できます。</p>
+<p class="info-card-links"><a href="https://apps.apple.com/jp/app/id789620170">App Store</a>／<a href="https://play.google.com/store/apps/details?id=jp.chuogeomatics.kodairabousai">Google Play</a></p>
+</div>
+</div>
+
+</div>
 
 アプリの説明は、市ホームページの「[小平市公式アプリ](https://web.archive.org/web/20260814165132/https://www.city.kodaira.tokyo.jp/kurashi/044/044432.html)」（アーカイブ）をご覧ください。
 
 ### 緊急時に見たい情報
 
-- **休日・準夜応急診療／休日歯科応急診療**: 休日や夜間の診療は、市ホームページの「[休日・夜間応急診療](https://web.archive.org/web/20260227093909/https://www.city.kodaira.tokyo.jp/kurashi/index03001008.html)」（アーカイブ）をご覧ください。代表電話 042-341-1211
+<div class="info-cards">
+
+<div class="info-card info-card--alert">
+<p class="info-card-icon" aria-hidden="true">🚑</p>
+<div>
+<p><strong>休日・準夜応急診療／休日歯科応急診療</strong></p>
+<p>休日や夜間の診療は、市ホームページの「<a href="https://web.archive.org/web/20260227093909/https://www.city.kodaira.tokyo.jp/kurashi/index03001008.html">休日・夜間応急診療</a>」（アーカイブ）をご覧ください。</p>
+<p>代表電話 <a href="tel:0423411211">042-341-1211</a></p>
+</div>
+</div>
+
+</div>
 
 アーカイブのため内容が古い可能性があります。受診の前に、電話でご確認ください。
 
@@ -216,14 +253,14 @@ This is a temporary page run by Kodaira City Council member Yohei Yasutake. Whil
 
 | 分野 | 件数 |
 |---|---|
-| [くらし・手続き・税](/kodaira-data/hp-archive/kurashi/) | 438 |
-| [防災・防犯](/kodaira-data/hp-archive/bousai/) | 163 |
-| [こども・教育](/kodaira-data/hp-archive/kodomo/) | 423 |
-| [健康・福祉](/kodaira-data/hp-archive/kenkou/) | 445 |
-| [ごみ・環境](/kodaira-data/hp-archive/gomi/) | 423 |
-| [文化・スポーツ・市民活動](/kodaira-data/hp-archive/bunka/) | 159 |
-| [施設案内](/kodaira-data/hp-archive/shisetsu/) | 303 |
-| [市政情報・広報](/kodaira-data/hp-archive/shisei/) | 1086 |
+| 📝 [くらし・手続き・税](/kodaira-data/hp-archive/kurashi/) | 438 |
+| 🛡️ [防災・防犯](/kodaira-data/hp-archive/bousai/) | 163 |
+| 🎒 [こども・教育](/kodaira-data/hp-archive/kodomo/) | 423 |
+| 🏥 [健康・福祉](/kodaira-data/hp-archive/kenkou/) | 445 |
+| ♻️ [ごみ・環境](/kodaira-data/hp-archive/gomi/) | 423 |
+| 🎭 [文化・スポーツ・市民活動](/kodaira-data/hp-archive/bunka/) | 159 |
+| 🏛️ [施設案内](/kodaira-data/hp-archive/shisetsu/) | 303 |
+| 📰 [市政情報・広報](/kodaira-data/hp-archive/shisei/) | 1086 |
 
 ## その他
 
diff --git a/src/styles/custom.css b/src/styles/custom.css
index ef3bbb7..2dfac9c 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -221,6 +221,85 @@
   color: var(--sl-color-text, inherit);
 }
 
+/* ── 市民がよく使う情報のカード（アプリ・緊急時の情報）── */
+.info-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
+  gap: 0.7rem;
+  margin: 1rem 0;
+}
+.info-card {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  margin: 0;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 10px;
+  background: var(--sl-color-bg-sidebar, transparent);
+}
+.info-card--alert {
+  border-color: var(--sl-color-orange-high, #b95000);
+}
+.info-card-icon {
+  flex: none;
+  margin: 0;
+  font-size: 1.6rem;
+  line-height: 1.1;
+}
+.info-card > div {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.info-card > div > p {
+  margin: 0.3rem 0 0;
+  font-size: 0.9rem;
+  text-align: left;
+}
+.info-card > div > p:first-child {
+  margin-top: 0;
+  font-size: 0.95rem;
+}
+.info-card-links a {
+  font-weight: 700;
+}
+
+/* ── 代表電話などの案内ボックス ── */
+.info-callout {
+  display: flex;
+  gap: 0.85rem;
+  align-items: center;
+  margin: 1rem 0;
+  padding: 0.9rem 1.1rem;
+  border: 2px solid var(--sl-color-accent);
+  border-radius: 10px;
+  background: var(--sl-color-accent-low);
+}
+.info-callout-icon {
+  flex: none;
+  margin: 0;
+  font-size: 1.8rem;
+  line-height: 1;
+}
+.info-callout-body p {
+  margin: 0;
+  text-align: left;
+}
+.info-callout-label {
+  font-size: 0.82rem;
+  opacity: 0.85;
+}
+.info-callout .info-callout-tel {
+  font-size: 1.4rem;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+  line-height: 1.2;
+}
+.info-callout-body .info-callout-note {
+  margin-top: 0.35rem;
+  font-size: 0.85rem;
+}
+
 /* Tables inside bubbles */
 .bln table {
   display: table !important;