hp-archive: SNSアイコンと経緯の折り畳み、休日診療を更新

3 files changed, 158 insertions, 40 deletions

diff --git a/src/components/SnsLinks.astro b/src/components/SnsLinks.astro
new file mode 100644
index 0000000..bc0f234
--- /dev/null
+++ b/src/components/SnsLinks.astro
@@ -0,0 +1,113 @@
+---
+// 市の公式SNSの一覧。各サービス名の左にブランドアイコンを表示する。
+type Icon = "x" | "line" | "facebook" | "instagram" | "youtube";
+
+const ICONS: Record<Icon, string> = {
+  x: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><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>',
+  line: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 10.304c0-5.369-5.383-9.738-12-9.738-6.616 0-12 4.369-12 9.738 0 4.814 4.269 8.846 10.036 9.608.391.084.924.258 1.059.592.122.303.08.777.039 1.084l-.172 1.028c-.052.303-.24 1.187 1.039.647 1.28-.54 6.899-4.065 9.414-6.958 1.736-1.902 2.585-3.83 2.585-5.998ZM8.774 13.511H6.109a.644.644 0 0 1-.644-.644V7.72a.644.644 0 0 1 1.288 0v4.503h2.021a.644.644 0 0 1 0 1.288Zm2.786-.644a.644.644 0 0 1-1.288 0V7.72a.644.644 0 0 1 1.288 0v5.147Zm5.723 0a.644.644 0 0 1-1.102.494l-2.588-1.859v1.365a.644.644 0 0 1-1.288 0V7.72a.644.644 0 0 1 1.102-.494l2.588 1.859V7.72a.644.644 0 0 1 1.288 0v5.147Zm4.463-3.501h-2.021v1.147h2.021a.644.644 0 0 1 0 1.288h-2.021v1.159h2.021a.644.644 0 0 1 0 1.288h-2.665a.644.644 0 0 1-.644-.644V7.72a.644.644 0 0 1 .644-.644h2.665a.644.644 0 0 1 0 1.288Z"/></svg>',
+  facebook:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 12.073C24 5.446 18.627 0 12 0S0 5.446 0 12.073C0 18.062 4.388 23.027 10.125 23.927v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073Z"/></svg>',
+  instagram:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0Zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03Zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162ZM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4Zm7.846-10.405a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0Z"/></svg>',
+  youtube:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814ZM9.545 15.568V8.432L15.818 12l-6.273 3.568Z"/></svg>',
+};
+
+const SNS: { icon: Icon; name: string; handle: string; url: string }[] = [
+  { icon: "x", name: "X（旧Twitter）", handle: "@kodaira_tokyo", url: "https://twitter.com/kodaira_tokyo" },
+  { icon: "line", name: "LINE", handle: "小平市（公式）", url: "https://page.line.me/kodairacity" },
+  { icon: "facebook", name: "Facebook", handle: "小平市役所広報課", url: "https://www.facebook.com/koho.kodairacity/" },
+  { icon: "instagram", name: "Instagram", handle: "@kodaira_city", url: "https://www.instagram.com/kodaira_city" },
+  {
+    icon: "youtube",
+    name: "YouTube",
+    handle: "小平市公式チャンネル",
+    url: "https://www.youtube.com/channel/UCp9YZtjCNcGOq3fQlln31Xg",
+  },
+];
+---
+
+<ul class="sns-links">
+  {
+    SNS.map((s) => (
+      <li>
+        <a href={s.url}>
+          <span class={`sns-badge sns-${s.icon}`} set:html={ICONS[s.icon]} />
+          <span class="sns-name">{s.name}</span>
+          <span class="sns-handle">{s.handle}</span>
+        </a>
+      </li>
+    ))
+  }
+</ul>
+
+<style>
+  .sns-links {
+    display: grid;
+    gap: 0.4rem;
+    margin: 1rem 0;
+    padding: 0;
+    list-style: none;
+  }
+  .sns-links li {
+    margin: 0;
+  }
+  .sns-links a {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.4rem 0.6rem;
+    border: 1px solid var(--sl-color-gray-6, var(--sl-color-gray-5));
+    border-radius: 10px;
+    text-decoration: none;
+    line-height: 1.4;
+  }
+  .sns-links a:hover {
+    background: var(--sl-color-bg-sidebar);
+    border-color: var(--sl-color-gray-5);
+  }
+  .sns-badge {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 1.7rem;
+    height: 1.7rem;
+    border-radius: 8px;
+    color: #fff;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
+  }
+  .sns-badge :global(svg) {
+    display: block;
+    width: 1.05rem;
+    height: 1.05rem;
+  }
+  .sns-x {
+    background: #0f1419;
+  }
+  .sns-line {
+    background: #06c755;
+  }
+  .sns-facebook {
+    background: #1877f2;
+  }
+  .sns-instagram {
+    background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
+  }
+  .sns-youtube {
+    background: #ff0033;
+  }
+  .sns-name {
+    flex: none;
+    font-weight: 700;
+    color: var(--sl-color-text);
+  }
+  .sns-handle {
+    min-width: 0;
+    color: var(--sl-color-gray-2);
+    font-size: 0.9em;
+  }
+  :global([data-theme="dark"]) .sns-badge {
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
+  }
+</style>
diff --git a/src/content/docs/kodaira-data/hp-archive.mdx b/src/content/docs/kodaira-data/hp-archive.mdx
index 70f7277..5d46142 100644
--- a/src/content/docs/kodaira-data/hp-archive.mdx
+++ b/src/content/docs/kodaira-data/hp-archive.mdx
@@ -5,11 +5,23 @@ tableOfContents: true
 ---
 
 import KodairaNews from '@/components/KodairaNews.astro';
