2025年12月25日 (木) 12:07時点における版

川西図鑑

川西の「お店・人・場所」を集めた地域図鑑

飲食店から地域の活動まで。
川西市にある情報を、誰でも書き、誰でも探せます。

📖 図鑑を見るこのサイトについて

図鑑で探す

🍽 飲食店川西市内の飲食店情報

🏬 お店・店舗準備中

👤 人・団体準備中

🗺 場所・スポット準備中

準備中

記事

川西のさまざまな図鑑ページに関連する、
ユーザーが書いた記事を紹介します。

川西能勢口で見つけた小さな名店

昔の川西と今を比べてみる

川西で活動する人たち

記事一覧を見る記事を書く

今日の川西

偶然の出会いから、川西を知る。

エラー: テーブル飲食店情報が見つかりません。

@@ 17行目: / 17行目: @@
        </p>
        <div class="hero-actions">
-         <a class="btn primary" href="/wiki/飲食店検索">川西を探す</a>
+         <a class="kz-btn primary kz-with-icon" href="/wiki/飲食店検索">
-         <a class="btn secondary" href="/wiki/My_wiki:川西図鑑について">このサイトについて</a>
+          <span class="kz-icon">📖</span>
+          <span class="kz-label">図鑑を見る</span>
+</a>
+         <a class="kz-btn secondary" href="/wiki/My_wiki:川西図鑑について">このサイトについて</a>
        </div>
      </div>
@@ 90行目: / 93行目: @@
    <div class="center-actions">
-     <a href="/wiki/記事一覧" class="btn primary">記事一覧を見る</a>
+     <a href="/wiki/記事一覧" class="kz-btn primary">記事一覧を見る</a>
-     <a href="/wiki/記事を書く" class="btn ghost">記事を書く</a>
+     <a href="/wiki/記事を書く" class="kz-btn ghost">記事を書く</a>
    </div>
@@ 224行目: / 227行目: @@
    flex-wrap: wrap;
 }
+.kz-with-icon .kz-icon {
+  font-size: 1.2em;
+  line-height: 1;
+  transform: translateY(-1px);
+}
 /* ---------- Buttons ---------- */
-.btn {
+.kz-btn {
-   display: inline-block;
+   display: inline-flex;
-   padding: 0.5em 1em;
+  align-items: center;
+  gap: 12px;
+   padding: 14px 22px;
+  border-radius: 12px;
+  font-weight: 700;
    text-decoration: none;
-   border-bottom: solid 4px #627295;
+   line-height: 1;
-   border-radius: 3px;
+   position: relative;
 }
-.btn.primary {
+.kz-btn.primary {
-   background: #2563eb;
+   background: linear-gradient(
+    to bottom,
+    #4f46e5,
+    #4338ca
+  );
    color: #fff;
+  border: 1px solid rgba(0,0,0,0.2);
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.25),
+3px 0 #312e81,
+10px 24px rgba(49,46,129,0.45);
 }
-.btn.primary:hover {
+.kz-btn.primary:hover {
    background: #1d4ed8;
 }
-.btn.secondary {
+.kz-primary::after {
-   background: #f1f5f9;
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border-radius: 10px;
+  border: 1px solid rgba(255,255,255,0.25);
+  pointer-events: none;
+}
+.kz-btn.secondary {
+   background: linear-gradient(
+    to bottom,
+    #f8fafc,
+    #e5e7eb
+  );
    color: #1f2937;
-   border-color: #d1d5db;
+   border: 1px solid #d1d5db;
+  border-radius: 12px;
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.9),
+2px 0 #cbd5e1,
+6px 14px rgba(0,0,0,0.15);
 }
-.btn.secondary:hover {
+.kz-btn.secondary:hover {
-   background: #e5e7eb;
+   background: linear-gradient(
+    to bottom,
+    #ffffff,
+    #e5e7eb
+  );
 }
-.btn.ghost {
+.kz-btn.ghost {
+  background: rgba(255,255,255,0.6);
+  color: #374151;
    border: 1px solid #9ca3af;
-   color: #374151;
+   border-radius: 12px;
-   background: transparent;
+   box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.8),
+1px 0 rgba(0,0,0,0.08);
 }
@@ 432行目: / 485行目: @@
 }
-.skin-theme-clientpref-night .btn.secondary {
+.skin-theme-clientpref-night .kz-btn.secondary {
    background: #374151;
    color: #f9fafb;