From b93eb11d1741cd231a40df9ca9aacf1ea71d9b6f Mon Sep 17 00:00:00 2001
From: Last2014 <info@last2014.com>
Date: Sat, 28 Mar 2026 22:18:28 +0900
Subject: [PATCH] =?UTF-8?q?Chg:=20Card.astro=E3=81=AEpadding=E3=82=92?=
 =?UTF-8?q?=E8=AA=BF=E6=95=B4=20/=20New:=20=E8=A9=B3=E7=B4=B0=E3=82=92?=
 =?UTF-8?q?=E8=A1=A8=E3=81=A7=E8=A1=A8=E7=A4=BA=20/=20New:=20scroll-paddin?=
 =?UTF-8?q?g-top=E3=82=92=E6=8C=87=E5=AE=9A=20/=20New:=20scroll-behavior?=
 =?UTF-8?q?=E3=82=92=E6=8C=87=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/icons/age.svg      |  1 -
 public/icons/cake.svg     |  1 -
 public/icons/calendar.svg |  1 -
 public/icons/gender.svg   |  1 -
 public/icons/location.svg |  1 -
 public/icons/world.svg    |  1 -
 src/components/Card.astro |  2 +-
 src/pages/index.astro     | 72 ++++++++++++++++++++++++++++++++-------
 src/styles/global.css     |  2 ++
 9 files changed, 63 insertions(+), 19 deletions(-)
 delete mode 100644 public/icons/age.svg
 delete mode 100644 public/icons/cake.svg
 delete mode 100644 public/icons/calendar.svg
 delete mode 100644 public/icons/gender.svg
 delete mode 100644 public/icons/location.svg
 delete mode 100644 public/icons/world.svg

