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

川西図鑑

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

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

📂 カテゴリーでさがす 📍 場所でさがす

川西図鑑の使い方

川西図鑑では、探し方を選ぶことができます。

📂 カテゴリーで探す飲食店・美容・施設・地域の活動など、
カテゴリーごとに情報を探せます。

📍 場所で探す最寄り駅やエリアから、
近くのお店や施設を探せます。

準備中

記事

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

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

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

川西で活動する人たち

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

今日の川西

ランダムに1件表示しています。

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

お店のオーナー様へ

情報の修正や、写真・メニューの追加、公式図鑑ページとしての掲載が可能です。

公式掲載・掲載内容のご案内を見る

市民の皆さんへ情報提供のお願い

営業時間や定休日の変更、新店舗情報など、市民の皆さんからの情報提供を受け付けています。

情報を提供・修正する

@@ 351行目: / 351行目: @@
 .card-grid {
    display: grid;
-   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-   gap: 20px;
+   gap: 24px;
+  margin: 0 auto;
+  max-width: 800px;
 }
+/* ========================================
+   カード
+======================================== */
 .card {
-  background: #fff;
-  border-radius: 16px;
-  border: 2px solid #e5e7eb;
-  padding: 28px;
-  transition: all 0.25s ease;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-  cursor: pointer;
    position: relative;
-  overflow: hidden;
 }
-.card::before {
+.card-box {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: linear-gradient(90deg, #f59e0b, #d97706);
-  transform: scaleX(0);
-  transition: transform 0.3s ease;
-}
-.card:hover:not(.disabled) {
-  transform: translateY(-6px);
-  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.2);
-  border-color: #f59e0b;
-}
-.card:hover:not(.disabled)::before {
-  transform: scaleX(1);
-}
-.card:active:not(.disabled) {
-  transform: translateY(-2px);
-}
-.card .icon {
-  font-size: 48px;
-  margin-bottom: 20px;
-  line-height: 1;
-}
-.card .title {
-  font-size: 18px;
-  font-weight: 700;
-  color: #111827;
-  margin-bottom: 10px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.card .desc {
-  font-size: 14px;
-  color: #6b7280;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.card-main {
    display: flex;
    flex-direction: column;
-   padding: 24px;
+  align-items: center;
-   border-bottom: 1px solid #e5e7eb;
+  text-align: center;
-   margin-bottom: 20px;
+   padding: 32px 24px;
+  background: #fff;
+   border: 2px solid #e5e7eb;
+   border-radius: 16px;
    text-decoration: none;
-   color: inherit;
+   transition: all 0.3s ease;
-   border-radius: 12px;
+   box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-   transition: all 0.2s;
+   height: 100%;
-   cursor: pointer;
+   gap: 16px;
 }
-.card-main:hover {
+.card-box:hover {
-   background: #f9fafb;
+   border-color: #f59e0b;
-   transform: translateX(2px);
+  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
+   transform: translateY(-4px);
 }
-.card-main .icon {
+/* ========================================
+   カード内要素
+======================================== */
+.card-box .icon {
    font-size: 48px;
-  margin-bottom: 16px;
    line-height: 1;
+  display: block;
+  margin-bottom: 8px;
+  filter: brightness(1.1);
 }
-.card-main .title {
+.card-box .title {
-   font-size: 18px;
+   font-size: 20px;
    font-weight: 700;
    color: #111827;
-   margin-bottom: 8px;
+   display: block;
-  white-space: nowrap;
+   line-height: 1.3;
-  overflow: hidden;
-   text-overflow: ellipsis;
 }
-.card-main .desc {
+.card-box .desc {
    font-size: 14px;
    color: #6b7280;
-   white-space: nowrap;
+   display: block;
-  overflow: hidden;
+   line-height: 1.6;
-   text-overflow: ellipsis;
 }
-.card-links {
+.card-box:hover .title {
-   display: grid;
+   color: #d97706;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
 }
-.card-box {
+.card-box:hover .desc {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px 12px;
-  border: 2px solid #e5e7eb;
-  border-radius: 10px;
-  text-align: center;
-  font-size: 13px;
-  font-weight: 600;
-  text-decoration: none;
    color: #374151;
-  background: #fff;
-  transition: all 0.2s;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.card-box:hover {
-  background: #fef3c7;
-  border-color: #f59e0b;
-  color: #d97706;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
-}
-.card-box:active {
-  transform: translateY(0);
-}
-.card.disabled {
-  opacity: 0.45;
-  pointer-events: none;
-  cursor: not-allowed;
-}
-.card a,
-.card a:visited,
-.card a:hover,
-.card a:active {
-  color: inherit;
 }