2026年1月29日 (木) 10:31時点における版

@@ 1行目: / 1行目: @@
-<templatestyles src="ジャンル一覧/styles.css" />
 <html>
 <style>
@@ 22行目: / 21行目: @@
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  overflow: hidden;
 }
@@ 48行目: / 48行目: @@
    flex-direction: column;
    gap: 10px;
-   margin-bottom: 16px;
+   margin-bottom: 0;
 }
@@ 84行目: / 84行目: @@
    color: #f59e0b;
    transform: translateX(2px);
+}
+/* トグルボタン専用スタイル */
+.genre-toggle {
+  cursor: pointer;
+}
+.genre-toggle::after {
+  content: '▼';
+  font-size: 14px;
+  transition: transform 0.3s ease;
+}
+/* 開いている状態 */
+.genre-card:target .genre-toggle::after {
+  transform: rotate(180deg);
 }
@@ 93行目: / 109行目: @@
    overflow: hidden;
    opacity: 0;
-   transition: all 0.4s ease;
+   transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
 }
 /* :target で開閉制御 */
 .genre-card:target .subgenres {
-   max-height: 1000px;
+   max-height: 2000px;
    opacity: 1;
    margin-top: 16px;
@@ 192行目: / 208行目: @@
 /* ========================================
-    ダークモード（自動）
+    ダークモード(自動)
 ======================================== */
 @media (prefers-color-scheme: dark) {
@@ 262行目: / 278行目: @@
      padding: 12px 14px;
    }
+}
+/* ========================================
+   JavaScriptでのトグル制御用
+======================================== */
+.genre-card.is-open .subgenres {
+  max-height: 2000px;
+  opacity: 1;
+  margin-top: 16px;
+}
+.genre-card.is-open .genre-toggle::after {
+  transform: rotate(180deg);
 }
 </style>
+<script>
+// ページ読み込み後に実行
+document.addEventListener('DOMContentLoaded', function() {
+  // すべてのジャンルで探すボタンにクリックイベントを追加
+  const toggleButtons = document.querySelectorAll('.genre-toggle');
+  toggleButtons.forEach(button => {
+    button.addEventListener('click', function(e) {
+      e.preventDefault();
+      const card = this.closest('.genre-card');
+      const wasOpen = card.classList.contains('is-open');
+      // すべてのカードを閉じる
+      document.querySelectorAll('.genre-card').forEach(c => {
+        c.classList.remove('is-open');
+      });
+      // クリックしたカードがもともと閉じていた場合のみ開く
+      if (!wasOpen) {
+        card.classList.add('is-open');
+      }
+      // URLハッシュを更新(戻るボタン対応)
+      if (!wasOpen) {
+        history.pushState(null, '', '#' + card.id);
+      } else {
+        history.pushState(null, '', window.location.pathname);
+      }
+    });
+  });
+  // ページ読み込み時にハッシュがある場合は該当カードを開く
+  if (window.location.hash) {
+    const targetCard = document.querySelector(window.location.hash);
+    if (targetCard && targetCard.classList.contains('genre-card')) {
+      targetCard.classList.add('is-open');
+    }
+  }
+  // ブラウザの戻る/進むボタンに対応
+  window.addEventListener('hashchange', function() {
+    document.querySelectorAll('.genre-card').forEach(card => {
+      card.classList.remove('is-open');
+    });
+    if (window.location.hash) {
+      const targetCard = document.querySelector(window.location.hash);
+      if (targetCard && targetCard.classList.contains('genre-card')) {
+        targetCard.classList.add('is-open');
+      }
+    }
+  });
+});
+</script>
 </html>
 = ジャンルから探す =
@@ 275行目: / 361行目: @@
 <div class="genre-actions">
 [[飲食店検索|すべての飲食店を見る　{{飲食店件数取得|column=ジャンル|detail=}}件]]
-[[#food|ジャンルで探す]]
+<html><a href="#food" class="genre-toggle">ジャンルで探す</a></html>
 </div>
 <div class="subgenres">
@@ 300行目: / 386行目: @@
 <div class="genre-card" id="beauty">
 <h3 class="genre-title">美容・健康</h3>
 <div class="genre-actions">
 [[美容・健康一覧|一覧を見る]]
-[[#beauty|ジャンルで探す]]
+<a href="#beauty" class="genre-toggle">ジャンルで探す</a>
 </div>
 <div class="subgenres">
@@ 320行目: / 405行目: @@
 <div class="genre-card" id="store">
 <h3 class="genre-title">店・施設</h3>
 <div class="genre-actions">
 [[店・施設一覧|すべてを見る]]
-[[#store|ジャンルで探す]]
+<a href="#store" class="genre-toggle">ジャンルで探す</a>
 </div>
 <div class="subgenres">
 * [[小売店一覧]]
@@ 341行目: / 424行目: @@
 <div class="genre-card" id="person">
 <h3 class="genre-title">人</h3>
 <div class="genre-actions">
 [[人の図鑑一覧|すべてを見る]]
-[[#person|ジャンルで探す]]
+<a href="#person" class="genre-toggle">ジャンルで探す</a>
 </div>
 <div class="subgenres">
@@ 357行目: / 439行目: @@
 <div class="genre-card" id="campary">
 <h3 class="genre-title">団体・企業</h3>
 <div class="genre-actions">
 [[団体・企業一覧|すべてを見る]]
-[[#campary|ジャンルで探す]]
+<a href="#campary" class="genre-toggle">ジャンルで探す</a>
 </div>
 <div class="subgenres">
 * [[地元企業一覧]]
@@ 373行目: / 453行目: @@
 <div class="genre-card" id="job">
 <h3 class="genre-title">仕事</h3>
 <div class="genre-actions">
 [[仕事図鑑一覧|すべてを見る]]
-[[#job|ジャンルで探す]]
+<a href="#job" class="genre-toggle">ジャンルで探す</a>
 </div>
 <div class="subgenres">
 * [[求人一覧]]
@@ 385行目: / 463行目: @@
 * [[業務委託・フリーランス一覧]]
 * [[インターン一覧]]
+</div>
 </div>
 </div>
 </div>