diff --git a/public/icons/age.svg b/public/icons/age.svg
deleted file mode 100644
index f42eb78..0000000
--- a/public/icons/age.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M260-720q-33 0-56.5-23.5T180-800q0-33 23.5-56.5T260-880q33 0 56.5 23.5T340-800q0 33-23.5 56.5T260-720Zm420 200q-25 0-42.5-17.5T620-580q0-25 17.5-42.5T680-640q25 0 42.5 17.5T740-580q0 25-17.5 42.5T680-520ZM180-80v-280h-60v-240q0-33 23.5-56.5T200-680h120q22 0 40 10.5t29 29.5l143 247 41-61q8-12 21.5-19t28.5-7h117q25 0 42.5 17.5T800-420v140h-40v200H600v-284l-31 44h-88L380-496v416H180Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/cake.svg b/public/icons/cake.svg
deleted file mode 100644
index bf73fb7..0000000
--- a/public/icons/cake.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M160-80q-17 0-28.5-11.5T120-120v-200q0-33 23.5-56.5T200-400v-160q0-33 23.5-56.5T280-640h160v-58q-18-12-29-29t-11-41q0-15 6-29.5t18-26.5l56-56 56 56q12 12 18 26.5t6 29.5q0 24-11 41t-29 29v58h160q33 0 56.5 23.5T760-560v160q33 0 56.5 23.5T840-320v200q0 17-11.5 28.5T800-80H160Zm120-320h400v-160H280v160Zm-80 240h560v-160H200v160Zm80-240h400-400Zm-80 240h560-560Zm560-240H200h560Z"/></svg>
diff --git a/public/icons/calendar.svg b/public/icons/calendar.svg
deleted file mode 100644
index 792f6f5..0000000
--- a/public/icons/calendar.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z"/></svg>
diff --git a/public/icons/gender.svg b/public/icons/gender.svg
deleted file mode 100644
index 120e166..0000000
--- a/public/icons/gender.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M220-80v-300h-60v-220q0-33 23.5-56.5T240-680h120q33 0 56.5 23.5T440-600v220h-60v300H220Zm80-640q-33 0-56.5-23.5T220-800q0-33 23.5-56.5T300-880q33 0 56.5 23.5T380-800q0 33-23.5 56.5T300-720ZM600-80v-240H480l102-306q8-26 29.5-40t48.5-14q27 0 48.5 14t29.5 40l102 306H720v240H600Zm60-640q-33 0-56.5-23.5T580-800q0-33 23.5-56.5T660-880q33 0 56.5 23.5T740-800q0 33-23.5 56.5T660-720Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/location.svg b/public/icons/location.svg
deleted file mode 100644
index 4c01f3c..0000000
--- a/public/icons/location.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/world.svg b/public/icons/world.svg
deleted file mode 100644
index 8108652..0000000
--- a/public/icons/world.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm0-82q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"/></svg>
\ No newline at end of file
diff --git a/src/components/Card.astro b/src/components/Card.astro
index 0941c1a..ad0e6c4 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -42,7 +42,7 @@ a {
   align-items: center;
   text-decoration: none;
   width: var(--width);
-  padding: 0.75rem;
+  padding: 0.75rem 1rem;
   border-radius: 1rem;
   background-color: #ffffff;
   color: #000000;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6e00113..dfa0657 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -27,15 +27,27 @@ import supports from "@/constants/supports";
   </div>
   
   <div class="section">
-    <span>詳細</span>
-    
-    {details.map((detail) => (
-      <Card {...detail} canDarkInvert />
-    ))}
+    <span id="detail">詳細</span>
+
+    <div class="table">
+      <table>
+        <tbody>
+          {details.map((detail, i) => (
+            <tr class={i === 0 || i === details.length - 1
+                ? "edge"
+                : ""}
+            >
+              <td>{detail.title}</td>
+              <td>{detail.description}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   </div>
   
   <div class="section">
-    <span>リンク</span>
+    <span id="link">リンク</span>
     
     {links.map((link) => (
       <Card {...link} />
@@ -43,7 +55,7 @@ import supports from "@/constants/supports";
   </div>
 
   <div class="section">
-    <span>支援</span>
+    <span id="support">支援</span>
     
     {supports.map((link) => (
       <Card {...link} canDarkInvert isFullWidth />
@@ -51,7 +63,7 @@ import supports from "@/constants/supports";
   </div>
   
   <div class="section">
-    <span>連絡先</span>
+    <span id="contant">連絡先</span>
     
     {contacts.map((contact) => (
       <Card canDarkInvert {...contact} isFullWidth />
@@ -95,7 +107,8 @@ import supports from "@/constants/supports";
 }
 
 .section {
-  width: 70dvw;
+  min-width: 20rem;
+  width: 80dvw;
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
@@ -103,14 +116,49 @@ import supports from "@/constants/supports";
 
 .section span {
   width: 100%;
-  min-width: 20rem;
   font-weight: bold;
   font-size: 2rem;
   user-select: none;
   -webkit-user-select: none;
 }
-</style>
 
+.section .table {
+  width: 100%;
+  overflow: hidden;
+  padding: 0.75rem 1rem;
+  background-color: #ffffff;
+  color: #000000;
+  padding: 0.75rem 1rem;
+  border-radius: 1rem;
+}
+
+.section table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.section .table table tbody tr,
+.section .table table tbody td {
+  padding: 0.25rem;
+  font-size: 1.1rem;
+}
+
+.section .table table tbody tr {
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.section .table table tbody tr.edge {
+  border: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .section .table {
+    background-color: #000000;
+    color: #ffffff;
+  }
+}
+</style>
 
 <script>
   const birthday = new Date("2014-12-08");
@@ -127,7 +175,7 @@ import supports from "@/constants/supports";
     return age;
   }
 
-  const cardDescriptions = Array.from(document.querySelectorAll(".card-description"));
+  const cardDescriptions = Array.from(document.querySelectorAll("td"));
   const ageData = cardDescriptions.filter(el => el.textContent === "")[0];
   ageData.textContent = getAge() + "歳";
 </script>
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index dc1a4fa..600d8c3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -24,6 +24,8 @@ html, body {
   min-height: 100dvh;
   font-family: "Noto Sans JP", sans-serif;
   word-break: break-all;
+  scroll-padding-top: calc(78.6667px + 1rem);
+  scroll-behavior: smooth;
   overscroll-behavior-x: none;
   scrollbar-width: thin;
   color: var(--text-color);