「飲食店ジャンル一覧」の版間の差分

← 古い編集新しい編集 →

ビジュアルウィキテキスト

2026年1月23日 (金) 12:25時点における版

川西市内の飲食店をジャンル別にまとめました。

気になるジャンルをタップすると、該当する飲食店一覧をご覧いただけます。

ジャンルごとの一覧ページでは、営業時間・アクセス・写真・地図などの情報をまとめて掲載しています。

ランチ・ディナー・テイクアウト対応のお店探しにもご活用ください。

@@ 33行目: / 33行目: @@
 <html>
 <style>
+/* ========================================
+   ジャンル一覧
+======================================== */
+.genre-list {
+  margin: 2em 0;
+}
 .genre-list a,
 .genre-list a:link,
@@ 45行目: / 52行目: @@
    list-style: none;
    padding: 0;
-   margin: 1em 0;
+   margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
 }
 .genre-list li {
-   margin-bottom: 0.6em;
+   margin: 0;
 }
 .genre-list a {
-   display: block;
+   display: flex;
-   padding: 1em 1.1em;
+  align-items: center;
-   border-radius: 16px;
+  justify-content: space-between;
-   border: 1px solid rgba(0, 0, 0, 0.08);
+   padding: 18px 20px;
-   background: #f8f9fa;
+   border-radius: 12px;
-  text-decoration: none;
+   border: 2px solid #e5e7eb;
+   background: #fff;
    font-weight: 600;
-   transition: background 0.15s ease, transform 0.15s ease;
+  font-size: 15px;
+   transition: all 0.2s ease;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.genre-list a::before {
+  content: '›';
+  position: absolute;
+  right: 20px;
+  font-size: 24px;
+  color: #9ca3af;
+  transition: all 0.2s ease;
 }
 .genre-list a:hover {
-   background: #f1f3f5;
+   background: #fef3c7;
-   transform: translateY(-1px);
+  border-color: #f59e0b;
+   transform: translateX(4px);
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
 }
-/* ダークモード（OS or Citizen自動） */
+.genre-list a:hover::before {
+  color: #f59e0b;
+  transform: translateX(4px);
+}
+.genre-list a:active {
+  transform: translateX(2px);
+}
+/* ========================================
+   ダークモード
+======================================== */
+.skin-theme-clientpref-night .genre-list a {
+  border-color: #3a3a3a;
+  background: #2a2a2a;
+  color: #e5e7eb;
+}
+.skin-theme-clientpref-night .genre-list a::before {
+  color: #6b7280;
+}
+.skin-theme-clientpref-night .genre-list a:hover {
+  background: #374151;
+  border-color: #f59e0b;
+}
+.skin-theme-clientpref-night .genre-list a:hover::before {
+  color: #fbbf24;
+}
+/* ========================================
+   ダークモード（自動）
+======================================== */
 @media (prefers-color-scheme: dark) {
- .skin-theme-clientpref-night .genre-list a,
+  .skin-theme-clientpref-os .genre-list a {
- .skin-theme-clientpref-os .genre-list a {
+    border-color: #3a3a3a;
-     border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #2a2a2a;
-     background: #1e1e1e;
+    color: #e5e7eb;
+  }
+  .skin-theme-clientpref-os .genre-list a::before {
+    color: #6b7280;
+  }
+  .skin-theme-clientpref-os .genre-list a:hover {
+    background: #374151;
+     border-color: #f59e0b;
+  }
+  .skin-theme-clientpref-os .genre-list a:hover::before {
+     color: #fbbf24;
    }
+}
- .skin-theme-clientpref-night  .genre-list a:hover,
+/* ========================================
- .skin-theme-clientpref-os  .genre-list a:hover  {
+   レスポンシブ
-     background: #2a2a2a;
+======================================== */
+@media (max-width: 768px) {
+  .genre-list ul {
+    grid-template-columns: 1fr;
+  }
+  .genre-list a {
+    padding: 16px 18px;
+     font-size: 14px;
    }
 }
 </style>
 </html>