|
|
| 1行目: |
1行目: |
| | <templatestyles src="カテゴリー一覧/styles.css" /> |
| <html> | | <html> |
| <style>
| |
| /* ========================================
| |
| カテゴリーグリッド
| |
| ======================================== */
| |
| .category-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
| |
| gap: 20px;
| |
| margin: 2em 0;
| |
| }
| |
|
| |
| /* ========================================
| |
| カテゴリーカード
| |
| ======================================== */
| |
| .category-card {
| |
| background: #fff;
| |
| border: 2px solid #e5e7eb;
| |
| border-radius: 16px;
| |
| padding: 24px;
| |
| transition: all 0.3s ease;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.06);
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .category-card:hover {
| |
| border-color: #f59e0b;
| |
| box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
| |
| }
| |
|
| |
| /* ========================================
| |
| カテゴリータイトル
| |
| ======================================== */
| |
| .category-title {
| |
| font-size: 20px;
| |
| font-weight: 700;
| |
| color: #111827;
| |
| margin: 0 0 16px 0;
| |
| padding-bottom: 12px;
| |
| border-bottom: 2px solid #f59e0b;
| |
| }
| |
|
| |
| /* ========================================
| |
| アクションボタンエリア
| |
| ======================================== */
| |
| .category-actions {
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: 10px;
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
| .category-actions a {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| padding: 14px 18px;
| |
| border: 2px solid #e5e7eb;
| |
| border-radius: 10px;
| |
| background: #fff;
| |
| color: #374151;
| |
| text-decoration: none;
| |
| font-weight: 600;
| |
| font-size: 14px;
| |
| transition: all 0.2s ease;
| |
| position: relative;
| |
| }
| |
|
| |
| .category-actions a::after {
| |
| content: '›';
| |
| font-size: 20px;
| |
| color: #9ca3af;
| |
| transition: all 0.2s ease;
| |
| }
| |
|
| |
| .category-actions a:hover {
| |
| background: #fef3c7;
| |
| border-color: #f59e0b;
| |
| color: #d97706;
| |
| transform: translateX(2px);
| |
| }
| |
|
| |
| .category-actions a:hover::after {
| |
| color: #f59e0b;
| |
| transform: translateX(2px);
| |
| }
| |
|
| |
| /* トグルボタン専用スタイル */
| |
| .genre-toggle {
| |
| cursor: pointer;
| |
| }
| |
|
| |
| .genre-toggle::after {
| |
| content: '▼';
| |
| font-size: 14px;
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| /* 開いている状態 */
| |
| .category-card.is-open .genre-toggle::after {
| |
| transform: rotate(180deg);
| |
| }
| |
|
| |
| /* ========================================
| |
| サブジャンルリスト（カード内・非表示用）
| |
| ======================================== */
| |
| .subgenres {
| |
| display: none;
| |
| }
| |
|
| |
| /* ========================================
| |
| 展開パネル（グリッド間に表示）
| |
| ======================================== */
| |
| .subgenres-expanded {
| |
| grid-column: 1 / -1;
| |
| background: #fff;
| |
| border: 2px solid #f59e0b;
| |
| border-radius: 16px;
| |
| padding: 24px;
| |
| margin: 0;
| |
| max-height: 0;
| |
| overflow: hidden;
| |
| opacity: 0;
| |
| transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;
| |
| box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
| |
| }
| |
|
| |
| .subgenres-expanded.is-visible {
| |
| max-height: 2000px;
| |
| opacity: 1;
| |
| padding: 24px;
| |
| margin: -10px 0 10px 0;
| |
| }
| |
|
| |
| .subgenres-expanded ul {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
| |
| gap: 12px;
| |
| }
| |
|
| |
| .subgenres-expanded li {
| |
| margin: 0;
| |
| }
| |
|
| |
| .subgenres-expanded a {
| |
| display: flex;
| |
| align-items: center;
| |
| padding: 14px 18px;
| |
| border: 1px solid #e5e7eb;
| |
| border-radius: 8px;
| |
| background: #f9fafb;
| |
| color: #374151;
| |
| text-decoration: none;
| |
| font-size: 14px;
| |
| font-weight: 500;
| |
| transition: all 0.2s ease;
| |
| }
| |
|
| |
| .subgenres-expanded a::before {
| |
| content: '•';
| |
| margin-right: 10px;
| |
| color: #f59e0b;
| |
| font-weight: bold;
| |
| font-size: 18px;
| |
| }
| |
|
| |
| .subgenres-expanded a:hover {
| |
| background: #fff;
| |
| border-color: #f59e0b;
| |
| color: #d97706;
| |
| transform: translateX(4px);
| |
| }
| |
|
| |
| /* ========================================
| |
| ダークモード
| |
| ======================================== */
| |
| .skin-theme-clientpref-night .category-card {
| |
| background: #2a2a2a;
| |
| border-color: #3a3a3a;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .category-title {
| |
| color: #f9fafb;
| |
| border-color: #f59e0b;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .category-actions a {
| |
| background: #1e1e1e;
| |
| border-color: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .category-actions a::after {
| |
| color: #6b7280;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .category-actions a:hover {
| |
| background: #374151;
| |
| border-color: #f59e0b;
| |
| color: #fbbf24;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .category-actions a:hover::after {
| |
| color: #fbbf24;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .subgenres-expanded {
| |
| background: #2a2a2a;
| |
| border-color: #f59e0b;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .subgenres-expanded a {
| |
| background: #1e1e1e;
| |
| border-color: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .subgenres-expanded a::before {
| |
| color: #fbbf24;
| |
| }
| |
|
| |
| .skin-theme-clientpref-night .subgenres-expanded a:hover {
| |
| background: #2a2a2a;
| |
| border-color: #f59e0b;
| |
| color: #fbbf24;
| |
| }
| |
|
| |
| /* ========================================
| |
| ダークモード(自動)
| |
| ======================================== */
| |
| @media (prefers-color-scheme: dark) {
| |
| .skin-theme-clientpref-os .category-card {
| |
| background: #2a2a2a;
| |
| border-color: #3a3a3a;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .category-title {
| |
| color: #f9fafb;
| |
| border-color: #f59e0b;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .category-actions a {
| |
| background: #1e1e1e;
| |
| border-color: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .category-actions a::after {
| |
| color: #6b7280;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .category-actions a:hover {
| |
| background: #374151;
| |
| border-color: #f59e0b;
| |
| color: #fbbf24;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .category-actions a:hover::after {
| |
| color: #fbbf24;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .subgenres-expanded {
| |
| background: #2a2a2a;
| |
| border-color: #f59e0b;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .subgenres-expanded a {
| |
| background: #1e1e1e;
| |
| border-color: #3a3a3a;
| |
| color: #e5e7eb;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .subgenres-expanded a::before {
| |
| color: #fbbf24;
| |
| }
| |
|
| |
| .skin-theme-clientpref-os .subgenres-expanded a:hover {
| |
| background: #2a2a2a;
| |
| border-color: #f59e0b;
| |
| color: #fbbf24;
| |
| }
| |
| }
| |
|
| |
| /* ========================================
| |
| レスポンシブ
| |
| ======================================== */
| |
| @media (max-width: 768px) {
| |
| .category-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .category-card {
| |
| padding: 20px;
| |
| }
| |
|
| |
| .category-title {
| |
| font-size: 18px;
| |
| }
| |
|
| |
| .category-actions a {
| |
| font-size: 13px;
| |
| padding: 12px 14px;
| |
| }
| |
|
| |
| .subgenres-expanded {
| |
| padding: 20px;
| |
| }
| |
|
| |
| .subgenres-expanded.is-visible {
| |
| padding: 20px;
| |
| }
| |
|
| |
| .subgenres-expanded ul {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .subgenres-expanded a {
| |
| font-size: 13px;
| |
| padding: 12px 14px;
| |
| }
| |
| }
| |
|
| |
| /* ========================================
| |
| JavaScriptでのトグル制御用
| |
| ======================================== */
| |
| .category-card.is-open .subgenres {
| |
| max-height: 2000px;
| |
| opacity: 1;
| |
| margin-top: 16px;
| |
| }
| |
|
| |
| .category-card.is-open .genre-toggle::after {
| |
| transform: rotate(180deg);
| |
| }
| |
| </style>
| |
|
| |
| <script> | | <script> |
| // ページ読み込み後に実行 | | // ページ読み込み後に実行 |
