# UI/UX Design System - ten-sura-game.com

**Version:** 2.0  
**Project:** Japanese Mobile Gacha RPG Strategy Guide Media  
**Brand:** ten-sura-game（転スラゲーム攻略）  
**Stack:** Tailwind CSS v4 · Shadcn/ui · Lucide React Icons · Noto Sans JP

---

## Table of Contents

1. [Design Philosophy](#1-design-philosophy)
2. [Color System](#2-color-system)
3. [Typography](#3-typography)
4. [Spacing System](#4-spacing-system)
5. [Layout & Grid](#5-layout--grid)
6. [Component Patterns](#6-component-patterns)
7. [Animation & Motion](#7-animation--motion)
8. [Iconography](#8-iconography)
9. [Accessibility](#9-accessibility)
10. [Shadcn/ui Integration](#10-shadcnui-integration)
11. [Responsive Design](#11-responsive-design)
12. [Brand Application](#12-brand-application)

---

## 1. Design Philosophy

### Core Principles

| Principle | Description |
|-----------|-------------|
| **Dark Anime Strategy Portal** | Deep black background with crimson red accents, high contrast, professional game guide aesthetic |
| **Mobile-First** | Design for mobile (320-768px), enhance for desktop |
| **Japanese-Focused** | Noto Sans JP font, Japanese text rendering optimized |
| **Performance** | <2.5s page load, optimized images, minimal JavaScript |
| **Accessible** | WCAG 2.1 AA compliant (4.5:1 contrast minimum for dark theme) |

### Visual Language
- **Dark Background:** Deep black (#0F0F12) for immersive game guide feel
- **Crimson Red Theme:** Crimson red (#E60023) as primary accent for clickable elements only
- **High Contrast:** White text (#FFFFFF) on dark backgrounds for maximum readability
- **Rounded Corners:** Consistent 12px rounded corners for cards and buttons
- **Hover Effects:** Red glow and border color changes on cards, red color transitions on links
- **Depth:** Subtle shadows and layered dark backgrounds for professional game guide feel
- **Accent Bars:** Vertical red accent bars (#E60023) on section titles
- **Sticky Header:** Dark header (#0F0F12) with thin red bottom border, sticky on scroll
- **Red for CTAs Only:** Use red exclusively for clickable elements (buttons, links, badges, rankings) to improve click-through rate

### Content Focus
- **Character Rankings:** Tier lists, character evaluations, meta analysis
- **Reroll Guides:** Best characters to reroll for, reroll tier rankings
- **Gacha Analysis:** Banner reviews, pull recommendations, value analysis
- **Event Guides:** Event walkthroughs, reward optimization, farming guides
- **Training Guides:** Character building, resource management, progression tips

---

## 2. Color System

### 2.1 CSS Variables (Dark Anime Strategy Portal Theme)

Implemented in `app/globals.css`:

```css
@layer base {
  :root {
    /* Background Colors */
    --background: 218 18% 6%;              /* #0F0F12 - Deep Black */
    --foreground: 0 0% 100%;               /* #FFFFFF - White text */
    
    /* Card Colors */
    --card: 240 7% 13%;                    /* #202026 - Soft Dark card */
    --card-foreground: 0 0% 100%;          /* #FFFFFF - White on card */
    
    /* Primary Colors (Crimson Red Theme) */
    --primary: 349 100% 51%;               /* #E60023 - Crimson Red */
    --primary-foreground: 0 0% 100%;       /* #ffffff - White on red */
    
    /* Secondary Background */
    --secondary: 240 9% 11%;               /* #1A1A1F - Dark Gray */
    --secondary-foreground: 0 0% 100%;     /* #ffffff - White text */
    
    /* Muted Colors */
    --muted: 240 7% 13%;                   /* #202026 - Muted background */
    --muted-foreground: 220 7% 75%;        /* #B8B8C0 - Light Gray text */
    
    /* Accent Colors */
    --accent: 240 7% 13%;                  /* #202026 - Accent background */
    --accent-foreground: 0 0% 100%;        /* #FFFFFF - White text */
    
    /* Hover Red */
    --hover: 349 100% 59%;                 /* #FF2A3D - Bright Red */
    
    /* Borders & Inputs */
    --border: 240 8% 17%;                  /* #2A2A33 - Soft Gray border */
    --input: 240 8% 17%;                   /* #2A2A33 - Input border */
    --ring: 349 100% 51%;                  /* #E60023 - Focus ring (red) */
    
    /* Semantic Colors */
    --destructive: 349 100% 51%;           /* #E60023 - Red for errors */
    --destructive-foreground: 0 0% 100%;   /* #ffffff - White on red */
    
    /* Border Radius */
    --radius: 0.75rem;                     /* 12px - Border radius */
  }
}
```

### 2.2 Dark Anime Strategy Portal Color Palette

| Token | Hex | HSL | Usage |
|-------|-----|-----|-------|
| **crimson-red** | `#E60023` | `349 100% 51%` | Primary CTAs, links, active states, accent bars, badges |
| **hover-red** | `#FF2A3D` | `349 100% 59%` | Hover states, link hover, button hover |
| **deep-black** | `#0F0F12` | `218 18% 6%` | Main page background |
| **dark-gray** | `#1A1A1F` | `240 9% 11%` | Secondary background, section backgrounds |
| **soft-dark** | `#202026` | `240 7% 13%` | Card backgrounds |
| **soft-gray-border** | `#2A2A33` | `240 8% 17%` | Borders, dividers |
| **text-white** | `#FFFFFF` | `0 0% 100%` | Headings, primary text |
| **text-light-gray** | `#B8B8C0` | `220 7% 75%` | Secondary text, metadata, dates |

### 2.3 Tailwind Custom Colors

Configure in `tailwind.config.ts`:

```typescript
colors: {
  'crimson-red': '#E60023',
  'hover-red': '#FF2A3D',
  'deep-black': '#0F0F12',
  'dark-gray': '#1A1A1F',
  'soft-dark': '#202026',
  'soft-gray-border': '#2A2A33',
  'text-white': '#FFFFFF',
  'text-light-gray': '#B8B8C0',
}
```

### 2.4 Color Usage Guidelines

- **Primary Actions:** Use `crimson-red` (#E60023) for ALL clickable elements
- **Hover States:** Use `hover-red` (#FF2A3D) for button/link hover states
- **Backgrounds:** Deep black (#0F0F12) for page, dark gray (#1A1A1F) for sections, soft dark (#202026) for cards
- **Text:** White (#FFFFFF) for headings, light gray (#B8B8C0) for metadata
- **Hover Effects:** Red border glow on cards, change title color to #E60023
- **Accent Bars:** Vertical red bars (#E60023) on section titles
- **Category Badges:** Always use red background (#E60023) with white text
- **Rankings:** Use red circular badges for numbered rankings (①②③④⑤)

**CRITICAL RULE:** Red color should ONLY be used for clickable/interactive elements. This creates clear visual hierarchy and improves user click-through rates.

---

## 3. Typography

### 3.1 Font Stack

**Primary Font:** Noto Sans JP (Google Fonts)

Implemented in `app/globals.css` and `app/layout.tsx`:

```css
/* app/globals.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-feature-settings: 'palt'; /* Proportional alternate width for Japanese */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #0F0F12;
  color: #FFFFFF;
}
```

```typescript
// app/layout.tsx
import { Noto_Sans_JP } from 'next/font/google';

const notoSansJP = Noto_Sans_JP({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
  variable: '--font-noto-sans-jp',
  display: 'swap',
});
```

### 3.2 Type Scale (Japanese Optimized)

| Element | Size | Weight | Line Height | Usage |
|---------|------|--------|-------------|-------|
| **Hero Display** | `1.875rem` (30px) | 700 | 1.3 | Hero headlines (転スラゲーム攻略) |
| **H1** | `1.75rem` (28px) | 700 | 1.3 | Page titles, category titles |
| **H2** | `1.375rem` (22px) | 700 | 1.4 | Section headers (最新攻略, キャラクター評価) |
| **H3** | `1.125rem` (18px) | 600 | 1.5 | Subsection headers |
| **H4** | `1rem` (16px) | 600 | 1.5 | Card titles |
| **Body Large** | `1.125rem` (18px) | 400 | 1.8 | Hero descriptions |
| **Body** | `1rem` (16px) | 400 | 1.8 | Default text, article content |
| **Body Small** | `0.875rem` (14px) | 400 | 1.6 | Secondary text, metadata |
| **Caption** | `0.75rem` (12px) | 400 | 1.5 | Labels, hints |

### 3.3 Heading Styles (Dark Theme)

```tsx
// H2 with dark box background and red left border (like a "game quest title")
<div className="bg-dark-gray border-l-4 border-crimson-red rounded-lg p-4 mb-6">
  <h2 className="text-2xl font-bold text-white">Section Title</h2>
</div>

// H3 with red underline
<h3 className="text-lg font-semibold text-white border-b-2 border-crimson-red pb-2 mb-4">
  Subsection Title
</h3>

// H4 with gray underline
<h4 className="text-base font-semibold text-white border-b border-soft-gray-border pb-2 mb-3">
  Minor Section Title
</h4>
```

### 3.4 Japanese Text Guidelines

- **Minimum Size:** 16px for body text (Japanese characters need larger sizes)
- **Line Height:** 1.8 for readability with Japanese characters (higher than light theme)
- **Letter Spacing:** Use default (no extra tracking for Japanese)
- **Font Weight:** 400 (regular), 500 (medium), 700 (bold) only
- **Avoid:** Italic styles (not suitable for Japanese)
- **Dark Theme Consideration:** Higher line height (1.8) improves readability on dark backgrounds

---

## 4. Spacing System

### 4.1 Base Unit
Base unit: **4px** (Tailwind default)

### 4.2 Spacing Scale

| Token | Value | Usage |
|-------|-------|-------|
| `0` | 0px | None |
| `1` | 4px | Tight spacing |
| `2` | 8px | Icon gaps, small padding |
| `3` | 12px | Form field padding |
| `4` | 16px | Standard gap |
| `5` | 20px | Medium spacing |
| `6` | 24px | Section padding (mobile) |
| `8` | 32px | Large gaps |
| `10` | 40px | Section spacing |
| `12` | 48px | Section padding (desktop) |
| `16` | 64px | Major section spacing |
| `20` | 80px | Hero section padding |
| `24` | 96px | Page section padding |

### 4.3 Common Patterns

```html
<!-- Card padding (dark cards on black background) -->
<div class="bg-soft-dark rounded-xl p-4 md:p-6 border border-soft-gray-border">

<!-- Section padding -->
<section class="py-12 md:py-16 lg:py-20 bg-deep-black">

<!-- Content max-width with padding -->
<div class="container mx-auto px-4 md:px-6">

<!-- Stack spacing -->
<div class="space-y-4">
<div class="space-y-6">

<!-- Grid gaps -->
<div class="grid gap-4 md:gap-6">

<!-- Section title with vertical red accent bar -->
<div class="flex items-center gap-3 mb-6">
  <div class="w-1 h-8 bg-crimson-red rounded-full"></div>
  <h2 class="text-2xl font-bold text-white">Section Title</h2>
</div>
```

---

## 5. Layout & Grid

### 5.1 Container Widths

```css
/* Tailwind default containers */
.container {
  width: 100%;
  max-width: 80rem; /* 1280px */
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}
```

### 5.2 Breakpoints

| Breakpoint | Min Width | Target |
|------------|-----------|--------|
| `sm` | 640px | Large phones (landscape) |
| `md` | 768px | Tablets |
| `lg` | 1024px | Small laptops |
| `xl` | 1280px | Desktops |
| `2xl` | 1536px | Large desktops |

### 5.3 Grid Patterns

```html
<!-- 12-column grid -->
<div class="grid grid-cols-12 gap-4">
  <div class="col-span-12 md:col-span-6 lg:col-span-4">...</div>
</div>

<!-- Auto-fit responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

<!-- Sidebar layout -->
<div class="grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-6">

<!-- Content + aside -->
<div class="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8">
```

### 5.4 Layout Templates

#### Dark Anime Strategy Portal Page
```html
<div class="min-h-screen flex flex-col bg-deep-black">
  <header class="border-b border-soft-gray-border bg-deep-black">...</header>
  <main class="flex-1">
    <section class="py-20">...</section>
  </main>
  <footer class="border-t border-soft-gray-border bg-dark-gray">...</footer>
</div>
```

#### Category Page
```html
<div class="min-h-screen bg-deep-black">
  <header class="sticky top-0 z-50 bg-deep-black border-b border-crimson-red">...</header>
  <main class="container mx-auto py-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Guide cards -->
    </div>
  </main>
</div>
```

#### Guide Article Page
```html
<article class="bg-deep-black">
  <header class="container max-w-4xl mx-auto py-12">...</header>
  <div class="container max-w-3xl mx-auto prose prose-invert prose-lg">
    ...
  </div>
  <aside class="bg-dark-gray py-12">
    <!-- Related guides -->
  </aside>
</article>
```

---

## 6. Component Patterns

### 6.1 Buttons

```tsx
// Primary Button (Crimson Red)
<Button className="bg-crimson-red hover:bg-hover-red text-white rounded-xl font-bold">
  攻略を見る
</Button>

// Outline Button
<Button variant="outline" className="border-crimson-red text-crimson-red hover:bg-crimson-red hover:text-white rounded-xl">
  詳細を見る
</Button>

// Ghost Button
<Button variant="ghost" className="text-white hover:text-crimson-red hover:bg-soft-dark rounded-xl">
  もっと見る
</Button>

// Sizes
<Button size="sm" className="bg-crimson-red hover:bg-hover-red text-white rounded-xl">Small</Button>
<Button size="default" className="bg-crimson-red hover:bg-hover-red text-white rounded-xl">Default</Button>
<Button size="lg" className="bg-crimson-red hover:bg-hover-red text-white rounded-xl">Large</Button>

// Full Width
<Button className="w-full bg-crimson-red hover:bg-hover-red text-white rounded-xl font-bold">
  Full Width Button
</Button>
```

### 6.2 Cards (Dark Theme)

```tsx
// Standard Dark Card
<Card className="bg-soft-dark rounded-xl border border-soft-gray-border">
  <CardHeader>
    <CardTitle className="text-white">Title</CardTitle>
    <CardDescription className="text-text-light-gray">Description</CardDescription>
  </CardHeader>
  <CardContent className="text-white">Content</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>

// Hover Card with red border glow
<Card className="bg-soft-dark rounded-xl border border-soft-gray-border transition-all duration-200 hover:border-crimson-red hover:shadow-[0_0_20px_rgba(230,0,35,0.3)]">

// Guide Article Card (Dark Theme)
<Card className="bg-soft-dark rounded-xl overflow-hidden border border-soft-gray-border hover:border-crimson-red hover:shadow-[0_0_20px_rgba(230,0,35,0.3)] transition-all duration-200 group cursor-pointer">
  <div className="aspect-video relative overflow-hidden">
    <img src="..." className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300" />
  </div>
  <CardHeader>
    <Badge className="w-fit mb-2 bg-crimson-red text-white">キャラクター評価</Badge>
    <CardTitle className="text-white group-hover:text-crimson-red transition-colors">
      Guide Title
    </CardTitle>
    <CardDescription className="text-text-light-gray">
      2024年2月19日
    </CardDescription>
  </CardHeader>
</Card>
```

### 6.3 Popular Articles Ranking (VERY IMPORTANT)

```tsx
// Popular Articles Ranking Section - Increases page views significantly
<section className="py-12 bg-dark-gray">
  <div className="container">
    {/* Section Header with Red Accent Bar */}
    <div className="flex items-center gap-3 mb-8">
      <div className="w-1 h-8 bg-crimson-red rounded-full" />
      <h2 className="text-2xl font-bold text-white">人気記事ランキング</h2>
    </div>
    
    {/* Top 5 Ranking List */}
    <div className="space-y-4">
      {topArticles.slice(0, 5).map((article, index) => (
        <Card key={article.id} className="bg-soft-dark rounded-xl border border-soft-gray-border hover:border-crimson-red transition-all duration-200 group cursor-pointer">
          <CardContent className="p-4">
            <div className="flex items-center gap-4">
              {/* Large Numbered Badge (Red Circle) */}
              <div className="flex-shrink-0 w-12 h-12 rounded-full bg-crimson-red flex items-center justify-center">
                <span className="text-white text-2xl font-bold">{index + 1}</span>
              </div>
              
              {/* Article Info */}
              <div className="flex-1 min-w-0">
                <Badge className="mb-2 bg-crimson-red text-white text-xs">
                  {article.category}
                </Badge>
                <h3 className="text-white font-bold group-hover:text-crimson-red transition-colors line-clamp-2">
                  {article.title}
                </h3>
                <p className="text-text-light-gray text-sm mt-1">
                  {article.date}
                </p>
              </div>
              
              {/* Thumbnail (Optional) */}
              {article.thumbnail && (
                <div className="hidden md:block flex-shrink-0 w-24 h-16 rounded-lg overflow-hidden">
                  <img src={article.thumbnail} alt="" className="w-full h-full object-cover" />
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  </div>
</section>
```

### 6.4 Strategy Tips Callout (Dark Theme)

```tsx
// Red callout for important tips
<div className="bg-crimson-red/10 border-l-4 border-crimson-red rounded-xl p-4 my-6">
  <div className="flex items-start gap-3">
    <Lightbulb className="h-5 w-5 text-crimson-red flex-shrink-0 mt-0.5" />
    <div>
      <h4 className="font-bold text-white mb-2">攻略のコツ</h4>
      <p className="text-text-light-gray">
        このキャラクターは火属性に強いため、火属性の敵が多いクエストで活躍します。
      </p>
    </div>
  </div>
</div>

// Warning callout
<div className="bg-hover-red/10 border-l-4 border-hover-red rounded-xl p-4 my-6">
  <div className="flex items-start gap-3">
    <AlertTriangle className="h-5 w-5 text-hover-red flex-shrink-0 mt-0.5" />
    <div>
      <h4 className="font-bold text-white mb-2">注意</h4>
      <p className="text-text-light-gray">
        このガチャは期間限定です。終了日時を確認してください。
      </p>
    </div>
  </div>
</div>

// Info callout
<div className="bg-soft-dark border-l-4 border-text-light-gray rounded-xl p-4 my-6">
  <div className="flex items-start gap-3">
    <Info className="h-5 w-5 text-text-light-gray flex-shrink-0 mt-0.5" />
    <div>
      <h4 className="font-bold text-white mb-2">補足情報</h4>
      <p className="text-text-light-gray">
        このキャラクターは初心者にもおすすめです。
      </p>
    </div>
  </div>
</div>
```

### 6.5 Category Badges (Always Red)

```tsx
// Category badges - ALWAYS use red background
<Badge className="bg-crimson-red text-white hover:bg-hover-red">
  攻略情報
</Badge>

<Badge className="bg-crimson-red text-white hover:bg-hover-red">
  キャラクター評価
</Badge>

<Badge className="bg-crimson-red text-white hover:bg-hover-red">
  リセマラ・ガチャ情報
</Badge>

<Badge className="bg-crimson-red text-white hover:bg-hover-red">
  イベント・アップデート
</Badge>

<Badge className="bg-crimson-red text-white hover:bg-hover-red">
  初心者・育成ガイド
</Badge>
```

### 6.6 Forms (Dark Theme)

```tsx
<form className="space-y-4">
  <div className="space-y-2">
    <Label htmlFor="email" className="text-white">Email</Label>
    <Input 
      id="email" 
      type="email" 
      placeholder="you@example.com" 
      className="rounded-xl bg-soft-dark border-soft-gray-border text-white placeholder:text-text-light-gray focus:border-crimson-red focus:ring-crimson-red" 
    />
  </div>
  
  <div className="space-y-2">
    <Label htmlFor="message" className="text-white">Message</Label>
    <Textarea 
      id="message" 
      placeholder="Your message..." 
      className="rounded-xl bg-soft-dark border-soft-gray-border text-white placeholder:text-text-light-gray focus:border-crimson-red focus:ring-crimson-red" 
    />
  </div>
  
  <Button type="submit" className="w-full bg-crimson-red hover:bg-hover-red text-white rounded-xl font-bold">
    送信する
  </Button>
</form>
```

### 6.7 Navigation Header (Dark Theme with Red Border)

```tsx
// Sticky dark header with thin red bottom border
<header className="sticky top-0 z-50 w-full border-b border-crimson-red bg-deep-black shadow-lg">
  <div className="container flex h-16 items-center justify-between">
    <Logo className="text-white" />
    <nav className="hidden md:flex items-center gap-6">
      <Link className="text-white hover:text-crimson-red transition-colors font-medium">
        攻略情報
      </Link>
      <Link className="text-white hover:text-crimson-red transition-colors font-medium">
        キャラクター評価
      </Link>
      <Link className="text-white hover:text-crimson-red transition-colors font-medium">
        リセマラ・ガチャ情報
      </Link>
      <Link className="text-white hover:text-crimson-red transition-colors font-medium">
        イベント・アップデート
      </Link>
      <Link className="text-white hover:text-crimson-red transition-colors font-medium">
        初心者・育成ガイド
      </Link>
    </nav>
    <div className="flex items-center gap-4">
      <Button variant="ghost" className="text-white hover:text-crimson-red hover:bg-soft-dark">
        検索
      </Button>
    </div>
  </div>
</header>

// Active category state
<Link className="text-crimson-red font-bold border-b-2 border-crimson-red pb-1">
  攻略情報
</Link>
```

### 6.8 Section Headers with Red Accent Bar

```tsx
// Section title with vertical red accent bar
<div className="flex items-center gap-3 mb-8">
  <div className="w-1 h-8 bg-crimson-red rounded-full" />
  <h2 className="text-3xl font-bold text-white">最新攻略</h2>
</div>

// With subtitle
<div className="mb-12">
  <div className="flex items-center gap-3 mb-3">
    <div className="w-1 h-8 bg-crimson-red rounded-full" />
    <h2 className="text-3xl font-bold text-white">キャラクター評価</h2>
  </div>
  <p className="text-text-light-gray ml-7">
    最強キャラクターランキングと評価
  </p>
</div>
```

### 6.9 Guide Article Cards (Dark Theme)

```tsx
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {guides.map((guide) => (
    <Card key={guide.id} className="bg-soft-dark rounded-xl overflow-hidden border border-soft-gray-border hover:border-crimson-red hover:shadow-[0_0_20px_rgba(230,0,35,0.3)] transition-all duration-200 group cursor-pointer">
      {/* 16:9 Image */}
      <div className="aspect-video relative overflow-hidden bg-dark-gray">
        <img 
          src={guide.image} 
          alt={guide.title}
          className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
        />
      </div>
      
      <CardHeader className="space-y-3">
        {/* Red Category Badge */}
        <Badge className="w-fit bg-crimson-red text-white hover:bg-hover-red">
          {guide.category}
        </Badge>
        
        {/* Title with red hover effect */}
        <CardTitle className="text-xl leading-tight text-white group-hover:text-crimson-red transition-colors line-clamp-2">
          {guide.title}
        </CardTitle>
        
        {/* Metadata */}
        <div className="flex items-center gap-4 text-sm text-text-light-gray">
          <time>{guide.date}</time>
        </div>
      </CardHeader>
    </Card>
  ))}
</div>
```

### 6.10 Category Sections (Dark Theme)

```tsx
<section className="py-16 bg-deep-black">
  <div className="container">
    {/* Section Header with Red Accent Bar */}
    <div className="flex items-center justify-between mb-8">
      <div className="flex items-center gap-3">
        <div className="w-1 h-8 bg-crimson-red rounded-full" />
        <h2 className="text-3xl font-bold text-white">キャラクター評価</h2>
      </div>
      <Link href="/category/キャラクター評価" className="text-crimson-red hover:text-hover-red transition-colors flex items-center gap-2 font-medium">
        もっと見る
        <ChevronRight className="h-4 w-4" />
      </Link>
    </div>
    
    {/* Guide Grid */}
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {/* Guide cards */}
    </div>
  </div>
</section>
```

---

## 7. Animation & Motion

### 7.1 Transition Timing

```css
/* Common durations */
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;

/* Easing */
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
```

### 7.2 Tailwind Transitions (Dark Theme)

```html
<!-- Button hover -->
<button class="transition-colors duration-200 hover:bg-hover-red">

<!-- Card hover with red border glow -->
<div class="transition-all duration-200 hover:border-crimson-red hover:shadow-[0_0_20px_rgba(230,0,35,0.3)]">

<!-- Image scale on hover -->
<div class="overflow-hidden">
  <img class="transition-transform duration-300 hover:scale-105">
</div>

<!-- Title color change to red -->
<h3 class="transition-colors duration-200 group-hover:text-crimson-red">

<!-- Fade in -->
<div class="animate-in fade-in duration-300">

<!-- Slide in -->
<div class="animate-in slide-in-from-bottom-4 duration-300">
```

### 7.3 Red Glow Effect

```css
/* Add to globals.css for red glow effect */
.red-glow-hover:hover {
  box-shadow: 0 0 20px rgba(230, 0, 35, 0.3);
  border-color: #E60023;
}

/* Pulsing red glow for important elements */
@keyframes pulse-red {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(230, 0, 35, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(230, 0, 35, 0);
  }
}

.pulse-red {
  animation: pulse-red 2s infinite;
}
```

### 7.4 Loading States (Dark Theme)

```tsx
// Skeleton (Dark)
<Skeleton className="h-4 w-[200px] bg-soft-dark" />
<Skeleton className="h-32 w-full rounded-lg bg-soft-dark" />

// Spinner
<Loader2 className="h-4 w-4 animate-spin text-crimson-red" />

// Button loading
<Button disabled className="bg-crimson-red/50 text-white">
  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
  読み込み中...
</Button>
```

---

## 8. Iconography

### 8.1 Icon Library

Use **Lucide React** (default with Shadcn):

```bash
npm install lucide-react
```

### 8.2 Icon Sizes

| Size | Value | Usage |
|------|-------|-------|
| `xs` | 12px | Inline indicators |
| `sm` | 16px | Buttons, inputs |
| `md` | 20px | Default icons |
| `lg` | 24px | Headers, cards |
| `xl` | 32px | Feature icons |
| `2xl` | 48px | Hero sections |

### 8.3 Usage (Dark Theme)

```tsx
import { Check, ChevronRight, AlertCircle, Lightbulb, AlertTriangle, TrendingUp, Star } from 'lucide-react';

// Standard (white on dark)
<Check className="h-4 w-4 text-white" />

// With text
<span className="flex items-center gap-2 text-white">
  <Check className="h-4 w-4" />
  クリア済み
</span>

// Icon button
<Button size="icon" variant="ghost" className="text-white hover:text-crimson-red hover:bg-soft-dark">
  <ChevronRight className="h-4 w-4" />
</Button>

// Semantic color (red for important)
<AlertCircle className="h-4 w-4 text-crimson-red" />
<Lightbulb className="h-5 w-5 text-crimson-red" />
<AlertTriangle className="h-5 w-5 text-hover-red" />
<TrendingUp className="h-5 w-5 text-crimson-red" />
<Star className="h-5 w-5 text-crimson-red fill-crimson-red" />
```

---

## 9. Accessibility

### 9.1 Color Contrast (Dark Theme)

| Combination | Ratio | Status |
|-------------|-------|--------|
| White (#FFFFFF) on deep black (#0F0F12) | 19.5:1+ | ✅ Pass AAA |
| White (#FFFFFF) on soft dark (#202026) | 17.8:1+ | ✅ Pass AAA |
| Light gray (#B8B8C0) on deep black (#0F0F12) | 11.2:1+ | ✅ Pass AAA |
| Light gray (#B8B8C0) on soft dark (#202026) | 10.1:1+ | ✅ Pass AAA |
| Crimson red (#E60023) on deep black (#0F0F12) | 5.8:1+ | ✅ Pass AA |
| White (#FFFFFF) on crimson red (#E60023) | 4.5:1+ | ✅ Pass AA for buttons/badges |

### 9.2 Focus States (Dark Theme)

```css
/* All interactive elements should have visible red focus ring */
.focus-visible:focus-visible {
  outline: none;
  ring: 2px;
  ring-color: hsl(var(--ring)); /* Crimson red */
  ring-offset: 2px;
  ring-offset-color: hsl(var(--background)); /* Deep black */
}

/* Tailwind classes */
<button class="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-crimson-red focus-visible:ring-offset-2 focus-visible:ring-offset-deep-black">
```

### 9.3 ARIA Guidelines

```tsx
// Always provide labels
<Button aria-label="Close dialog" className="text-white hover:text-crimson-red">
  <X className="h-4 w-4" />
</Button>

// Loading states
<Button aria-busy="true" aria-disabled="true" className="bg-crimson-red/50 text-white">
  <Loader2 className="animate-spin" aria-hidden="true" />
  <span>読み込み中...</span>
</Button>

// Decorative icons
<Check className="h-4 w-4" aria-hidden="true" />

// Live regions
<div role="status" aria-live="polite" className="text-white">
  攻略情報を更新しました
</div>
```

### 9.4 Keyboard Navigation

- All interactive elements focusable with Tab
- Escape closes modals/dialogs
- Enter/Space activates buttons
- Arrow keys navigate menus
- Skip links for main content

```tsx
<a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-soft-dark focus:text-white focus:border focus:border-crimson-red">
  メインコンテンツへスキップ
</a>
```

---

## 10. Shadcn/ui Integration

### 10.1 Installation

```bash
npx shadcn@latest init
```

Configuration (`components.json`):
```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}
```

### 10.2 Essential Components

```bash
# Core
npx shadcn@latest add button card input label

# Forms
npx shadcn@latest add form select textarea checkbox switch

# Feedback
npx shadcn@latest add toast alert dialog

# Navigation
npx shadcn@latest add dropdown-menu navigation-menu tabs

# Data
npx shadcn@latest add table avatar badge skeleton
```

### 10.3 Customizing Components for Dark Theme

```tsx
// Extend button variants for dark theme
// components/ui/button.tsx

const buttonVariants = cva(
  "...",
  {
    variants: {
      variant: {
        // Custom red variant
        red: "bg-crimson-red text-white hover:bg-hover-red font-bold",
        // Red outline
        redOutline: "border-crimson-red text-crimson-red hover:bg-crimson-red hover:text-white",
      },
    },
  }
);
```

---

## 11. Responsive Design

### 11.1 Mobile-First Approach

Always design for mobile first, then enhance for larger screens:

```tsx
// Mobile: Stack vertically
// Tablet: 2 columns
// Desktop: 3 columns
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">

// Mobile: Full width
// Desktop: Fixed sidebar + flexible content
<div className="grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-6">

// Responsive padding
<section className="py-12 md:py-16 lg:py-20">

// Responsive text sizes
<h1 className="text-2xl md:text-3xl lg:text-4xl">
```

### 11.2 Touch Targets

Ensure all interactive elements are at least 44x44px on mobile:

```tsx
// Minimum touch target
<Button className="min-h-[44px] min-w-[44px] bg-crimson-red hover:bg-hover-red text-white">

// Icon buttons
<Button size="icon" className="h-11 w-11 text-white hover:text-crimson-red hover:bg-soft-dark">
  <Icon className="h-5 w-5" />
</Button>
```

### 11.3 Responsive Images

```tsx
// Next.js Image with responsive sizes
<Image
  src={guide.image}
  alt={guide.title}
  width={800}
  height={450}
  className="w-full h-auto"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

// Aspect ratio containers
<div className="aspect-video relative overflow-hidden bg-dark-gray">
  <img src="..." className="object-cover w-full h-full" />
</div>
```

### 11.4 Game Screenshot Guidelines

- Use 16:9 aspect ratio for consistency
- Optimize images for web (WebP format preferred)
- Include alt text describing the game content
- Use lazy loading for images below the fold
- Maximum width: 1200px for article images
- Ensure good visibility on dark backgrounds

---

## 12. Brand Application

### 12.1 Hero Section (Featured Article Card - NO Gradient Banner)

```tsx
<section className="py-16 md:py-24 bg-dark-gray">
  <div className="container">
    {/* Large Featured Article Card */}
    <Card className="bg-soft-dark rounded-xl overflow-hidden border border-soft-gray-border hover:border-crimson-red hover:shadow-[0_0_30px_rgba(230,0,35,0.4)] transition-all duration-300 group cursor-pointer">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-0">
        {/* Large Thumbnail */}
        <div className="aspect-video lg:aspect-auto relative overflow-hidden bg-dark-gray">
          <img 
            src={featuredArticle.image} 
            alt={featuredArticle.title}
            className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"
          />
          {/* Red Category Badge Overlay */}
          <Badge className="absolute top-4 left-4 bg-crimson-red text-white text-sm px-4 py-2">
            {featuredArticle.category}
          </Badge>
        </div>
        
        {/* Content */}
        <div className="p-8 md:p-12 flex flex-col justify-center">
          <Badge className="w-fit mb-4 bg-crimson-red text-white">
            注目記事
          </Badge>
          
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4 group-hover:text-crimson-red transition-colors leading-tight">
            {featuredArticle.title}
          </h2>
          
          <p className="text-text-light-gray text-lg mb-6 line-clamp-2 leading-relaxed">
            {featuredArticle.description}
          </p>
          
          <div className="flex items-center gap-4 text-sm text-text-light-gray mb-6">
            <time>{featuredArticle.date}</time>
            <span>·</span>
            <span>{featuredArticle.readTime}</span>
          </div>
          
          <Button className="w-fit bg-crimson-red hover:bg-hover-red text-white rounded-xl font-bold px-8">
            記事を読む
            <ChevronRight className="ml-2 h-4 w-4" />
          </Button>
        </div>
      </div>
    </Card>
  </div>
</section>
```

### 12.2 Latest Guides Section (Dark Theme)

```tsx
<section className="py-16 md:py-24 bg-deep-black">
  <div className="container">
    {/* Section Header with Red Accent Bar */}
    <div className="flex items-center gap-3 mb-12">
      <div className="w-1 h-8 bg-crimson-red rounded-full" />
      <h2 className="text-3xl md:text-4xl font-bold text-white">最新攻略</h2>
    </div>
    
    {/* Guide Grid */}
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {guides.map((guide) => (
        <Card key={guide.id} className="bg-soft-dark rounded-xl overflow-hidden border border-soft-gray-border hover:border-crimson-red hover:shadow-[0_0_20px_rgba(230,0,35,0.3)] transition-all duration-200 group cursor-pointer">
          {/* 16:9 Image */}
          <div className="aspect-video relative overflow-hidden bg-dark-gray">
            <img 
              src={guide.image} 
              alt={guide.title}
              className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
            />
          </div>
          
          <CardHeader className="space-y-3">
            {/* Red Category Badge */}
            <Badge className="w-fit bg-crimson-red text-white hover:bg-hover-red">
              {guide.category}
            </Badge>
            
            {/* Title with red hover effect */}
            <CardTitle className="text-xl leading-tight text-white group-hover:text-crimson-red transition-colors line-clamp-2">
              {guide.title}
            </CardTitle>
            
            {/* Metadata */}
            <div className="flex items-center gap-4 text-sm text-text-light-gray">
              <time>{guide.date}</time>
            </div>
          </CardHeader>
        </Card>
      ))}
    </div>
  </div>
</section>
```

### 12.3 Character Reviews Section

```tsx
<section className="py-16 md:py-24 bg-dark-gray">
  <div className="container">
    {/* Section Header with Red Accent Bar and View All Link */}
    <div className="flex items-center justify-between mb-12">
      <div className="flex items-center gap-3">
        <div className="w-1 h-8 bg-crimson-red rounded-full" />
        <div>
          <h2 className="text-3xl md:text-4xl font-bold text-white">キャラクター評価</h2>
          <p className="text-text-light-gray mt-1">最強キャラクターランキングと評価</p>
        </div>
      </div>
      <Link 
        href="/category/キャラクター評価" 
        className="text-crimson-red hover:text-hover-red transition-colors flex items-center gap-2 font-medium"
      >
        もっと見る
        <ChevronRight className="h-5 w-5" />
      </Link>
    </div>
    
    {/* Guide Grid - 4 columns on desktop */}
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {/* Guide cards */}
    </div>
  </div>
</section>
```

### 12.4 Reroll & Gacha Info Section

```tsx
<section className="py-16 md:py-24 bg-deep-black">
  <div className="container">
    {/* Section Header with Red Accent Bar and View All Link */}
    <div className="flex items-center justify-between mb-12">
      <div className="flex items-center gap-3">
        <div className="w-1 h-8 bg-crimson-red rounded-full" />
        <div>
          <h2 className="text-3xl md:text-4xl font-bold text-white">リセマラ・ガチャ情報</h2>
          <p className="text-text-light-gray mt-1">リセマラランキングとガチャ分析</p>
        </div>
      </div>
      <Link 
        href="/category/リセマラ・ガチャ情報" 
        className="text-crimson-red hover:text-hover-red transition-colors flex items-center gap-2 font-medium"
      >
        もっと見る
        <ChevronRight className="h-5 w-5" />
      </Link>
    </div>
    
    {/* Guide Grid - 4 columns on desktop */}
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {/* Guide cards */}
    </div>
  </div>
</section>
```

### 12.5 Events & Updates Section

```tsx
<section className="py-16 md:py-24 bg-dark-gray">
  <div className="container">
    {/* Section Header with Red Accent Bar and View All Link */}
    <div className="flex items-center justify-between mb-12">
      <div className="flex items-center gap-3">
        <div className="w-1 h-8 bg-crimson-red rounded-full" />
        <div>
          <h2 className="text-3xl md:text-4xl font-bold text-white">イベント・アップデート</h2>
          <p className="text-text-light-gray mt-1">最新イベント情報とアップデート</p>
        </div>
      </div>
      <Link 
        href="/category/イベント・アップデート" 
        className="text-crimson-red hover:text-hover-red transition-colors flex items-center gap-2 font-medium"
      >
        もっと見る
        <ChevronRight className="h-5 w-5" />
      </Link>
    </div>
    
    {/* Guide Grid - 4 columns on desktop */}
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {/* Guide cards */}
    </div>
  </div>
</section>
```

### 12.6 Beginner & Training Guides Section

```tsx
<section className="py-16 md:py-24 bg-deep-black">
  <div className="container">
    {/* Section Header with Red Accent Bar and View All Link */}
    <div className="flex items-center justify-between mb-12">
      <div className="flex items-center gap-3">
        <div className="w-1 h-8 bg-crimson-red rounded-full" />
        <div>
          <h2 className="text-3xl md:text-4xl font-bold text-white">初心者・育成ガイド</h2>
          <p className="text-text-light-gray mt-1">初心者向けガイドとキャラクター育成</p>
        </div>
      </div>
      <Link 
        href="/category/初心者・育成ガイド" 
        className="text-crimson-red hover:text-hover-red transition-colors flex items-center gap-2 font-medium"
      >
        もっと見る
        <ChevronRight className="h-5 w-5" />
      </Link>
    </div>
    
    {/* Guide Grid */}
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {beginnerGuides.map((guide) => (
        <Card key={guide.id} className="bg-soft-dark rounded-xl overflow-hidden border border-soft-gray-border hover:border-crimson-red hover:shadow-[0_0_20px_rgba(230,0,35,0.3)] transition-all duration-200 group cursor-pointer">
          <div className="aspect-video relative overflow-hidden bg-dark-gray">
            <img 
              src={guide.image} 
              alt={guide.title}
              className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
            />
            {/* Beginner Badge Overlay */}
            <Badge className="absolute top-3 left-3 bg-crimson-red text-white">
              初心者向け
            </Badge>
          </div>
          
          <CardHeader className="space-y-3">
            <Badge className="w-fit bg-crimson-red text-white hover:bg-hover-red">
              初心者・育成ガイド
            </Badge>
            
            <CardTitle className="text-xl leading-tight text-white group-hover:text-crimson-red transition-colors line-clamp-2">
              {guide.title}
            </CardTitle>
            
            <div className="flex items-center gap-4 text-sm text-text-light-gray">
              <time>{guide.date}</time>
            </div>
          </CardHeader>
        </Card>
      ))}
    </div>
  </div>
</section>
```

### 12.7 Newsletter Section (Dark Theme)

```tsx
<section className="py-16 md:py-24 bg-dark-gray">
  <div className="container">
    <Card className="bg-crimson-red text-white overflow-hidden rounded-xl border-0">
      <CardContent className="p-8 md:p-12 text-center">
        <h2 className="text-3xl md:text-4xl font-bold mb-4">
          最新攻略情報をメールで受け取る
        </h2>
        <p className="text-lg text-white/90 mb-8 max-w-2xl mx-auto">
          新しい攻略記事やイベント情報を週1回お届けします
        </p>
        <form className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
          <Input 
            type="email" 
            placeholder="メールアドレス" 
            className="bg-white text-deep-black border-0 h-12 rounded-xl placeholder:text-gray-500"
          />
          <Button 
            type="submit" 
            size="lg" 
            className="bg-deep-black text-white hover:bg-dark-gray h-12 px-8 rounded-xl font-bold"
          >
            登録する
          </Button>
        </form>
      </CardContent>
    </Card>
  </div>
</section>
```

### 12.8 Strategy Tips Section (In-Article, Dark Theme)

```tsx
<div className="my-8 space-y-6">
  {/* Strategy Tip with Red Border */}
  <div className="bg-crimson-red/10 border-l-4 border-crimson-red rounded-xl p-4">
    <div className="flex items-start gap-3">
      <Lightbulb className="h-5 w-5 text-crimson-red flex-shrink-0 mt-0.5" />
      <div>
        <h4 className="font-bold text-white mb-2">攻略のコツ</h4>
        <p className="text-text-light-gray">
          このキャラクターは火属性に強いため、火属性の敵が多いクエストで活躍します。
          スキルレベルを優先的に上げることで、さらに強力になります。
        </p>
      </div>
    </div>
  </div>
  
  {/* Warning with Bright Red Border */}
  <div className="bg-hover-red/10 border-l-4 border-hover-red rounded-xl p-4">
    <div className="flex items-start gap-3">
      <AlertTriangle className="h-5 w-5 text-hover-red flex-shrink-0 mt-0.5" />
      <div>
        <h4 className="font-bold text-white mb-2">注意</h4>
        <p className="text-text-light-gray">
          このガチャは期間限定です。終了日時を確認してください。
          復刻の予定は現時点で発表されていません。
        </p>
      </div>
    </div>
  </div>
  
  {/* Info with Gray Border */}
  <div className="bg-soft-dark border-l-4 border-text-light-gray rounded-xl p-4">
    <div className="flex items-start gap-3">
      <Info className="h-5 w-5 text-text-light-gray flex-shrink-0 mt-0.5" />
      <div>
        <h4 className="font-bold text-white mb-2">補足情報</h4>
        <p className="text-text-light-gray">
          このキャラクターは初心者にもおすすめです。
          序盤から終盤まで長く使えるキャラクターです。
        </p>
      </div>
    </div>
  </div>
</div>
```

### 12.9 Character Tier List Card (Dark Theme)

```tsx
<Card className="bg-soft-dark rounded-xl border border-soft-gray-border p-6">
  <h3 className="text-xl font-bold text-white mb-6 flex items-center gap-2">
    <Star className="h-5 w-5 text-crimson-red fill-crimson-red" />
    キャラクターランキング
  </h3>
  
  <div className="space-y-4">
    {/* S Tier */}
    <div>
      <div className="flex items-center gap-2 mb-3">
        <Badge className="bg-crimson-red text-white font-bold">S</Badge>
        <span className="text-text-light-gray text-sm">最強キャラクター</span>
      </div>
      <div className="grid grid-cols-4 md:grid-cols-6 gap-2">
        {sTierCharacters.map((char) => (
          <div key={char.id} className="aspect-square rounded-lg overflow-hidden border-2 border-crimson-red hover:scale-105 transition-transform cursor-pointer">
            <img src={char.image} alt={char.name} className="w-full h-full object-cover" />
          </div>
        ))}
      </div>
    </div>
    
    {/* A Tier */}
    <div>
      <div className="flex items-center gap-2 mb-3">
        <Badge className="bg-hover-red text-white font-bold">A</Badge>
        <span className="text-text-light-gray text-sm">強力なキャラクター</span>
      </div>
      <div className="grid grid-cols-4 md:grid-cols-6 gap-2">
        {aTierCharacters.map((char) => (
          <div key={char.id} className="aspect-square rounded-lg overflow-hidden border border-soft-gray-border hover:border-crimson-red hover:scale-105 transition-all cursor-pointer">
            <img src={char.image} alt={char.name} className="w-full h-full object-cover" />
          </div>
        ))}
      </div>
    </div>
  </div>
  
  <Button className="w-full mt-6 bg-crimson-red hover:bg-hover-red text-white rounded-xl font-bold">
    完全なランキングを見る
    <ChevronRight className="ml-2 h-4 w-4" />
  </Button>
</Card>
```

### 12.10 Footer (Dark Theme)

```tsx
<footer className="border-t border-soft-gray-border bg-dark-gray py-12">
  <div className="container">
    <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
      {/* Brand */}
      <div>
        <h3 className="text-xl font-bold text-white mb-4">転スラゲーム攻略</h3>
        <p className="text-text-light-gray text-sm leading-relaxed">
          転生したらスライムだった件のモバイルゲーム攻略情報サイト。
          キャラクター評価、リセマラ、ガチャ情報を毎日更新中。
        </p>
      </div>
      
      {/* Categories */}
      <div>
        <h4 className="font-bold text-white mb-4">カテゴリー</h4>
        <ul className="space-y-2">
          <li><Link href="/category/攻略情報" className="text-text-light-gray hover:text-crimson-red transition-colors">攻略情報</Link></li>
          <li><Link href="/category/キャラクター評価" className="text-text-light-gray hover:text-crimson-red transition-colors">キャラクター評価</Link></li>
          <li><Link href="/category/リセマラ・ガチャ情報" className="text-text-light-gray hover:text-crimson-red transition-colors">リセマラ・ガチャ情報</Link></li>
          <li><Link href="/category/イベント・アップデート" className="text-text-light-gray hover:text-crimson-red transition-colors">イベント・アップデート</Link></li>
          <li><Link href="/category/初心者・育成ガイド" className="text-text-light-gray hover:text-crimson-red transition-colors">初心者・育成ガイド</Link></li>
        </ul>
      </div>
      
      {/* Resources */}
      <div>
        <h4 className="font-bold text-white mb-4">リソース</h4>
        <ul className="space-y-2">
          <li><Link href="/about" className="text-text-light-gray hover:text-crimson-red transition-colors">サイトについて</Link></li>
          <li><Link href="/contact" className="text-text-light-gray hover:text-crimson-red transition-colors">お問い合わせ</Link></li>
          <li><Link href="/privacy" className="text-text-light-gray hover:text-crimson-red transition-colors">プライバシーポリシー</Link></li>
          <li><Link href="/terms" className="text-text-light-gray hover:text-crimson-red transition-colors">利用規約</Link></li>
        </ul>
      </div>
      
      {/* Social */}
      <div>
        <h4 className="font-bold text-white mb-4">フォローする</h4>
        <div className="flex gap-3">
          <Button size="icon" variant="ghost" className="text-text-light-gray hover:text-crimson-red hover:bg-soft-dark">
            <Twitter className="h-5 w-5" />
          </Button>
          <Button size="icon" variant="ghost" className="text-text-light-gray hover:text-crimson-red hover:bg-soft-dark">
            <Youtube className="h-5 w-5" />
          </Button>
          <Button size="icon" variant="ghost" className="text-text-light-gray hover:text-crimson-red hover:bg-soft-dark">
            <Rss className="h-5 w-5" />
          </Button>
        </div>
      </div>
    </div>
    
    {/* Copyright */}
    <div className="border-t border-soft-gray-border pt-8">
      <p className="text-center text-text-light-gray text-sm">
        © 2024 ten-sura-game.com All rights reserved.
      </p>
    </div>
  </div>
</footer>
```

---

## Quick Reference

### Commonly Used Classes (Dark Theme)

```css
/* Backgrounds */
bg-deep-black bg-dark-gray bg-soft-dark bg-crimson-red

/* Text */
text-white text-text-light-gray text-crimson-red

/* Borders */
border border-soft-gray-border border-crimson-red rounded-xl

/* Shadows & Glows */
shadow-lg shadow-[0_0_20px_rgba(230,0,35,0.3)]

/* Spacing */
p-4 p-6 py-12 gap-4 space-y-4

/* Flex */
flex items-center justify-between gap-4

/* Grid */
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6

/* Transitions */
transition-colors transition-all duration-200
hover:border-crimson-red hover:text-crimson-red
hover:shadow-[0_0_20px_rgba(230,0,35,0.3)]
group-hover:text-crimson-red group-hover:scale-105

/* Aspect Ratios */
aspect-video aspect-square
```

### Component Install Commands

```bash
npx shadcn@latest add button card input label textarea
npx shadcn@latest add form select checkbox switch
npx shadcn@latest add dialog sheet dropdown-menu
npx shadcn@latest add badge avatar skeleton separator
npx shadcn@latest add table tabs accordion
```

### Color Reference (Dark Anime Strategy Portal)

```css
/* Primary Colors */
--crimson-red: #E60023
--hover-red: #FF2A3D

/* Backgrounds */
--deep-black: #0F0F12
--dark-gray: #1A1A1F
--soft-dark: #202026

/* Text */
--text-white: #FFFFFF
--text-light-gray: #B8B8C0

/* Borders */
--soft-gray-border: #2A2A33
```

### Navigation Categories (ten-sura-game.com)

```tsx
// Main navigation categories for ten-sura-game.com
const categories = [
  '攻略情報',              // Strategy Guides
  'キャラクター評価',      // Character Reviews
  'リセマラ・ガチャ情報',  // Reroll & Gacha Info
  'イベント・アップデート', // Events & Updates
  '初心者・育成ガイド',    // Beginner & Training Guides
];
```

### Content Types (ten-sura-game.com)

```tsx
// Article types for ten-sura-game.com
const articleTypes = [
  'リセマラランキング',     // Reroll Rankings
  'キャラクター評価',       // Character Reviews
  '最強キャラランキング',   // Strongest Character Rankings
  'ガチャ情報',             // Gacha Information
  '育成優先度',             // Training Priority
  'イベント攻略',           // Event Guides
  '初心者ガイド',           // Beginner Guides
  'パーティ編成',           // Party Composition
];
```

### Target Keywords (SEO)

```tsx
// Primary keywords for ten-sura-game.com
const targetKeywords = [
  '転スラ リセマラ',
  '転スラ 最強キャラ',
  '転スラ キャラクター評価',
  '転スラ ガチャ',
  '転スラ 攻略',
  '転スラ イベント',
  '転スラ 初心者',
  // Character-specific
  '[キャラクター名] 評価',
  '[キャラクター名] 最強',
  '[キャラクター名] 育成',
];
```

### Red Glow Effect Classes

```css
/* Add to globals.css */
.red-glow {
  box-shadow: 0 0 20px rgba(230, 0, 35, 0.3);
}

.red-glow-strong {
  box-shadow: 0 0 30px rgba(230, 0, 35, 0.5);
}

.red-glow-hover:hover {
  box-shadow: 0 0 20px rgba(230, 0, 35, 0.3);
  border-color: #E60023;
}
```

---

## Design System Summary

This design system for **ten-sura-game.com** provides a comprehensive guide for building a professional mobile gacha RPG strategy guide website with:

- **Dark Anime Strategy Portal Theme** with deep black (#0F0F12) backgrounds
- **Crimson Red Accents** (#E60023) for all clickable elements to maximize CTR
- **High Contrast Design** with white text (#FFFFFF) on dark backgrounds for readability
- **Popular Articles Ranking** with numbered red badges (①②③④⑤) to increase page views
- **Mobile-First Responsive** design approach optimized for gacha game players
- **Japanese-Optimized** typography with Noto Sans JP and 1.8 line height
- **Red Border Glow Effects** on hover for cards and interactive elements
- **Category-Focused** structure for character rankings, reroll guides, and gacha analysis
- **Consistent Component Patterns** using Shadcn/ui and Tailwind CSS with dark theme

### Key Design Rules

1. **Red for CTAs Only:** Use crimson red (#E60023) exclusively for clickable elements (buttons, links, badges, rankings)
2. **Dark Backgrounds:** Deep black (#0F0F12) for pages, dark gray (#1A1A1F) for sections, soft dark (#202026) for cards
3. **High Contrast Text:** White (#FFFFFF) for headings, light gray (#B8B8C0) for secondary text
4. **Red Hover Effects:** Cards get red border glow, titles change to red on hover
5. **12px Border Radius:** Consistent rounded corners (rounded-xl) for all cards and buttons
6. **Popular Ranking:** Always show Top 5 articles with large numbered red badges
7. **Featured Article:** Use large card with thumbnail instead of gradient banner
8. **Section Headers:** Always include vertical red accent bar on the left
9. **Category Badges:** Always use red background with white text
10. **Mobile-First:** Design for 320-768px first, enhance for desktop

All components are designed to work seamlessly together while maintaining the professional dark anime strategy portal aesthetic that ten-sura-game.com requires for maximum user engagement and click-through rates.