+import SnsLinks from '@/components/SnsLinks.astro';
 
 小平市議会議員の安竹洋平です。
 
 小平市は[臨時案内ページ（暫定ページ）](https://www.city.kodaira.tokyo.jp/)を公開しましたが、本来のホームページはまだ停止しており、復旧までには時間を要することが予想されます。停止したホームページのデータは、バックアップも含めて失われた可能性が高い状況です。このページでは、臨時案内ページ（暫定ページ）に記載のない防災メールやよくある質問など稼働中のサービスへのリンクと、アーカイブにしか残っていない情報を掲載しています。
 
+:::note
+##### このページは暫定版です
+- 小平市ホームページの復旧状況にあわせて、内容を予告なく更新・削除することがあります。
+- リンク先は過去に保存されたページです。保存日以降に市が内容を更新している場合、表示される情報が古いことがあります。
+- 最新の情報は、お電話で市の担当課にお問い合わせください。
+- このページは随時更新しています。以前の内容が表示される場合は、ブラウザーの再読み込みをお試しください（Windows: Ctrl+F5、Mac: ⌘+Shift+R、スマートフォン: ブラウザーのメニューの再読み込み）。
+:::
+
+<details>
+<summary>このページを設けた経緯と技術的な補足</summary>
+
 このページを設けた経緯は、次のとおりです。
 
 - **令和8年10月7日**: 市ホームページが停止。同日、IDCフロンティアが、クラウドの一部システムが第三者から不正アクセスを受け、障害が発生していることを公表。小平市ホームページがこのクラウド上にあることは公表されておらず、安竹がSNSの情報やコマンドラインでの確認から把握した。同じSNSの情報などから、データがバックアップも含めて失われた可能性があると判断。情報漏えいの懸念もあるが、閉鎖が長期化すれば市民と職員に影響が及ぶと考え、同日14時ごろにこのページを公開。夜、担当課の電話番号一覧を追加。
@@ -17,15 +29,7 @@ import KodairaNews from '@/components/KodairaNews.astro';
 - **令和8年10月9日**: 午後、市が[臨時案内ページ（暫定ページ）](https://www.city.kodaira.tokyo.jp/)を公開。内容が重なるため、重複する情報は臨時案内ページ（暫定ページ）に集約し、このページからは削除。
 - **令和8年10月14日**: 市公式Xの最新ポスト、アプリ、緊急時の情報、窓口の受付時間、多言語の案内を追加。古い情報には印（⛔は1年以上前、⚠️は6か月以上前）を付与。
 - **令和8年10月15日**: ホームページの停止が長期化しているため、復旧を待たずにアーカイブを公開することにした。全分野で取り直して約3,440件とし、各ページの更新日を追加。1ページが重くなりすぎたため分野別のページに分け、1年以上前に保存されたページにはリンクの下に注意書きを添えた。
-- **令和8年10月16日**: 市公式Xのポストを10月7日以降分まで整理して掲載し、そこから判明した審議会等の開催予定を追加。
-
-:::note
-##### このページは暫定版です
-- 小平市ホームページの復旧状況にあわせて、内容を予告なく更新・削除することがあります。
-- リンク先は過去に保存されたページです。保存日以降に市が内容を更新している場合、表示される情報が古いことがあります。
-- 最新の情報は、お電話で市の担当課にお問い合わせください。
-- このページは随時更新しています。以前の内容が表示される場合は、ブラウザーの再読み込みをお試しください（下の「このページの使い方」をご覧ください）。
-:::
+- **令和8年10月16日**: 市公式Xのポストを10月7日以降分まで整理して掲載し、そこから判明した審議会等の開催予定を追加。また、市公式Xの画像をもとに、休日応急診療などの情報を追加。
 
 <div class="tech-note">
 
@@ -49,6 +53,8 @@ import KodairaNews from '@/components/KodairaNews.astro';
 
 </div>
 
+</details>
+
 ## 市からの最新のお知らせ
 
 市は、市ホームページがご利用いただけない間の情報を、公式X（旧Twitter）で発信しています。最新の状況は、[小平市公式X（@kodaira_tokyo）](https://twitter.com/kodaira_tokyo)をご確認ください。
@@ -123,37 +129,29 @@ import KodairaNews from '@/components/KodairaNews.astro';
 <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>
+<p><strong>休日応急診療・準夜応急診療（内科・小児科）</strong></p>
+<p>小平市医師会応急診療所（学園東町1-19-12、健康センター内）</p>
+<p>電話 <a href="tel:0423463706">042-346-3706</a></p>
+<ul>
+<li>休日応急診療：日曜日・祝日・年末年始／診療 午前9時から午後5時まで、受付 午前9時から午後4時45分まで</li>
+<li>準夜応急診療：月曜日から日曜日（年中無休）／診療 午後7時30分から午後10時30分まで、受付 午後7時15分から午後10時15分まで</li>
+</ul>
+<p>診療科目は内科と小児科です。高校生以下の受診は、保護者の同伴が必要です。生後3か月未満のお子さんは、対応が難しい場合がありますので、事前にお問い合わせください。</p>
 </div>
 </div>
 
+<div class="info-card info-card--alert">
+<p class="info-card-icon" aria-hidden="true">🦷</p>
+<div>
+<p><strong>休日歯科応急診療（10月18日）</strong></p>
+<p>10月18日（日）は、鈴木歯科医院（天神町2-3-32、電話 042-345-0505）で実施します。診療時間は午前9時から午後5時までです。</p>
+<p>受診の際は、事前に医療機関へお問い合わせください。医療機関は変更になる場合があります。</p>
+</div>
 </div>
 
-アーカイブのため内容が古い可能性があります。受診の前に、電話でご確認ください。
-
-## このページの使い方（検索・再読み込み）
-
-アーカイブのリンク一覧は、分野ごとのページに分かれています（下の「分野別のアーカイブ」から選べます）。目的の情報をすばやく探すには、次の方法をお使いください。
-
-- 分野が分かっているときは、その分野のページを開き、ブラウザーの「ページ内検索」でキーワードを絞り込みます。
-  - Windows: Ctrl キーを押しながら F キーを押します。
-  - Mac: command（⌘）キーを押しながら F キーを押します。
-  - スマートフォン: ブラウザーのメニューから「ページ内を検索」を選び、キーワードを入力します。
-- どの分野にあるか分からないときは、画面右上の検索（Ctrl+K。Macでは⌘K）をお使いください。複数のページからキーワードで探せます。
-
-ページ内検索の検索欄に「ごみ」「保育園」「防災」などのキーワードを入力すると、そのページの同じ言葉が強調表示されます。分野別のページは分野ごとに分かれているため、見つからないときは別の分野のページもお試しください。
-
-### 更新した内容が表示されないとき
-
-このページを更新しても、お使いのブラウザーに古い内容が残っている（キャッシュ）ことがあります。以前の内容が表示される場合は、次の方法で再読み込みしてください。
-
-- Windows: Ctrl キーを押しながら F5 キーを押します（または Shift キーを押しながら再読み込みします）。
-- Mac: command（⌘）キーと Shift キーを押しながら R キーを押します。
-- スマートフォン: ブラウザーのメニューから「再読み込み」を選びます。改善しない場合は、タブを一度閉じて開き直します。
+</div>
 
-ページ末尾に表示される「最終更新日」が、直近の日付になっているかもご確認ください。
+市の公式Xのポスト（2026年10月16日）にもとづいています。変更されている場合がありますので、受診の前に電話でご確認ください。市ホームページの「<a href="https://web.archive.org/web/20260227093909/https://www.city.kodaira.tokyo.jp/kurashi/index03001008.html">休日・夜間応急診療</a>」（アーカイブ）もご覧いただけます。
 
 ## 多言語のご案内（Multilingual）
 
@@ -215,11 +213,7 @@ This is a temporary page run by Kodaira City Council member Yohei Yasutake. Whil
 
 ### 市の公式SNS
 
-- X（旧Twitter）: [@kodaira_tokyo](https://twitter.com/kodaira_tokyo)
-- LINE: [小平市（公式）](https://page.line.me/kodairacity)
-- Facebook: [小平市役所広報課](https://www.facebook.com/koho.kodairacity/)
-- Instagram: [@kodaira_city](https://www.instagram.com/kodaira_city)
-- YouTube: [小平市公式チャンネル](https://www.youtube.com/channel/UCp9YZtjCNcGOq3fQlln31Xg)
+<SnsLinks />
 
 詳しい説明は、市ホームページの「[小平SNSについて](https://web.archive.org/web/20260516185808/https://www.city.kodaira.tokyo.jp/kurashi/070/070020.html)」（アーカイブ）をご覧ください。
 
@@ -236,7 +230,8 @@ This is a temporary page run by Kodaira City Council member Yohei Yasutake. Whil
 
 過去に保存されたページ（アーカイブ）へのリンクを、分野ごとのページに分けて掲載しています。下の「分野別のアーカイブ」からお目当ての分野を選んでください。ご利用に当たっては、次の点にご注意ください。
 
-- 各分野のページではどれも、ページ内検索（Ctrl+F など）でキーワードを探せます。
+- 各分野のページではどれも、ブラウザーのページ内検索（Windows: Ctrl+F、Mac: ⌘+F、スマートフォン: メニューの「ページ内を検索」）でキーワードを探せます。
+- どの分野にあるか分からないときは、画面右上の検索（Ctrl+K。Macでは⌘K）をお使いください。複数のページからキーワードで探せます。
 - 各リンクは、非営利団体「インターネットアーカイブ」が保存している過去のページを開きます。ページの上部に保存日時が表示されます。
 - 表中の「保存日」は、そのページがアーカイブに最後に保存された日です。日付が古いものは、内容が現在と異なる可能性があります。
 - 右端の小さな日付は、そのページを市が最後に更新した日（更新日）です。内容の新しさの参考にしてください（取得できなかったものは空欄です）。
diff --git a/src/styles/custom.css b/src/styles/custom.css
index 2dfac9c..e1e455f 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -260,6 +260,16 @@
   margin-top: 0;
   font-size: 0.95rem;
 }
+.info-card ul {
+  margin: 0.3rem 0 0;
+  padding-inline-start: 1.1rem;
+  font-size: 0.9rem;
+  text-align: left;
+}
+.info-card ul li {
+  margin: 0.15rem 0;
+  line-height: 1.6;
+}
 .info-card-links a {
   font-weight: 700;
 }