/*
Theme Name: 軸馬先生V4
Description: 16personalities風フラットデザイン
Version: 4.0.1
Author: PinkRose
*/

/* ========================================
   軸馬先生V4 - 16personalities風フラットデザイン
   シンプル・クリーン・高コントラスト
   ======================================== */

/* ===== CSS変数（16personalities風） ===== */
:root {
    /* ===== メインカラー（16personalities風） ===== */
    --purple-primary: #6762A6;      /* 16personalities風メインパープル */
    --purple-light: #8B84C7;        /* ライトパープル */
    --purple-dark: #4A4770;         /* ダークパープル */
    --purple-hover: #524D88;        /* ホバー時のパープル */
    
    /* ===== 性格タイプグループカラー（16personalities準拠） ===== */
    --analysts: #8B5CF6;            /* 分析者 - パープル */
    --diplomats: #06B6D4;           /* 外交官 - シアン */
    --sentinels: #10B981;           /* 番人 - グリーン */
    --explorers: #F59E0B;           /* 探検家 - アンバー */
    
    /* ===== ニュートラルカラー（16personalities風） ===== */
    --white: #FFFFFF;
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;
    
    /* ===== テキストカラー（高コントラスト） ===== */
    --text-primary: #1E293B;        /* メインテキスト（14.06:1） */
    --text-secondary: #475569;      /* セカンダリテキスト（9.46:1） */
    --text-muted: #64748B;          /* 控えめテキスト（7.07:1） */
    --text-white: #FFFFFF;
    
    /* ===== 背景カラー ===== */
    --bg-primary: #FFFFFF;          /* メイン背景 */
    --bg-secondary: #F8FAFC;        /* セクション背景 */
    --bg-muted: #F1F5F9;            /* 控えめ背景 */
    
    /* ===== ボーダー ===== */
    --border-light: #E2E8F0;
    --border-medium: #CBD5E1;
    
    /* ===== 状態カラー ===== */
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #06B6D4;
    
    /* ===== フォント ===== */
    --font-primary: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* ===== サイズ ===== */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    --text-5xl: 3rem;      /* 48px */
    
    /* ===== スペーシング ===== */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    
    /* ===== ボーダー半径 ===== */
    --radius-sm: 0.375rem;  /* 6px */
    --radius: 0.5rem;       /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;
    
    /* ===== シャドウ ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* ===== トランジション ===== */
    --transition: 0.15s ease-out;
    --transition-slow: 0.3s ease-out;
    
    /* ===== レイアウト ===== */
    --container-max: 1200px;
    --header-height: 64px;
}

/* ===== ベーススタイル ===== */
* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    line-height: 1.5;
}

body {
    font-family: var(--font-primary);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== メンテナンス通知バー ===== */
.maintenance-banner {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    color: var(--white);
    padding: var(--space-3) 0;
    position: sticky;
    top: 0;
    z-index: 1001;
    box-shadow: var(--shadow-md);
    animation: maintenance-pulse 2s ease-in-out infinite alternate;
}

@keyframes maintenance-pulse {
    0% { background: linear-gradient(135deg, #DC2626, #B91C1C); }
    100% { background: linear-gradient(135deg, #EF4444, #DC2626); }
}

.maintenance-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;
    flex-wrap: wrap;
}

.maintenance-icon {
    font-size: var(--text-lg);
    animation: maintenance-spin 2s linear infinite;
}

@keyframes maintenance-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.maintenance-text {
    font-size: var(--text-sm);
    line-height: 1.4;
    flex: 1;
    min-width: 250px;
}

.maintenance-text strong {
    font-weight: 700;
    color: #FEF3C7;
}

.maintenance-status {
    background: rgba(255, 255, 255, 0.2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* メンテナンス通知でヘッダーが重ならないよう調整 */
.site-header,
.site-header-modern {
    top: auto;
    position: relative;
}

/* メンテナンス通知のモバイル対応 */
@media (max-width: 768px) {
    .maintenance-content {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .maintenance-text {
        font-size: var(--text-xs);
        min-width: auto;
    }
    
    .maintenance-status {
        font-size: 10px;
        padding: var(--space-1) var(--space-2);
    }
}

/* ===== タイポグラフィ ===== */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 var(--space-4) 0;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
    color: var(--text-secondary);
    margin: 0 0 var(--space-4) 0;
    line-height: 1.6;
}

a {
    color: var(--purple-primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--purple-dark);
    text-decoration: underline;
}

/* ===== レイアウト ===== */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-4);
    }
}

/* ===== ヘッダー（16personalities風） ===== */
.site-header,
.site-header-modern {
    background: var(--white);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

/* ヘッダートップバー */
.header-top-bar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    padding: var(--space-2) 0;
}

.header-announcements {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.announcement-badge {
    background: var(--purple-primary);
    color: var(--white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    font-weight: 500;
}

/* メインヘッダー */
.header-main {
    min-height: var(--header-height);
    padding: 0.75rem 0;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--space-6);
}

/* ===== ロゴ（シンプル） ===== */
.site-logo,
.site-logo-modern {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-weight: 700;
    font-size: var(--text-xl);
    text-decoration: none;
}

.site-logo:hover,
.site-logo-modern:hover {
    color: var(--purple-primary);
    text-decoration: none;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.logo-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transition: var(--transition);
}

.site-logo-modern:hover .logo-image {
    transform: scale(1.05);
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-main {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.logo-sub {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.2;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .logo-image {
        width: 40px;
        height: 40px;
    }
    
    .logo-main {
        font-size: var(--text-lg);
    }
    
    .logo-sub {
        font-size: 0.7rem;
    }
}

/* ===== 16personalities風ナビゲーション ===== */
.main-nav-16p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #6c757d;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
    position: relative;
}

.nav-link:hover {
    color: #495057;
    background-color: #f8f9fa;
    text-decoration: none;
}

.nav-link.active {
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.1);
}

.nav-link.nav-mbti {
    color: var(--purple-primary);
    font-weight: 600;
    position: relative;
}

.nav-link.nav-mbti::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(45deg, var(--purple-primary), var(--analysts));
    transition: width 0.3s ease;
}

.nav-link.nav-mbti:hover::after {
    width: 80%;
}

.nav-label {
    white-space: nowrap;
}

/* ===== アクセシビリティ向上 ===== */
.nav-link:focus {
    outline: 2px solid var(--purple-primary);
    outline-offset: 2px;
}

.btn-primary-16p:focus,
.btn-secondary-16p:focus {
    outline: 2px solid var(--purple-primary);
    outline-offset: 2px;
}

/* ===== 2カラムレイアウト ===== */
.two-column-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.main-column {
    min-width: 0;
}

.sidebar-column {
    min-width: 0;
}

/* 性格タイプサイドバー */
.mbti-info-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 性格タイプ サイドバーウィジェット - シンプル版 */
.mbti-sidebar-title {
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.mbti-sidebar-tips {
    margin-bottom: 1rem;
}

.mbti-sidebar-tip {
    margin-bottom: 0.75rem;
    line-height: 1.5;
    font-size: var(--text-sm);
}

.mbti-sidebar-tip strong {
    font-weight: 700;
    margin-right: 0.25rem;
}

.mbti-sidebar-action {
    font-size: var(--text-sm);
    line-height: 1.5;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

.mbti-sidebar-action strong {
    font-weight: 700;
}

/* グループ別のカラー */
.mbti-analyst-content .mbti-sidebar-title {
    color: var(--purple-primary);
}

.mbti-diplomat-content .mbti-sidebar-title {
    color: var(--success);
}

.mbti-sentinel-content .mbti-sidebar-title {
    color: var(--warning);
}

.mbti-explorer-content .mbti-sidebar-title {
    color: var(--danger);
}

.sidebar-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--border-light);
}

.sidebar-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.sidebar-content {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.mbti-benefits {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}

.mbti-benefits li {
    padding: 0.25rem 0;
    font-size: var(--text-sm);
}

.mbti-groups-overview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.group-overview {
    padding: 0.75rem;
    border-radius: var(--radius);
    font-size: var(--text-sm);
}

.group-overview.analysts {
    background: rgba(139, 92, 246, 0.1);
    border-left: 3px solid var(--analysts);
}

.group-overview.diplomats {
    background: rgba(6, 182, 212, 0.1);
    border-left: 3px solid var(--diplomats);
}

.group-overview.sentinels {
    background: rgba(16, 185, 129, 0.1);
    border-left: 3px solid var(--sentinels);
}

.group-overview.explorers {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--explorers);
}

.group-overview strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.effect-stat {
    text-align: center;
    margin-bottom: 1rem;
}

.stat-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--purple-primary);
    line-height: 1;
}

.stat-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.effect-note {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
    margin-top: 1rem;
}

/* why-mbtiサイドバー */
.why-mbti-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stat-item {
    text-align: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(111, 66, 193, 0.05);
    border-radius: var(--radius);
}

.stat-number {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--purple-primary);
    line-height: 1;
}

.stat-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.25rem 0;
}

.stat-detail {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.research-point {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-muted);
    border-radius: var(--radius);
}

.research-point ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.research-point li {
    font-size: var(--text-sm);
    margin: 0.25rem 0;
}

.timeline-item {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-left: 3px solid var(--purple-primary);
    background: var(--bg-secondary);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.timeline-item strong {
    display: block;
    color: var(--purple-primary);
    font-size: var(--text-sm);
    margin-bottom: 0.25rem;
}

.timeline-item p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.cta-sidebar {
    background: linear-gradient(135deg, var(--purple-primary), var(--analysts));
    color: white;
}

.cta-sidebar .sidebar-title {
    color: white;
}

.cta-sidebar .sidebar-content {
    color: rgba(255, 255, 255, 0.9);
}

.btn-sidebar-cta {
    display: inline-block;
    width: 100%;
    padding: 0.75rem 1rem;
    background: white;
    color: var(--purple-primary);
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 600;
    margin-top: 1rem;
    transition: all 0.2s ease;
}

.btn-sidebar-cta:hover {
    background: var(--bg-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: var(--purple-dark);
}

/* レスポンシブ: モバイルでは1カラム */
@media (max-width: 768px) {
    .two-column-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .sidebar-column {
        order: -1;
    }
    
    .mbti-groups-overview {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .why-mbti-sidebar {
        grid-template-columns: 1fr 1fr;
        display: grid;
        gap: 1rem;
    }

    .cta-sidebar {
        grid-column: 1 / -1;
    }
}

/* ===== 競馬場別リンク ===== */
.racetrack-links-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.racetrack-section {
    margin-bottom: 1.5rem;
}

.racetrack-section-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-light);
}

.racetrack-link {
    display: block;
    padding: 1.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
}

.racetrack-link:hover {
    border-color: var(--purple-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    color: var(--text-primary);
}

.racetrack-link:hover .racetrack-icon {
    transform: scale(1.1);
}

.racetrack-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
    transition: transform 0.3s ease;
}

.racetrack-name {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.racetrack-info {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.racetrack-stats {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: 500;
}

/* 競馬場別カラー */
.racetrack-link.tokyo:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(248, 113, 113, 0.1));
    border-color: #ef4444;
}

.racetrack-link.hanshin:hover {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(244, 114, 182, 0.1));
    border-color: #ec4899;
}

.racetrack-link.nakayama:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(196, 125, 249, 0.1));
    border-color: #a855f7;
}

.racetrack-link.kyoto:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.1));
    border-color: #f59e0b;
}

.racetrack-link.chukyo:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(34, 211, 238, 0.1));
    border-color: #06b6d4;
}

.racetrack-link.kokura:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.1));
    border-color: #10b981;
}

.racetrack-link.niigata:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(167, 139, 250, 0.1));
    border-color: #8b5cf6;
}

.racetrack-link.hakodate:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.1));
    border-color: #3b82f6;
}

.racetrack-link.sapporo:hover {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1), rgba(156, 163, 175, 0.1));
    border-color: #6b7280;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .racetrack-links-grid .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    .racetrack-link {
        padding: 1.25rem;
    }
    
    .racetrack-icon {
        font-size: 2rem;
    }
    
    .racetrack-name {
        font-size: var(--text-base);
    }
    
    .racetrack-section-title {
        font-size: var(--text-lg);
    }
}

.nav-icon {
    font-size: var(--text-base);
}

/* ===== 実績詳細ページ ===== */
.result-main {
    min-width: 0;
}

/* 実績ヘッダー */
.result-header {
    margin-bottom: 2rem;
}

.result-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.result-icon {
    font-size: 1.5em;
}

.result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* サマリーカード */
.result-summary-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-light);
}

.card-header {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.summary-item {
    text-align: center;
}

.summary-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--purple-primary);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.summary-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* コンテンツ */
.result-content {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-light);
}

.content-header {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.content-body {
    color: var(--text-primary);
    line-height: 1.8;
}

/* 最近の実績（改良版） */
.recent-result-item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s ease;
    margin-bottom: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.recent-result-item:last-child {
    margin-bottom: 0;
}

.recent-result-item:hover {
    background: var(--purple-light);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--text-primary);
}

.result-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.result-title {
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.result-rate {
    font-size: var(--text-xs);
    color: var(--success);
    font-weight: 600;
    align-self: flex-start;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

/* 関連リンク */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
    font-size: var(--text-sm);
    font-weight: 500;
}

.sidebar-link:last-child {
    margin-bottom: 0;
}

.sidebar-link:hover {
    background: var(--purple-light);
    color: var(--purple-primary);
    text-decoration: none;
    transform: translateX(2px);
}

.link-icon {
    font-size: 1em;
    color: var(--text-secondary);
}

.sidebar-link:hover .link-icon {
    color: var(--purple-primary);
}

/* 統計ウィジェット（修正版） */
.stats-widget .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
}

.stats-widget .stat-item:first-child {
    padding-top: 0;
}

.stats-widget .stat-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.stat-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.stat-value {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--purple-primary);
}

/* 統計ウィジェット専用のコンテンツ余白 */
.stats-widget .widget-content {
    padding: var(--space-4);
}

/* ===== 性格タイプページスタイリング ===== */
/* 現在の設定表示 */
.current-mbti-status {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-light);
}

.status-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.status-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--purple-primary) 0%, rgba(99, 102, 241, 0.7) 100%);
}

/* 性格タイプグループ別のカラーアクセント */
.status-card.mbti-analyst::before {
    background: linear-gradient(180deg, var(--purple-primary) 0%, rgba(99, 102, 241, 0.7) 100%);
}

.status-card.mbti-diplomat::before {
    background: linear-gradient(180deg, var(--success) 0%, rgba(16, 185, 129, 0.7) 100%);
}

.status-card.mbti-sentinel::before {
    background: linear-gradient(180deg, var(--warning) 0%, rgba(245, 158, 11, 0.7) 100%);
}

.status-card.mbti-explorer::before {
    background: linear-gradient(180deg, var(--danger) 0%, rgba(239, 68, 68, 0.7) 100%);
}

.mbti-type-display {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mbti-type-code {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--purple-primary);
    font-family: var(--font-mono);
    background: linear-gradient(135deg, var(--purple-primary), rgba(139, 92, 246, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mbti-type-name {
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

.mbti-group-display {
    margin-bottom: 1rem;
}

.mbti-group-name {
    font-size: var(--text-base);
    color: var(--text-primary);
    font-weight: 600;
    background: linear-gradient(135deg, var(--bg-secondary), rgba(248, 250, 252, 0.8));
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    display: inline-block;
}

.mbti-updated-date {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* 16Personalities連携ガイド */
.mbti-integration-guide {
    background: linear-gradient(135deg, var(--bg-primary), rgba(248, 250, 252, 0.5));
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.guide-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.guide-description {
    margin-bottom: 2rem;
    color: var(--text-secondary);
}

.guide-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
    .guide-steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.guide-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.guide-step:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.step-number {
    background: linear-gradient(135deg, var(--purple-primary), rgba(139, 92, 246, 0.9));
    color: var(--white);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.step-content h4 {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.step-content p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

.guide-action {
    text-align: center;
}

/* 性格タイプ設定フォーム */
.mbti-setup-form {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-light);
}

.form-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-label {
    display: block;
    margin-bottom: 1.5rem;
}

.label-text {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
}

.label-note {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* 性格タイプ選択グリッド */
.mbti-type-grid {
    display: grid;
    gap: 2rem;
}

.mbti-group-section {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.5rem;
    border: 1px solid var(--border-light);
}

.group-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.type-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.mbti-type-option {
    display: block;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mbti-type-option input[type="radio"] {
    display: none;
}

.option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: var(--radius);
    transition: all 0.2s ease;
    text-align: center;
}

.mbti-type-option:hover .option-content {
    background: var(--purple-light);
    border-color: var(--purple-primary);
}

.mbti-type-option.selected .option-content,
.mbti-type-option input:checked + .option-content {
    background: var(--purple-primary);
    border-color: var(--purple-primary);
    color: var(--white);
}

.type-code {
    font-size: var(--text-lg);
    font-weight: 700;
    font-family: var(--font-mono);
}

.type-name {
    font-size: var(--text-sm);
    font-weight: 500;
}

.form-actions {
    margin-top: 2rem;
    text-align: center;
}

.form-note {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* プレビューセクション */
.personalization-preview {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-light);
}

.preview-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preview-before-after {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
}

.preview-section h4 {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
    text-align: center;
}

.preview-example {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.5rem;
    border: 1px solid var(--border-light);
}

.preview-arrow {
    font-size: var(--text-2xl);
    color: var(--purple-primary);
    font-weight: 600;
}

/* サイドバー - 性格タイプグループ概要 */
.mbti-groups-overview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.group-overview {
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border-medium);
}

.group-overview.analysts {
    border-left-color: var(--purple-primary);
}

.group-overview.diplomats {
    border-left-color: var(--success);
}

.group-overview.sentinels {
    border-left-color: var(--warning);
}

.group-overview.explorers {
    border-left-color: var(--danger);
}

.group-overview strong {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

.group-overview p {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    margin: 0;
}

/* 性格タイプベネフィット */
.mbti-benefits {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

.mbti-benefits li {
    padding: 0.5rem 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-light);
}

.mbti-benefits li:last-child {
    border-bottom: none;
}

.effect-note {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 1rem;
    font-style: italic;
}

/* ログイン必要通知 */
.login-required-notice {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    margin: 2rem 0;
}

.notice-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.login-required-notice h1 {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.login-required-notice p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.login-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   実績統計分析ページ専用スタイル
   ======================================== */

.stats-section {
    margin-bottom: 3rem;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.stats-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 2rem 2rem 1rem;
    margin: 0;
    border-bottom: 1px solid var(--gray-100);
}

/* 基本統計概要グリッド */
.stats-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
}

.stat-card {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.stat-card.highlight {
    background: linear-gradient(135deg, #E0F2FE, #BAE6FD);
    color: #0C4A6E;
    transform: scale(1.05);
    border: 2px solid #0EA5E9;
    font-weight: 700;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(103, 98, 166, 0.15);
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.stat-detail {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* ハイライトカード内の文字色を確実に設定 */
.stat-card.highlight .stat-value {
    color: #0C4A6E;
    font-weight: 900;
}

.stat-card.highlight .stat-label {
    color: #0C4A6E;
    opacity: 1;
    font-weight: 700;
}

.stat-card.highlight .stat-detail {
    color: #0C4A6E;
    opacity: 0.8;
    font-weight: 600;
}

/* 直近成績推移 */
.recent-performance {
    padding: 2rem;
}

.performance-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.performance-item {
    display: grid;
    grid-template-columns: 60px 1fr 60px 80px;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: all 0.3s ease;
}

.performance-item.good {
    background: rgba(16, 185, 129, 0.1);
    border-left: 4px solid var(--success);
}

.performance-item:hover {
    transform: translateX(4px);
}

.performance-date {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.performance-bar {
    position: relative;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.performance-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple-primary), var(--purple-light));
    border-radius: 4px;
    transition: width 0.6s ease;
}

.performance-rate {
    font-weight: 700;
    color: var(--purple-primary);
    text-align: center;
}

.performance-detail {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
}

/* 競馬場別統計テーブル */
.racetrack-stats {
    padding: 2rem;
}

.stats-table-container {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
}

.stats-table th {
    background: var(--bg-secondary);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--gray-200);
}

.stats-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--gray-100);
}

.stats-table tr:hover {
    background: var(--bg-secondary);
}

.stats-table tr.top-rank {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent);
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--white);
    margin-right: 0.5rem;
}

.rank-1 .rank-badge { background: #FFD700; }
.rank-2 .rank-badge { background: #C0C0C0; }
.rank-3 .rank-badge { background: #CD7F32; }

.track-name {
    font-weight: 600;
    color: var(--text-primary);
}

.hit-rate .rate-value {
    font-weight: 700;
    color: var(--purple-primary);
    font-size: 1.1rem;
}

/* 馬券種別統計 */
.bet-type-stats {
    padding: 2rem;
}

.bet-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.bet-type-card {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.bet-type-card:hover {
    border-color: var(--purple-primary);
    transform: translateY(-2px);
}

.bet-type-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--purple-primary);
    margin-bottom: 0.5rem;
}

.bet-type-hits {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.bet-type-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* 月別推移チャート */
.monthly-stats {
    padding: 2rem;
}

.monthly-chart {
    margin-bottom: 2rem;
}

.chart-container {
    margin-bottom: 2rem;
}

.chart-bars {
    display: flex;
    align-items: end;
    gap: 1rem;
    height: 300px;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow-x: auto;
    position: relative;
    border: 1px solid #e5e7eb;
}

/* 50%ベースライン */
.chart-bars::before {
    content: "";
    position: absolute;
    bottom: 50%;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: rgba(239, 68, 68, 0.6);
    border-radius: 1px;
}

.chart-bars::after {
    content: "50%ライン";
    position: absolute;
    bottom: calc(50% + 5px);
    right: 1.5rem;
    font-size: 0.75rem;
    color: rgba(239, 68, 68, 0.8);
    font-weight: 500;
}

.chart-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    flex: 1;
}

.chart-bar {
    position: relative;
    width: 60px;
    background: linear-gradient(180deg, #0EA5E9, #38BDF8);
    border-radius: 6px 6px 0 0;
    min-height: 20px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

/* 50%以上の場合（良好） */
.chart-bar.above-baseline {
    background: linear-gradient(180deg, #10B981, #34D399);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* 50%未満の場合（要改善） */
.chart-bar.below-baseline {
    background: linear-gradient(180deg, #F59E0B, #FBBF24);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.chart-bar:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.5);
}

.chart-bar.above-baseline:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5);
}

.chart-bar.below-baseline:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5);
}

.bar-value {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.chart-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
}

/* 月別統計サマリー */
.summary-card {
    background: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.summary-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.rate-value.good {
    color: #10B981;
    font-weight: 600;
}

.rate-value.normal {
    color: var(--text-primary);
}

.chart-legend {
    text-align: center;
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(14, 165, 233, 0.1);
    border-radius: 8px;
}

.chart-legend p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.monthly-summary h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.month-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.month-name {
    font-weight: 600;
    color: var(--text-primary);
}

.month-rate {
    font-weight: 700;
    color: var(--purple-primary);
}

.month-detail {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* 穴馬統計 */
.dark-horse-stats {
    padding: 2rem;
}

.dark-horse-highlight {
    margin-bottom: 2rem;
}

.highlight-item {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, var(--warning), #F59E0B);
    border-radius: 16px;
    color: var(--white);
}

.highlight-value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.highlight-label {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.highlight-date {
    font-size: 0.875rem;
    opacity: 0.9;
}

.recent-dark-horse h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.dark-horse-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dark-horse-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.success-date {
    font-weight: 500;
    color: var(--text-secondary);
}

.success-rate {
    font-weight: 700;
    color: var(--warning);
}

.no-data {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* アーカイブページの統計リンク */
.archive-stats-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-light));
    color: var(--white);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.archive-stats-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(103, 98, 166, 0.3);
    text-decoration: none;
    color: var(--white);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .guide-steps {
        grid-template-columns: 1fr;
    }
    
    .type-options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .preview-before-after {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .preview-arrow {
        transform: rotate(90deg);
        text-align: center;
    }
    
    .login-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .login-actions .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* ===== 性格タイプ自動変換コンテンツスタイリング ===== */
.mbti-converted-content {
    position: relative;
}

/* 性格タイプグループ別のアクセントカラーは削除（左端の線を除去） */

/* 性格タイプ表示機能 - 予想ページ限定 */
/* 性格タイプ専用表示バナー */
.single .mbti-active-banner {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    padding: 16px 24px;
    margin-bottom: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    animation: mbtiSlideIn 0.6s ease-out;
}

.single .mbti-active-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: mbtiShimmer 2s infinite;
    animation-delay: 1s;
}

.single .mbti-active-banner.analyst {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.single .mbti-active-banner.diplomat {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.25);
    border: 1px solid rgba(5, 150, 105, 0.3);
}

.single .mbti-active-banner.sentinel {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.25);
    border: 1px solid rgba(217, 119, 6, 0.3);
}

.single .mbti-active-banner.explorer {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 8px 32px rgba(239, 68, 68, 0.25);
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.mbti-banner-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mbti-banner-icon {
    font-size: 1.5em;
    animation: mbtiBrainPulse 2s ease-in-out infinite;
}

.mbti-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mbti-banner-main {
    font-size: 1.1em;
    font-weight: 700;
}

.mbti-banner-sub {
    font-size: 0.85em;
    opacity: 0.9;
    font-weight: 400;
}

.mbti-banner-toggle {
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.mbti-banner-toggle:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-1px);
}

/* 性格タイプ変換文言のハイライト */
.mbti-converted-content .mbti-highlight {
    background: linear-gradient(120deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    position: relative;
    border-bottom: 2px solid rgba(99, 102, 241, 0.4);
}

.mbti-converted-content[data-mbti-group="diplomat"] .mbti-highlight {
    background: linear-gradient(120deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
    border-bottom-color: rgba(16, 185, 129, 0.4);
}

.mbti-converted-content[data-mbti-group="sentinel"] .mbti-highlight {
    background: linear-gradient(120deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
    border-bottom-color: rgba(245, 158, 11, 0.4);
}

.mbti-converted-content[data-mbti-group="explorer"] .mbti-highlight {
    background: linear-gradient(120deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
    border-bottom-color: rgba(239, 68, 68, 0.4);
}

.mbti-converted-content .mbti-pattern-highlight {
    background: linear-gradient(120deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 500;
    border-left: 3px solid rgba(99, 102, 241, 0.3);
}

.mbti-converted-content[data-mbti-group="diplomat"] .mbti-pattern-highlight {
    background: linear-gradient(120deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
    border-left-color: rgba(16, 185, 129, 0.3);
}

.mbti-converted-content[data-mbti-group="sentinel"] .mbti-pattern-highlight {
    background: linear-gradient(120deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
    border-left-color: rgba(245, 158, 11, 0.3);
}

.mbti-converted-content[data-mbti-group="explorer"] .mbti-pattern-highlight {
    background: linear-gradient(120deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-left-color: rgba(239, 68, 68, 0.3);
}

/* アニメーション */
@keyframes mbtiSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mbtiShimmer {
    from {
        left: -100%;
    }
    to {
        left: 100%;
    }
}

@keyframes mbtiBrainPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* 標準表示コンテンツ */
.original-content-toggle {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border: 2px solid #dee2e6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.original-content-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #dee2e6;
}

.original-content-header .toggle-icon {
    font-size: 1.2em;
}

.original-content-header .toggle-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #495057;
}

.original-content {
    color: #495057;
    line-height: 1.7;
}

/* 性格タイプ レスポンシブ対応 */
@media (max-width: 768px) {
    .single .mbti-active-banner {
        padding: 12px 16px;
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .mbti-banner-content {
        justify-content: center;
    }
    
    .mbti-banner-icon {
        font-size: 1.3em;
    }
    
    .mbti-banner-main {
        font-size: 1em;
    }
    
    .mbti-banner-sub {
        font-size: 0.8em;
    }
    
    .mbti-banner-toggle {
        padding: 6px 12px;
        font-size: 0.85em;
    }
}

/* why-mbtiページ専用スタイル */
/* 比較グリッド */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.comparison-card {
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.comparison-card.problem {
    background: linear-gradient(145deg, #fef2f2 0%, #fee2e2 100%);
    border-left: 4px solid #ef4444;
}

.comparison-card.solution {
    background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
    border-left: 4px solid #22c55e;
}

.problem-title {
    color: #ef4444;
    margin-bottom: 1rem;
}

.solution-title {
    color: #22c55e;
    margin-bottom: 1rem;
}

.problem-list,
.solution-list {
    color: #6b7280;
    line-height: 1.8;
}

/* 重要性セクション */
.importance-section {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    padding: 3rem;
    border-radius: 16px;
    text-align: center;
    margin: 3rem 0;
}

.importance-title {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.importance-text {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.industry-first {
    background: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.industry-first-title {
    font-size: 1.25rem;
    display: block;
    margin-bottom: 0.5rem;
}

.industry-first-sub {
    opacity: 0.9;
}

/* 性格タイプグリッド */
.mbti-types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.mbti-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

.mbti-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.mbti-card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.mbti-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.mbti-card-subtitle {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

.mbti-card-content {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    text-align: left;
}

.mbti-card-content ul {
    margin-top: 0.5rem;
    color: #6b7280;
}

.mbti-card-types {
    font-weight: 600;
    color: #374151;
}

/* 強みグリッド */
.strengths-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.strength-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.strength-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.strength-card.psychology {
    border-top: 4px solid #6366f1;
}

.strength-card.system {
    border-top: 4px solid #22c55e;
}

.strength-card.business {
    border-top: 4px solid #f59e0b;
}

.strength-title {
    margin-bottom: 1rem;
}

.strength-card.psychology .strength-title {
    color: #6366f1;
}

.strength-card.system .strength-title {
    color: #22c55e;
}

.strength-card.business .strength-title {
    color: #f59e0b;
}

.strength-content {
    color: #6b7280;
    line-height: 1.6;
}

/* 最終CTAセクション */
.final-cta-section {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    padding: 3rem;
    border-radius: 16px;
    text-align: center;
    margin-top: 3rem;
}

.cta-title {
    color: white;
    font-size: 1.75rem;
    margin-bottom: 2rem;
}

.cta-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.cta-feature {
    text-align: center;
}

.cta-feature-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.cta-feature strong {
    display: block;
    margin-bottom: 0.25rem;
}

.cta-feature span {
    opacity: 0.8;
    font-size: 0.9em;
}

/* サイドバーの統計表示 */
.stat-item {
    text-align: center;
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #6366f1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
}

.stat-detail {
    font-size: 0.875rem;
    color: #6b7280;
}

.timeline-item {
    padding: 1rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.timeline-item:last-child {
    border-bottom: none;
}

/* ボトムCTA */
.bottom-cta-section {
    background: #f8fafc;
    padding: 4rem 0;
    margin-top: 4rem;
}

.bottom-cta-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.bottom-cta-title {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
    color: #111827;
}

.bottom-cta-text {
    font-size: 1.125rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.bottom-cta-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto 2rem;
}

.cta-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.feature-check {
    color: #22c55e;
    font-weight: 600;
}

.bottom-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .mbti-types-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-features {
        grid-template-columns: 1fr;
    }
    
    .bottom-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* 性格タイプ個人化通知 */
.mbti-personalization-notice {
    background: linear-gradient(135deg, var(--purple-light), rgba(111, 66, 193, 0.1));
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.mbti-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.mbti-badge .mbti-type {
    background: var(--purple-primary);
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: var(--text-sm);
    font-family: var(--font-mono);
}

.mbti-badge .mbti-label {
    color: var(--purple-primary);
    font-weight: 600;
    font-size: var(--text-sm);
}

.mbti-message {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    flex: 1;
}

/* 予想ヘッダー */
.prediction-header {
    margin-bottom: 2rem;
}

.prediction-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.title-emoji {
    font-size: 1.2em;
}

/* 予想セクション */
.prediction-section {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-light);
}

/* 小さなセクションタイトル（廃止予定 - .section-title--small を使用） */
.section-title--small {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-align: center;
}

/* フレックス表示が必要な場合の小タイトル */
.section-title--small-flex {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

/* 馬カード */
.horses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.horse-card {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
}

.horse-card.high {
    border: 2px solid var(--success);
    background: rgba(16, 185, 129, 0.05);
}

.horse-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.horse-number {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--purple-primary);
    margin-bottom: 0.5rem;
}

.horse-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.horse-confidence {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.horse-confidence .label {
    display: block;
    margin-bottom: 0.25rem;
}

.horse-confidence .value {
    font-weight: 600;
    color: var(--purple-primary);
}

/* 予想根拠 */
.reasoning-content {
    color: var(--text-primary);
    line-height: 1.8;
}

/* 馬券戦略 */
.strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.strategy-card {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 1rem;
    border-left: 3px solid var(--purple-primary);
}

.strategy-type {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.strategy-horses {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--purple-primary);
    margin-bottom: 0.5rem;
}

.strategy-amount {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.strategy-risk {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* データグリッド（アナリスト用） */
.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.data-item {
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    text-align: center;
}

.data-item .label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.data-item .value {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--purple-primary);
}

/* ストーリーコンテンツ（ディプロマット用） */
.story-content {
    font-style: italic;
    color: var(--text-secondary);
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border-left: 3px solid var(--success);
}

/* 免責事項 */
.disclaimer-content {
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    border-left: 3px solid var(--warning);
}

.disclaimer-content.tone-analytical {
    border-left-color: var(--purple-primary);
}

.disclaimer-content.tone-intuitive {
    border-left-color: var(--success);
}

.disclaimer-content.tone-conservative {
    border-left-color: var(--warning);
}

.disclaimer-content.tone-adventurous {
    border-left-color: var(--danger);
}

/* オリジナルコンテンツトグル */
.original-content-toggle {
    margin-top: 2rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
}

.toggle-button {
    width: 100%;
    padding: 1rem;
    background: var(--bg-secondary);
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s ease;
}

.toggle-button:hover {
    background: var(--purple-light);
}

.original-content {
    padding: 1.5rem;
    background: var(--white);
    border-top: 1px solid var(--border-light);
}

/* 性格タイプグループ別カラースキーム */
.mbti-prediction-container[data-mbti-group="analyst"] .section-title {
    color: var(--purple-primary);
}

.mbti-prediction-container[data-mbti-group="diplomat"] .section-title {
    color: var(--success);
}

.mbti-prediction-container[data-mbti-group="sentinel"] .section-title {
    color: var(--warning);
}

.mbti-prediction-container[data-mbti-group="explorer"] .section-title {
    color: var(--danger);
}

/* 性格タイプ予想レスポンシブ対応 */
@media (max-width: 768px) {
    .mbti-personalization-notice {
        flex-direction: column;
        text-align: center;
    }
    
    .horses-grid {
        grid-template-columns: 1fr;
    }
    
    .strategy-grid {
        grid-template-columns: 1fr;
    }
    
    .mbti-prediction-container {
        padding: 1rem;
    }
}

/* ナビゲーション */
.result-navigation {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
}

.nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
}

.nav-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-prev {
    text-align: left;
}

.nav-next {
    text-align: right;
}

.nav-center {
    text-align: center;
}

.nav-direction {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-link {
    text-decoration: none;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--purple-primary);
    text-decoration: none;
}

.nav-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.nav-date {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.nav-archive {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    transition: all 0.2s ease;
    text-decoration: none;
}

.nav-archive:hover {
    background: var(--purple-primary);
    color: var(--white);
    text-decoration: none;
}

.nav-icon {
    font-size: 1.5rem;
}

/* 実績ページレスポンシブ */
@media (max-width: 768px) {
    .result-main {
        margin-bottom: var(--space-6);
    }
    
    .sidebar-column {
        order: -1;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .nav-container {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }
}

/* ===== レース開催日情報 ===== */
.race-date-info {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--purple-primary);
}

.nav-text {
    white-space: nowrap;
}

/* ===== 16personalities風ヘッダーアクション ===== */
.header-actions-16p {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
}

.user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(45deg, #6f42c1, #007bff);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
}

.btn-primary-16p {
    padding: 0.5rem 1rem;
    background: linear-gradient(45deg, #6f42c1, #007bff);
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-primary-16p:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
    background: linear-gradient(45deg, var(--purple-hover), #0056b3);
    color: white;
    text-decoration: none;
}

.btn-secondary-16p {
    padding: 0.5rem 1rem;
    background: transparent;
    color: #6c757d;
    text-decoration: none;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-secondary-16p:hover {
    color: #495057;
    border-color: #adb5bd;
    background-color: #f8f9fa;
    text-decoration: none;
}

.btn-login-register {
    padding: 0.5rem 1rem;
    background: linear-gradient(45deg, var(--purple-primary), var(--analysts));
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-login-register:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
    background: linear-gradient(45deg, var(--purple-hover), var(--analysts));
    color: white;
    text-decoration: none;
}

.btn-user-dashboard {
    padding: 0.5rem 1rem;
    background: var(--gray-100);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--gray-200);
    cursor: pointer;
}

.btn-user-dashboard:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: var(--white);
    color: var(--purple-primary);
    text-decoration: none;
}

/* ヘッダー認証ボタン（ログイン・会員登録分割）*/
.header-auth-buttons {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.btn-login {
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--gray-300);
    cursor: pointer;
}

.btn-login:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
    color: var(--text-primary);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-register {
    padding: 0.5rem 1rem;
    background: linear-gradient(45deg, var(--purple-primary), var(--analysts));
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-register:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
    background: linear-gradient(45deg, var(--purple-hover), var(--analysts));
    color: white;
    text-decoration: none;
    border-color: var(--purple-primary);
}

.user-name-only {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
}

/* ヘッダーアクション（旧版） */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.login-btn,
.register-btn {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}

.login-btn {
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
    background: var(--white);
}

.login-btn:hover {
    color: var(--purple-primary);
    border-color: var(--purple-primary);
    text-decoration: none;
}

.register-btn {
    background: var(--purple-primary);
    color: var(--white);
    border: 1px solid var(--purple-primary);
}

.register-btn:hover {
    background: var(--purple-dark);
    border-color: var(--purple-dark);
    color: var(--white);
    text-decoration: none;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    transition: var(--transition);
}

.user-menu:hover {
    background: var(--bg-secondary);
    color: var(--purple-primary);
    text-decoration: none;
}

.user-icon {
    font-size: var(--text-lg);
}

.user-name {
    font-size: var(--text-sm);
    font-weight: 500;
}

/* ===== ボタン（16personalities風） ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.25;
}

.btn-primary {
    background: var(--purple-primary) !important;
    color: var(--white) !important;
    border: 2px solid var(--purple-primary);
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--purple-hover) !important;
    color: var(--white) !important;
    border-color: var(--purple-hover);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(103, 98, 166, 0.3);
}

.btn-secondary {
    background: var(--white) !important;
    color: var(--purple-primary) !important;
    border: 2px solid var(--purple-primary);
    font-weight: 600;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background: var(--purple-primary) !important;
    color: var(--white) !important;
    border-color: var(--purple-primary);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(103, 98, 166, 0.2);
}

.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    border-radius: var(--radius-lg);
    letter-spacing: 0.02em;
}

/* ===== ヒーローセクション（16personalities風） ===== */
.hero-section,
.hero-section-new {
    background: var(--bg-primary);
    padding: var(--space-20) 0;
    text-align: center;
}

/* 背景画像付きヒーローセクション */
.hero-with-background {
    position: relative;
    background: var(--bg-primary);
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: center;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0.3;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.1) 0%,
        rgba(59, 130, 246, 0.05) 50%,
        rgba(16, 185, 129, 0.1) 100%
    );
}

.hero-with-background .container {
    position: relative;
    z-index: 2;
}

.hero-with-background .hero-title {
    color: var(--text-primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-with-background .hero-subtitle {
    color: var(--text-secondary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .hero-with-background {
        min-height: 500px;
        padding: var(--space-16) 0;
    }
    
    .hero-bg-image {
        object-position: center right;
    }
}

.hero-title {
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-6);
    line-height: 1.1;
}

.hero-subtitle {
    font-size: var(--text-xl);
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: var(--text-3xl);
    }
    
    .hero-subtitle {
        font-size: var(--text-lg);
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* ===== カード（16personalities風） ===== */
.card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: var(--transition);
}

.card:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.card-description {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ===== 性格タイプカラー（16personalities準拠） ===== */
.mbti-analyst { color: var(--analysts); }
.mbti-diplomat { color: var(--diplomats); }
.mbti-sentinel { color: var(--sentinels); }
.mbti-explorer { color: var(--explorers); }

.mbti-card.analyst { border-left: 4px solid var(--analysts); }
.mbti-card.diplomat { border-left: 4px solid var(--diplomats); }
.mbti-card.sentinel { border-left: 4px solid var(--sentinels); }
.mbti-card.explorer { border-left: 4px solid var(--explorers); }

/* ===== セクション ===== */
.section {
    padding: var(--space-16) 0;
}

.section-alt {
    background: var(--bg-secondary);
}

/* 大きなセクションタイトル（廃止予定 - .section-title--large を使用） */
.section-title--large {
    font-size: var(--text-3xl);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--space-12);
    color: var(--text-primary);
}

/* ===== グリッド ===== */
.grid {
    display: grid;
    gap: var(--space-6);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* ===== フッター（16personalities風） ===== */
.site-footer,
.site-footer-modern {
    background: var(--gray-900);
    color: var(--gray-300);
    margin-top: auto;
}

/* フッターメイン */
.footer-main {
    position: relative;
    padding: 4rem 0 3rem 0;
    background: 
        linear-gradient(135deg, rgba(10, 14, 26, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%),
        url('assets/img/footer.png') center center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('assets/img/footer.png') center center;
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.1;
    z-index: 1;
    pointer-events: none;
}

.footer-main > .container {
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* フッターロゴ */
.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.footer-logo-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.footer-logo-icon {
    display: flex;
    gap: var(--space-1);
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
    padding: var(--space-2);
    border-radius: var(--radius);
    font-size: var(--text-base);
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
}

.footer-logo-text .logo-main {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}

.footer-logo-text .logo-sub {
    font-size: var(--text-xs);
    color: var(--gray-400);
    line-height: 1.2;
}

.footer-description {
    color: var(--gray-400);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

/* フッター特徴バッジ */
.footer-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.feature-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: rgba(255, 255, 255, 0.1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    color: var(--white);
}

.feature-badge.free { background: rgba(16, 185, 129, 0.2); }
.feature-badge.mbti { background: rgba(103, 98, 166, 0.2); }
.feature-badge.transparency { background: rgba(6, 182, 212, 0.2); }

/* フッタータイトル */
.footer-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--space-4);
}

/* フッターナビゲーション */
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-400);
    text-decoration: none;
    padding: var(--space-1) 0;
    transition: var(--transition);
    font-size: var(--text-sm);
}

.footer-link:hover {
    color: var(--purple-light);
    text-decoration: none;
    transform: translateX(4px);
}

.footer-link.special {
    color: var(--purple-light);
    font-weight: 500;
}

.link-icon {
    font-size: var(--text-xs);
}

/* ソーシャルリンク */
.social-links-modern {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.social-link-modern {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-400);
    text-decoration: none;
    padding: var(--space-2);
    border-radius: var(--radius);
    transition: var(--transition);
}

.social-link-modern:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    text-decoration: none;
}

/* 性格タイプ訴求 */
.mbti-highlight {
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-secondary));
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
}

.mbti-title {
    font-size: var(--text-sm);
    color: var(--white);
    margin-bottom: var(--space-1);
}

.mbti-amount {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.mbti-note {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.9);
}

/* 節約アピール（旧） */
.savings-highlight {
    background: linear-gradient(135deg, var(--warning), #F59E0B);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
}

.savings-title {
    font-size: var(--text-sm);
    color: var(--white);
    margin-bottom: var(--space-1);
}

.savings-amount {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.savings-note {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.8);
}

/* 免責事項 */
.footer-disclaimer-modern {
    background: var(--gray-800);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--gray-700);
}

.disclaimer-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.disclaimer-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.disclaimer-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--warning);
    margin: 0;
}

.disclaimer-text {
    color: var(--gray-400);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.disclaimer-text p {
    margin: 0 0 var(--space-3) 0;
}

.responsible-gambling a {
    color: var(--purple-light);
    text-decoration: underline;
}

/* フッター最下部 */
.footer-bottom-modern {
    background: var(--gray-800);
    padding: var(--space-6) 0;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.legal-nav {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.legal-link {
    color: var(--gray-400);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: var(--transition);
}

.legal-link:hover {
    color: var(--purple-light);
    text-decoration: underline;
}

/* ===== 法的ページスタイル ===== */
.legal-content {
    padding: var(--space-6) 0;
}

.legal-section {
    margin-bottom: var(--space-8);
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.legal-section-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--gray-200);
}

.legal-section-content {
    color: var(--text-secondary);
    line-height: 1.8;
}

.legal-section-content h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--space-6) 0 var(--space-3) 0;
}

.legal-info-list {
    margin: var(--space-4) 0;
}

.legal-info-list dt {
    font-weight: 600;
    color: var(--text-primary);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.legal-info-list dd {
    margin-left: var(--space-6);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.legal-list {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0;
}

.legal-list li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    color: var(--text-secondary);
    line-height: 1.7;
}

.legal-list li::before {
    content: "•";
    position: absolute;
    left: var(--space-2);
    color: var(--purple-primary);
    font-weight: bold;
}

.legal-list li strong {
    color: var(--text-primary);
    font-weight: 600;
}

.legal-notice {
    background: linear-gradient(135deg, var(--purple-50), var(--purple-100));
    border: 2px solid var(--purple-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.legal-notice h2 {
    color: var(--purple-primary);
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.legal-notice p {
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.legal-info-box {
    background: var(--gray-50);
    border-left: 4px solid var(--purple-primary);
    padding: var(--space-4);
    margin: var(--space-4) 0;
    border-radius: var(--radius);
}

.legal-warning {
    background: #FEF2F2;
    border: 2px solid #EF4444;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: var(--space-4) 0;
}

.legal-warning p,
.legal-warning h3 {
    color: #991B1B;
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.legal-warning .legal-list li {
    color: #7F1D1D;
}

.footer-copyright-modern {
    text-align: center;
}

.copyright-text {
    color: var(--gray-300);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-1) 0;
}

.copyright-note {
    color: var(--gray-500);
    font-size: var(--text-xs);
    margin: 0;
}

.footer-secure {
    display: flex;
    gap: var(--space-3);
}

.secure-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--gray-400);
    font-size: var(--text-xs);
}

/* ボトムナビゲーション（モバイル） */
.bottom-navigation {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--border-light);
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.bottom-nav-container {
    display: flex;
    justify-content: space-around;
    padding: var(--space-2) 0;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-muted);
    text-decoration: none;
    padding: var(--space-2);
    border-radius: var(--radius);
    transition: var(--transition);
    min-width: 60px;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
    color: var(--purple-primary);
    background: var(--bg-secondary);
    text-decoration: none;
}

.bottom-nav-icon {
    font-size: var(--text-lg);
}

.bottom-nav-label {
    font-size: var(--text-xs);
    font-weight: 500;
}

/* モバイル固定CTA */
.mobile-fixed-cta {
    display: none;
    position: fixed;
    bottom: 80px;
    left: var(--space-3);
    right: var(--space-3);
    z-index: 999;
}

/* 閉じるボタン */
.mobile-cta-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: var(--white);
    color: var(--text-primary);
    border: 2px solid var(--gray-300);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    z-index: 1;
}

.mobile-cta-close:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.mobile-cta-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--white);
}

.mobile-cta-text {
    display: flex;
    flex-direction: column;
}

.cta-title {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
}

.cta-subtitle {
    font-size: var(--text-xs);
    opacity: 0.9;
    line-height: 1.2;
}

.mobile-cta-btn {
    background: var(--white);
    color: var(--purple-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.mobile-cta-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--purple-dark);
}

/* フッターのモバイル対応 */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    .footer-main {
        padding: 3rem 0 2rem 0;
        background: 
            linear-gradient(135deg, rgba(10, 14, 26, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%),
            url('assets/img/sp_footer.png') center center;
        background-size: cover;
        background-attachment: scroll;
    }
    
    .footer-main::before {
        background: url('assets/img/sp_footer.png') center center;
        background-size: cover;
        background-attachment: scroll;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }
    
    .footer-section:first-child {
        text-align: center;
    }
    
    .footer-features {
        justify-content: center;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }
    
    .legal-nav {
        justify-content: center;
    }
    
    .footer-secure {
        justify-content: center;
    }
    
    /* モバイルナビゲーション表示 */
    .bottom-navigation {
        display: block;
    }
    
    .mobile-fixed-cta {
        display: block;
    }
    
    /* フッターでボトムナビの余白確保 */
    body {
        padding-bottom: 80px;
    }
}

/* ===== モバイルメニュー ===== */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    gap: 4px;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 1px;
    transition: var(--transition);
}

/* モバイルメニュー表示 */
/* モバイルメニューオーバーレイ */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1099;
    opacity: 0;
    transition: opacity var(--transition);
}

.mobile-menu-overlay.active {
    display: block;
    opacity: 1;
}

/* モバイルメニュー本体 */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background: var(--white);
    z-index: 1100;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.mobile-menu.active {
    display: block;
    transform: translateX(0);
}

/* メニューヘッダー */
.mobile-menu-header {
    position: sticky;
    top: 0;
    background: var(--white);
    padding: var(--space-4);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.mobile-menu-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-menu-close {
    background: var(--gray-100);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.mobile-menu-close:hover {
    background: var(--gray-200);
    color: var(--text-primary);
}

.mobile-menu-content {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius);
    transition: var(--transition);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-2);
}

.mobile-nav-item:hover {
    background: var(--gray-50);
    color: var(--purple-primary);
    text-decoration: none;
}

.mobile-actions {
    margin-top: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mobile-register-btn,
.mobile-dashboard-btn {
    background: var(--purple-primary);
    color: var(--white);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    transition: var(--transition);
}

.mobile-register-btn:hover,
.mobile-dashboard-btn:hover {
    background: var(--purple-dark);
    color: var(--white);
    text-decoration: none;
    transform: translateY(-1px);
}

/* モバイルメニューの新しいスタイル */
.mobile-user-section,
.mobile-login-section {
    background: var(--gray-50);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.mobile-user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.mobile-user-info .user-icon {
    font-size: 2rem;
}

.mobile-user-info .user-details {
    flex: 1;
}

.mobile-user-info .user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--text-lg);
}

.mobile-user-info .user-mbti {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.mobile-menu-section {
    margin-bottom: var(--space-6);
}

.mobile-menu-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--gray-200);
}

.mobile-dashboard-btn,
.mobile-register-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--purple-primary);
    color: var(--white);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.mobile-dashboard-btn:hover,
.mobile-register-btn:hover {
    background: var(--purple-dark);
    transform: translateY(-1px);
}

.mobile-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: transparent;
    color: var(--purple-primary);
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--purple-primary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.mobile-login-btn:hover {
    background: var(--purple-primary);
    color: var(--white);
}

.mobile-logout-section {
    margin-top: auto;
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-200);
}

.mobile-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: transparent;
    color: var(--text-secondary);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    transition: var(--transition);
}

.mobile-login-btn:hover,
.mobile-logout-btn:hover {
    background: var(--bg-secondary);
    color: var(--purple-primary);
    border-color: var(--purple-primary);
    text-decoration: none;
}

@media (max-width: 768px) {
    .main-nav,
    .main-nav-modern,
    .main-nav-16p {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .header-actions,
    .header-actions-16p {
        display: none;
    }
    
    /* 分割ボタンもモバイルでは非表示 */
    .header-auth-buttons {
        display: none;
    }
}

/* ===== 状態表示 ===== */
.alert {
    padding: var(--space-4);
    border-radius: var(--radius);
    margin: var(--space-4) 0;
    border-left: 4px solid;
}

.alert-success {
    background: #F0FDF4;
    color: var(--success);
    border-color: var(--success);
}

.alert-warning {
    background: #FFFBEB;
    color: var(--warning);
    border-color: var(--warning);
}

.alert-error {
    background: #FEF2F2;
    color: var(--error);
    border-color: var(--error);
}

.alert-info {
    background: #F0F9FF;
    color: var(--info);
    border-color: var(--info);
}

/* ===== ページテンプレート（page.php） ===== */
.main-content {
    padding: var(--space-8) 0;
    min-height: 60vh;
}

/* ページヘッダー */
.page-header {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-light);
}

.page-header-content {
    max-width: 800px;
}

/* パンくずナビ */
.breadcrumb {
    margin-bottom: var(--space-4);
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.breadcrumb-item {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
}

.breadcrumb-item:hover {
    color: var(--purple-primary);
}

.breadcrumb-item.current {
    color: var(--text-primary);
    font-weight: 500;
}

.breadcrumb-separator {
    color: var(--text-muted);
}

/* ページタイトル */
.page-title {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: var(--space-4);
}

/* ページメタ */
.page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.page-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.meta-icon {
    font-size: var(--text-base);
}

.edit-link {
    color: var(--purple-primary);
    text-decoration: none;
    transition: var(--transition);
}

.edit-link:hover {
    text-decoration: underline;
}

/* ページレイアウト */
.page-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    max-width: 800px; /* 1カラム時のみ */
}

/* 2カラム時はPC固定幅 */
.page-layout.two-column {
    max-width: 1200px;
    width: 100%;
}

/* ページコンテンツ */
.page-content {
    background: var(--white);
}

.page-content-wrapper {
    padding: 0;
}

/* アイキャッチ画像 */
.page-featured-image {
    margin-bottom: var(--space-6);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.featured-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ページテキスト */
.page-text {
    color: var(--text-secondary);
    line-height: 1.7;
}

.page-text h2,
.page-text h3,
.page-text h4,
.page-text h5,
.page-text h6 {
    color: var(--text-primary);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
}

.page-text h2 {
    font-size: var(--text-2xl);
    font-weight: 600;
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--border-light);
}

.page-text h3 {
    font-size: var(--text-xl);
    font-weight: 600;
}

.page-text h4 {
    font-size: var(--text-lg);
    font-weight: 600;
}

.page-text p {
    margin-bottom: var(--space-4);
}

.page-text ul,
.page-text ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
}

.page-text li {
    margin-bottom: var(--space-2);
}

.page-text blockquote {
    margin: var(--space-6) 0;
    padding: var(--space-4);
    border-left: 4px solid var(--purple-primary);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    font-style: italic;
}

.page-text code {
    background: var(--bg-muted);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.page-text pre {
    background: var(--gray-900);
    color: var(--white);
    padding: var(--space-4);
    border-radius: var(--radius);
    overflow-x: auto;
    margin: var(--space-4) 0;
}

.page-text pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* ページネーション */
.page-pagination {
    margin-top: var(--space-6);
    text-align: center;
}

.page-number {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    margin: 0 var(--space-1);
    background: var(--purple-primary);
    color: var(--white);
    text-decoration: none;
    border-radius: var(--radius);
    transition: var(--transition);
}

.page-number:hover {
    background: var(--purple-dark);
    color: var(--white);
}

/* コンテンツなし */
.no-content {
    text-align: center;
    padding: var(--space-16) var(--space-4);
}

.no-content-icon {
    font-size: 4rem;
    margin-bottom: var(--space-4);
}

.no-content-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.no-content-text {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.no-content-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .page-title {
        font-size: var(--text-3xl);
    }
    
    .page-meta {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .breadcrumb-list {
        font-size: var(--text-xs);
    }
    
    .no-content-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* ===== ユーティリティ ===== */
.text-center { text-align: center !important; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.hidden { display: none; }
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }

.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* ===== レース一覧専用スタイル（3カラム対応） ===== */
.race-venues-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.venue-column {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.venue-column:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.venue-header {
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
    padding: var(--space-4);
    text-align: center;
}

.venue-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--white);
    margin: 0;
}

.venue-races {
    padding: var(--space-4);
    max-height: 600px;
    overflow-y: auto;
}

.race-card-compact {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    transition: var(--transition);
}

.race-card-compact:hover {
    background: var(--white);
    border-color: var(--purple-primary);
    transform: translateX(5px);
}

.race-card-compact:last-child {
    margin-bottom: 0;
}

.race-title {
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
}

.race-title a {
    color: var(--text-primary);
    text-decoration: none;
    display: block;
    line-height: 1.4;
}

.race-title a:hover {
    color: var(--purple-primary);
}

.race-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.race-time,
.race-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
    display: block;
}

.race-time {
    color: var(--purple-primary);
    font-weight: 500;
}

.race-actions {
    text-align: center;
}

.btn-race-view {
    display: inline-block;
    background: var(--purple-primary);
    color: var(--white);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    width: 100%;
    text-align: center;
}

.btn-race-view:hover {
    background: var(--purple-dark);
    color: var(--white);
    text-decoration: none;
    transform: translateY(-1px);
}

.race-count-summary {
    background: var(--bg-secondary) !important;
    color: var(--text-primary);
    font-size: var(--text-sm);
    margin-top: var(--space-6);
    grid-column: 1 / -1;
}

/* カスタムスクロールバー */
.venue-races::-webkit-scrollbar {
    width: 6px;
}

.venue-races::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.venue-races::-webkit-scrollbar-thumb {
    background: var(--purple-primary);
    border-radius: 3px;
}

.venue-races::-webkit-scrollbar-thumb:hover {
    background: var(--purple-dark);
}

/* タブレット対応 */
@media (max-width: 1024px) {
    .race-venues-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

/* モバイル対応 */
@media (max-width: 768px) {
    .race-venues-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .venue-header {
        padding: var(--space-3);
    }
    
    .venue-title {
        font-size: var(--text-lg);
    }
    
    .venue-races {
        max-height: none;
        overflow-y: visible;
    }
    
    .race-card-compact:hover {
        transform: none;
    }
}

/* ========================================
   アーカイブページ（archive.php）
   ======================================== */

/* アーカイブヘッダー */
.archive-header {
    background: var(--bg-secondary);
    padding: var(--space-8) 0 var(--space-6);
    margin-bottom: var(--space-8);
}

.archive-header-content {
    max-width: 800px;
    margin: 0 auto;
}

.archive-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: var(--space-4) 0 var(--space-3);
    line-height: 1.2;
}

.archive-description {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.archive-description p {
    margin: 0;
}

.archive-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.archive-count {
    background: var(--white);
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* アーカイブレイアウト */
.archive-layout {
    max-width: 1200px;
    margin: 0 auto;
}

.archive-posts {
    margin-bottom: var(--space-12);
}

/* 記事グリッド */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
}

/* 記事カード */
.post-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    border-color: var(--purple-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(103, 98, 166, 0.1);
}

.post-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
}

.post-type-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    color: var(--white);
}

.post-type-badge.prediction {
    background: var(--purple-primary);
}

.post-type-badge.result {
    background: var(--info);
}

.post-type-badge.blog {
    background: var(--gray-600);
}

.post-date {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
}

.post-card-image {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.post-card-image a {
    display: block;
    height: 100%;
}

.card-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.post-card:hover .card-thumbnail {
    transform: scale(1.05);
}

.post-card-content {
    padding: var(--space-4);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.post-card-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.4;
}

.post-card-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.post-card-title a:hover {
    color: var(--purple-primary);
}

.post-card-excerpt {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-4);
    flex-grow: 1;
}

.post-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
}

.meta-icon {
    font-size: 0.875rem;
}

.meta-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
}

.meta-link:hover {
    color: var(--purple-primary);
}

.meta-text {
    color: var(--text-muted);
}

.meta-text.confidence-high {
    color: var(--success);
    font-weight: 600;
}

.meta-text.confidence-medium {
    color: var(--warning);
    font-weight: 600;
}

.meta-text.confidence-low {
    color: var(--error);
    font-weight: 600;
}

.post-card-footer {
    padding: 0 var(--space-4) var(--space-4);
    margin-top: auto;
}

.read-more-link {
    color: var(--purple-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.read-more-link:hover {
    color: var(--purple-dark);
}

/* ページネーション */
.archive-pagination {
    margin-top: var(--space-8);
    display: flex;
    justify-content: center;
}

.pagination-wrapper {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
}

.pagination-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-1);
}

.pagination-item {
    margin: 0;
}

.pagination-item a,
.pagination-item span {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: var(--transition);
}

.pagination-item a {
    color: var(--text-secondary);
    background: transparent;
}

.pagination-item a:hover {
    color: var(--purple-primary);
    background: var(--bg-secondary);
}

.pagination-item .current {
    color: var(--white);
    background: var(--purple-primary);
}

/* ========================================
   404エラーページ（404.php）
   ======================================== */

/* エラーヘッダー */
.error-header {
    padding: var(--space-6) 0;
    background: var(--bg-secondary);
}

.error-header-content {
    max-width: 800px;
    margin: 0 auto;
}

/* エラーレイアウト */
.error-layout {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

.error-content {
    text-align: center;
}

/* 404アイコン */
.error-icon {
    margin-bottom: var(--space-8);
    position: relative;
}

.error-number {
    font-size: 8rem;
    font-weight: 800;
    color: var(--gray-200);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.error-emoji {
    font-size: 4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* エラーメッセージ */
.error-message {
    margin-bottom: var(--space-8);
}

.error-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.error-description {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* アクションボタン */
.error-actions {
    margin-bottom: var(--space-12);
}

.action-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* 検索フォーム */
.error-search {
    margin-bottom: var(--space-12);
    text-align: center;
}

.search-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.search-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.search-form-wrapper {
    max-width: 400px;
    margin: 0 auto;
}

/* 人気コンテンツ */
.error-popular {
    margin-bottom: var(--space-12);
}

.popular-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-6);
    text-align: center;
}

.popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
}

.popular-item {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: left;
    transition: var(--transition);
}

.popular-item:hover {
    border-color: var(--purple-primary);
    transform: translateY(-2px);
}

.popular-icon {
    font-size: 2rem;
    margin-bottom: var(--space-3);
}

.popular-link-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
}

.popular-link-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.popular-link-title a:hover {
    color: var(--purple-primary);
}

.popular-link-desc {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0;
}

/* 最新記事 */
.error-recent {
    margin-bottom: var(--space-12);
}

.recent-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-6);
    text-align: center;
}

.recent-list {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition);
}

.recent-item:last-child {
    border-bottom: none;
}

.recent-item:hover {
    background: var(--bg-secondary);
}

.recent-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.recent-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.recent-type {
    font-size: var(--text-sm);
}

.recent-type.prediction {
    color: var(--purple-primary);
}

.recent-type.result {
    color: var(--info);
}

.recent-type.blog {
    color: var(--gray-600);
}

.recent-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 500;
}

.recent-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.recent-title a:hover {
    color: var(--purple-primary);
}

/* ヘルプセクション */
.error-help {
    margin-bottom: var(--space-8);
}

.help-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
}

.help-title {
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    font-size: var(--text-lg);
    font-weight: 600;
}

.help-text {
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.6;
}

/* =================================================================
   htmlfiles 内のコンテンツ用スタイル
   ================================================================= */

/* About ページ用スタイル */
.about-mission-card {
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
    color: var(--white);
    text-align: center;
    padding: 4rem;
    margin-bottom: 3rem;
}

.about-mission-title {
    color: var(--white);
    font-size: 2rem;
    margin-bottom: 2rem;
}

.about-mission-text {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    color: rgba(255, 255, 255, 0.95);
}

.about-mission-highlight {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 12px;
}

.about-mission-highlight-text {
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0;
}

.about-comparison-grid {
    gap: 3rem;
}

.about-old-industry {
    border-left: 4px solid var(--error);
}

.about-old-title {
    color: var(--error);
    margin-bottom: 1rem;
}

.about-old-list {
    color: var(--text-secondary);
    line-height: 1.8;
}

.about-new-industry {
    border-left: 4px solid var(--success);
}

.about-new-title {
    color: var(--success);
    margin-bottom: 1rem;
}

.about-new-list {
    color: var(--text-secondary);
    line-height: 1.8;
}

.about-tech-card {
    margin-bottom: 3rem;
    padding: 3rem;
}

.about-tech-grid {
    align-items: center;
    gap: 3rem;
}

.about-tech-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.about-tech-title {
    color: var(--purple-primary);
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.about-tech-text {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.about-tech-list {
    color: var(--text-secondary);
    line-height: 1.8;
}

.about-tech-highlight {
    text-align: center;
}

.about-tech-box {
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
    padding: 2rem;
    border-radius: 12px;
    color: var(--white);
}

.about-tech-box-title {
    color: var(--white);
    margin-bottom: 1rem;
}

.about-tech-grid-16 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    font-size: 0.75rem;
}

.about-tech-secondary {
    background: var(--bg-secondary);
}

.about-tech-transparent-box {
    background: linear-gradient(135deg, var(--info), #0284C7);
    padding: 2rem;
    border-radius: 12px;
    color: var(--white);
}

.about-tech-transparent-title {
    color: var(--white);
    margin-bottom: 1rem;
}

.about-tech-transparent-text {
    margin: 0;
    opacity: 0.9;
    font-size: 0.875rem;
}

.about-tech-savings-box {
    background: linear-gradient(135deg, var(--success), #059669);
    padding: 2rem;
    border-radius: 12px;
    color: var(--white);
}

.about-tech-savings-title {
    color: var(--white);
    margin-bottom: 1rem;
}

.about-tech-savings-amount {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.about-tech-savings-text {
    margin: 0;
    opacity: 0.9;
    font-size: 0.875rem;
}

.about-story-card {
    padding: 3rem;
}

.about-story-center {
    margin-bottom: 3rem;
}

.about-story-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.about-story-title {
    color: var(--text-primary);
    font-size: 1.75rem;
}

.about-story-quote {
    max-width: 800px;
    margin: 0 auto;
}

.about-story-blockquote {
    border-left: 4px solid var(--purple-primary);
    padding-left: 2rem;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.about-story-author {
    text-align: right;
    color: var(--text-muted);
}

.about-info-table {
    width: 100%;
    line-height: 1.8;
}

.about-info-table td {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
}

.about-info-table-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.about-info-table-value {
    color: var(--text-primary);
}

.about-info-table-success {
    color: var(--success);
    font-weight: 600;
}

.about-info-table-info {
    color: var(--info);
    font-weight: 600;
}

.about-flow-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-flow-step {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.about-flow-number {
    background: var(--purple-primary);
    color: var(--white);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.about-flow-text {
    color: var(--text-secondary);
}

.about-faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.about-faq-item {
    margin-bottom: 1.5rem;
}

.about-faq-question {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.about-faq-answer {
    color: var(--text-secondary);
    line-height: 1.6;
}

.about-cta-container {
    max-width: 600px;
    margin: 0 auto;
}

.about-cta-title {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.about-cta-text {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.about-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Why 性格タイプ ページ用スタイル */
.why-mbti-problems-grid {
    margin-bottom: 3rem;
}

.why-mbti-problems-error {
    border-left: 4px solid var(--error);
}

.why-mbti-problems-error-title {
    color: var(--error);
    margin-bottom: 1rem;
}

.why-mbti-problems-list {
    color: var(--text-secondary);
    line-height: 1.8;
}

.why-mbti-solutions-success {
    border-left: 4px solid var(--success);
}

.why-mbti-solutions-success-title {
    color: var(--success);
    margin-bottom: 1rem;
}

.why-mbti-importance-card {
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
    color: var(--white);
    text-align: center;
    padding: 3rem;
}

.why-mbti-importance-title {
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.why-mbti-importance-text {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.why-mbti-importance-highlight {
    background: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.why-mbti-importance-highlight-title {
    font-size: 1.25rem;
}

.why-mbti-importance-highlight-text {
    opacity: 0.9;
}

.why-mbti-importance-btn {
    background: var(--white);
    color: var(--purple-primary);
}

.why-mbti-types-intro {
    margin-bottom: 3rem;
    color: var(--text-secondary);
    font-size: 1.125rem;
}

.why-mbti-types-grid {
    gap: 2rem;
}

.why-mbti-card {
    padding: 2rem;
}

.why-mbti-card.analyst .mbti-analyst {
    color: var(--analysts);
}

.why-mbti-card.diplomat .mbti-diplomat {
    color: var(--diplomats);
}

.why-mbti-card.sentinel .mbti-sentinel {
    color: var(--sentinels);
}

.why-mbti-card.explorer .mbti-explorer {
    color: var(--explorers);
}

.why-mbti-icon {
    font-size: 3rem;
    display: block;
}

.why-mbti-card-title {
    text-align: center;
}

.why-mbti-card-description {
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 1.5rem;
}

.why-mbti-style-box {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.why-mbti-style-title {
    margin-top: 0.5rem;
    color: var(--text-secondary);
}

.why-mbti-type-label {
    font-weight: 600;
}

.why-mbti-advantage-grid {
    margin-bottom: 3rem;
}

.why-mbti-advantage-card {
    border-top: 4px solid var(--purple-primary);
}

.why-mbti-advantage-title {
    color: var(--purple-primary);
    margin-bottom: 1rem;
}

.why-mbti-advantage-text {
    color: var(--text-secondary);
    line-height: 1.6;
}

.why-mbti-advantage-system {
    border-top: 4px solid var(--success);
}

.why-mbti-advantage-system-title {
    color: var(--success);
    margin-bottom: 1rem;
}

.why-mbti-advantage-model {
    border-top: 4px solid var(--warning);
}

.why-mbti-advantage-model-title {
    color: var(--warning);
    margin-bottom: 1rem;
}

.why-mbti-innovation-card {
    background: linear-gradient(135deg, #1E293B, #334155);
    color: var(--white);
    text-align: center;
    padding: 3rem;
}

.why-mbti-innovation-title {
    color: var(--white);
    font-size: 1.75rem;
    margin-bottom: 2rem;
}

.why-mbti-innovation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.why-mbti-innovation-item-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.why-mbti-innovation-item-text {
    opacity: 0.8;
}

.why-mbti-innovation-btn {
    background: var(--white);
    color: var(--gray-800);
    font-weight: 600;
}

.why-mbti-final-container {
    max-width: 600px;
    margin: 0 auto;
}

.why-mbti-final-title {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.why-mbti-final-text {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.why-mbti-final-benefits {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto 2rem;
}

.why-mbti-final-benefit {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.why-mbti-final-benefit-check {
    color: var(--success);
    font-weight: 600;
}

.why-mbti-final-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Results ページ用スタイル */
.results-problems-grid {
    margin-bottom: 3rem;
}

.results-problems-error {
    border-left: 4px solid var(--error);
}

.results-problems-error-title {
    color: var(--error);
    margin-bottom: 1rem;
}

.results-problems-list {
    color: var(--text-secondary);
    line-height: 1.8;
}

.results-solutions-success {
    border-left: 4px solid var(--success);
}

.results-solutions-success-title {
    color: var(--success);
    margin-bottom: 1rem;
}

.results-transparency-card {
    background: linear-gradient(135deg, var(--info), #0284C7);
    color: var(--white);
    text-align: center;
    padding: 3rem;
}

.results-transparency-title {
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.results-transparency-text {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.results-transparency-highlight {
    background: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 12px;
}

.results-transparency-highlight-title {
    font-size: 1.25rem;
}

.results-transparency-highlight-text {
    opacity: 0.9;
}

.results-intro-text {
    margin-bottom: 3rem;
    color: var(--text-secondary);
}

.results-schedule-card {
    background: var(--bg-secondary);
    margin-top: 3rem;
}

.results-schedule-title {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.results-schedule-day-title {
    color: var(--purple-primary);
}

.results-schedule-day-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.results-metrics-grid {
    margin-bottom: 3rem;
}

.results-metric-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.results-metric-title {
    /* card-title クラスで定義済み */
}

.results-metric-description {
    /* card-description クラスで定義済み */
}

.results-warning-card {
    border-left: 4px solid var(--warning);
}

.results-warning-title {
    color: var(--warning);
    margin-bottom: 1rem;
}

.results-warning-text {
    color: var(--text-secondary);
    line-height: 1.6;
}

.results-history-intro {
    margin-bottom: 3rem;
    color: var(--text-secondary);
}

.results-history-table {
    width: 100%;
    border-collapse: collapse;
}

.results-history-table thead tr {
    background: var(--bg-secondary);
}

.results-history-table th,
.results-history-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.results-history-table th {
    text-align: left;
}

.results-history-table th:not(:first-child),
.results-history-table td:not(:first-child) {
    text-align: center;
}

.results-history-success {
    color: var(--success);
    font-weight: 600;
}

.results-history-warning {
    color: var(--warning);
    font-weight: 600;
}

.results-history-alt {
    background: var(--bg-secondary);
}

.results-history-note {
    margin-top: 2rem;
}

.results-history-note-text {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.results-cta-container {
    max-width: 600px;
    margin: 0 auto;
}

.results-cta-title {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.results-cta-text {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.results-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Predictions ページ用スタイル */
.predictions-filter-card {
    padding: 2rem;
}

.predictions-filter-grid {
    gap: 2rem;
}

.predictions-filter-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.predictions-filter-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius);
    font-size: var(--text-sm);
}

.predictions-filter-buttons {
    text-align: center;
    margin-top: 2rem;
}

.predictions-intro-text {
    margin-bottom: 3rem;
    color: var(--text-secondary);
}

.predictions-stats-card {
    margin-top: 3rem;
    background: var(--bg-secondary);
}

.predictions-stats-title {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.predictions-stats-grid {
    /* grid-4 クラスで定義済み */
}

.predictions-stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.predictions-stat-value.purple {
    color: var(--purple-primary);
}

.predictions-stat-value.success {
    color: var(--success);
}

.predictions-stat-value.info {
    color: var(--info);
}

.predictions-stat-value.warning {
    color: var(--warning);
}

.predictions-stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.predictions-archive-intro {
    margin-bottom: 3rem;
    color: var(--text-secondary);
}

.predictions-archive-grid {
    gap: 2rem;
    margin-bottom: 3rem;
}

.predictions-archive-item-title {
    color: var(--purple-primary);
    margin-bottom: 1rem;
}

.predictions-archive-item-stats {
    margin-bottom: 1.5rem;
}

.predictions-archive-stat {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.predictions-archive-stat-label {
    color: var(--text-secondary);
}

.predictions-archive-stat-value {
    font-weight: 600;
}

.predictions-archive-stat-value.primary {
    color: var(--text-primary);
}

.predictions-archive-stat-value.success {
    color: var(--success);
}

.predictions-archive-stat-value.purple {
    color: var(--purple-primary);
}

.predictions-archive-item-button {
    text-align: center;
}

.predictions-archive-item-btn {
    width: 100%;
}

.predictions-archive-monthly-title {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.predictions-archive-monthly-grid {
    gap: 1rem;
}

.predictions-archive-monthly-item {
    display: block;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    text-decoration: none;
    text-align: center;
    transition: var(--transition);
}

.predictions-archive-monthly-item:hover {
    background: var(--border-light);
}

.predictions-archive-monthly-title-text {
    color: var(--purple-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.predictions-archive-monthly-count {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.predictions-mbti-card {
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
    color: var(--white);
    text-align: center;
    padding: 3rem;
    margin-bottom: 3rem;
}

.predictions-mbti-title {
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.predictions-mbti-text {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.predictions-mbti-highlight {
    background: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 12px;
}

.predictions-mbti-highlight-title {
    font-size: 1.25rem;
}

.predictions-mbti-highlight-text {
    opacity: 0.9;
}

.predictions-cta-container {
    max-width: 600px;
    margin: 0 auto;
}

.predictions-cta-title {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.predictions-cta-text {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.predictions-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* 性格タイプ ページ用スタイル */
.mbti-intro-card {
    margin-bottom: 3rem;
}

.mbti-intro-grid {
    /* grid-2 クラスで定義済み */
}

.mbti-intro-title {
    color: var(--purple-primary);
    margin-bottom: 1rem;
}

.mbti-intro-text {
    color: var(--text-secondary);
    line-height: 1.6;
}

.mbti-intro-list {
    color: var(--text-secondary);
    line-height: 1.8;
}

.mbti-intro-highlight {
    text-align: center;
}

.mbti-intro-icon {
    font-size: 6rem;
    margin-bottom: 1rem;
}

.mbti-intro-highlight-title {
    color: var(--text-primary);
    font-weight: 600;
}

.mbti-intro-highlight-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.mbti-indicators-title {
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.mbti-indicators-grid {
    gap: 2rem;
}

.mbti-indicator-card {
    padding: 2rem;
}

.mbti-indicator-e-title {
    color: var(--purple-primary);
    margin-bottom: 1rem;
}

.mbti-indicator-s-title {
    color: var(--success);
    margin-bottom: 1rem;
}

.mbti-indicator-t-title {
    color: var(--info);
    margin-bottom: 1rem;
}

.mbti-indicator-j-title {
    color: var(--warning);
    margin-bottom: 1rem;
}

.mbti-indicator-text {
    color: var(--text-secondary);
    line-height: 1.6;
}

.mbti-usage-card {
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
    color: var(--white);
    text-align: center;
    padding: 3rem;
    margin-bottom: 3rem;
}

.mbti-usage-title {
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.mbti-usage-text {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.mbti-examples-grid {
    gap: 2rem;
}

.mbti-example-t {
    border-top: 4px solid var(--analysts);
}

.mbti-example-t-title {
    color: var(--analysts);
    margin-bottom: 1rem;
}

.mbti-example-f {
    border-top: 4px solid var(--diplomats);
}

.mbti-example-f-title {
    color: var(--diplomats);
    margin-bottom: 1rem;
}

.mbti-example-box {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 8px;
}

.mbti-example-text {
    color: var(--text-secondary);
    line-height: 1.6;
}

.mbti-importance-card {
    margin-top: 3rem;
}

.mbti-importance-content {
    background: var(--bg-secondary);
    padding: 2rem;
}

.mbti-importance-title {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.mbti-importance-text {
    color: var(--text-secondary);
    line-height: 1.6;
}

.mbti-steps-intro {
    margin-bottom: 3rem;
    color: var(--text-secondary);
}

.mbti-steps-grid {
    margin-bottom: 3rem;
}

.mbti-step-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.mbti-step-title {
    /* card-title クラスで定義済み */
}

.mbti-step-description {
    /* card-description クラスで定義済み */
}

.mbti-external-card {
    text-align: center;
    padding: 3rem;
}

.mbti-external-title {
    color: var(--text-primary);
    margin-bottom: 2rem;
}

.mbti-external-text {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.mbti-external-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.mbti-external-note {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.mbti-form-intro {
    margin-bottom: 3rem;
    color: var(--text-secondary);
}

.mbti-form-card {
    max-width: 600px;
    margin: 0 auto;
}

.mbti-form {
    padding: 2rem;
}

.mbti-form-group {
    margin-bottom: 2rem;
}

.mbti-form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mbti-form-select {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius);
    font-size: var(--text-base);
}

.mbti-form-checkbox-group {
    margin-bottom: 2rem;
}

.mbti-form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mbti-form-checkbox-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.mbti-form-checkbox-link {
    color: var(--purple-primary);
}

.mbti-form-submit-container {
    text-align: center;
}

.mbti-form-submit {
    width: 100%;
}

.mbti-after-card {
    margin-top: 3rem;
    background: var(--bg-secondary);
}

.mbti-after-title {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.mbti-after-grid {
    /* grid-2 クラスで定義済み */
}

.mbti-after-feature-title {
    color: var(--purple-primary);
}

.mbti-after-feature-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.mbti-final-cta-container {
    max-width: 600px;
    margin: 0 auto;
}

.mbti-final-cta-title {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.mbti-final-cta-text {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.mbti-final-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.help-list {
    color: var(--text-secondary);
    margin: var(--space-3) 0;
    padding-left: var(--space-5);
    line-height: 1.6;
}

.help-suggestion {
    color: var(--text-secondary);
    margin: var(--space-3) 0 0;
    line-height: 1.6;
}

/* モバイル対応 */
@media (max-width: 768px) {
    /* アーカイブページ */
    .archive-header {
        padding: var(--space-6) 0 var(--space-4);
        margin-bottom: var(--space-6);
    }
    
    .archive-title {
        font-size: 1.875rem;
        margin: var(--space-3) 0 var(--space-2);
    }
    
    .posts-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .post-card:hover {
        transform: none;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .popular-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    /* 404ページ */
    .error-number {
        font-size: 6rem;
    }
    
    .error-emoji {
        font-size: 3rem;
    }
    
    .error-title {
        font-size: 1.875rem;
    }
    
    .error-description {
        font-size: var(--text-base);
    }
    
    .recent-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .recent-meta {
        align-self: flex-end;
    }
}

/* ========================================
   記事詳細ページ（single.php）
   ======================================== */

/* 記事ヘッダー */
.article-header {
    background: var(--bg-secondary);
    padding: var(--space-6) 0;
    margin-bottom: var(--space-8);
}

/* 記事メタ情報 */
.article-meta {
    margin-bottom: var(--space-4);
}

.meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.meta-icon {
    font-size: 1rem;
}

.post-type-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--white);
}

.post-type-badge.prediction {
    background: var(--purple-primary);
}

.post-type-badge.result {
    background: var(--info);
}

.post-type-badge.blog {
    background: var(--gray-600);
}

.category-badge {
    display: inline-block;
}

.category-badge a {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: var(--white);
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}

.category-badge a:hover {
    background: var(--purple-primary);
    color: var(--white);
    border-color: var(--purple-primary);
}

.edit-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}

.edit-link:hover {
    color: var(--purple-primary);
}

/* 記事タイトル */
.article-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin: var(--space-4) 0;
}

/* 記事概要 */
.article-excerpt {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: var(--white);
    border-left: 3px solid var(--purple-primary);
    border-radius: var(--radius);
}

/* アイキャッチ画像 */
.article-featured-image {
    margin-bottom: var(--space-6);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.featured-image {
    width: 100%;
    height: auto;
    display: block;
}

.image-caption {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

/* ========================================
   2カラムレイアウト
   ======================================== */

/* 2カラムレイアウト */
.article-layout.two-column {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
    max-width: 1200px;
    margin: 0 auto;
}

.main-column {
    min-width: 0; /* グリッドオーバーフロー防止 */
}

/* ========================================
   記事本文スタイル
   ======================================== */

/* 記事テキストエリア */
.article-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-primary);
}

/* 見出し */
.article-text h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 3rem 0 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--purple-primary);
}

.article-text h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 2.5rem 0 1.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--border-medium);
}

.article-text h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 2rem 0 1rem;
    padding-left: 0.75rem;
    border-left: 4px solid var(--purple-primary);
}

.article-text h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 0.75rem;
}

.article-text h5,
.article-text h6 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 1.25rem 0 0.5rem;
}

/* 段落 */
.article-text p {
    margin: 0 0 1.5rem;
    line-height: 1.8;
}

/* リスト */
.article-text ul,
.article-text ol {
    margin: 0 0 1.5rem;
    padding-left: 2rem;
    line-height: 1.8;
}

/* 削除済み - 記事詳細ページ専用設定に統合 */

.article-text ul ul,
.article-text ol ol,
.article-text ul ol,
.article-text ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* テーブル */
.article-text table {
    width: 100%;
    margin: 0 0 2rem;
    border-collapse: collapse;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.article-text th,
.article-text td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid var(--border-light);
}

.article-text th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.article-text tr:nth-child(even) td {
    background: var(--bg-muted);
}

.article-text tr:hover td {
    background: var(--bg-secondary);
}

/* 引用 */
.article-text blockquote {
    margin: 0 0 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-left: 4px solid var(--purple-primary);
    color: var(--text-secondary);
    font-style: italic;
}

.article-text blockquote p:last-child {
    margin-bottom: 0;
}

/* コード */
.article-text code {
    background: var(--bg-secondary);
    color: var(--purple-primary);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.875em;
}

.article-text pre {
    margin: 0 0 1.5rem;
    padding: 1rem;
    background: var(--gray-900);
    color: var(--gray-100);
    border-radius: var(--radius);
    overflow-x: auto;
}

.article-text pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* リンク */
.article-text a {
    color: var(--purple-primary);
    text-decoration: underline;
    transition: var(--transition);
}

.article-text a:hover {
    color: var(--purple-dark);
    text-decoration: none;
}

/* 画像 */
.article-text img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    border-radius: var(--radius);
}

.article-text figure {
    margin: 2rem 0;
    text-align: center;
}

.article-text figcaption {
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* 水平線 */
.article-text hr {
    margin: 2rem 0;
    border: none;
    border-top: 2px solid var(--border-light);
}

/* 強調 */
.article-text strong,
.article-text b {
    font-weight: 700;
    color: var(--text-primary);
}

.article-text em,
.article-text i {
    font-style: italic;
}

.article-text mark {
    background: #ffeb3b;
    padding: 0.125rem 0.25rem;
    border-radius: 2px;
}

/* WordPressのアライメントクラス */
.article-text .alignleft {
    float: left;
    margin: 0.5rem 1.5rem 1rem 0;
}

.article-text .alignright {
    float: right;
    margin: 0.5rem 0 1rem 1.5rem;
}

.article-text .aligncenter {
    display: block;
    margin: 1.5rem auto;
    text-align: center;
}

.article-text .alignnone {
    margin: 1.5rem 0;
}

/* WordPressのキャプション */
.article-text .wp-caption {
    max-width: 100%;
    margin: 1.5rem 0;
}

.article-text .wp-caption img {
    margin: 0;
}

.article-text .wp-caption-text {
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
}

/* WordPressギャラリー */
.article-text .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.article-text .gallery-item {
    text-align: center;
}

.article-text .gallery img {
    margin: 0;
    width: 100%;
    height: auto;
}

/* 広告スタイル */
.content-ad-wrapper {
    margin: var(--space-6) 0;
    text-align: center;
}

.content-ad {
    background: var(--bg-secondary);
    padding: var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
}

.article-bottom-ad {
    margin: var(--space-8) 0 var(--space-6);
    text-align: center;
}

.bottom-ad {
    background: var(--bg-secondary);
    padding: var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
}

/* 予想記事詳細 */
.prediction-details {
    background: var(--bg-secondary);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin: var(--space-8) 0;
}

/* 中サイズセクションタイトル（廃止予定 - .section-title--medium を使用） */
.section-title--medium {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    text-align: center;
}

.prediction-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.prediction-meta-item {
    background: var(--white);
    padding: var(--space-3);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
}

.meta-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.meta-value {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.confidence-high {
    color: var(--success);
}

.confidence-medium {
    color: var(--warning);
}

.confidence-low {
    color: var(--error);
}

/* タグ */
.article-tags {
    margin: var(--space-8) 0;
}

.tags-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tag-item {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: var(--transition);
}

.tag-item:hover {
    background: var(--purple-primary);
    color: var(--white);
    border-color: var(--purple-primary);
}

/* シェアボタン */
.article-share {
    background: var(--bg-secondary);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin: var(--space-8) 0;
    text-align: center;
}

.share-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background: var(--white);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.share-btn.twitter:hover {
    background: #1DA1F2;
    color: var(--white);
    border-color: #1DA1F2;
}

.share-btn.facebook:hover {
    background: #1877F2;
    color: var(--white);
    border-color: #1877F2;
}

.share-btn.line:hover {
    background: #00B900;
    color: var(--white);
    border-color: #00B900;
}

.share-btn.copy:hover {
    background: var(--purple-primary);
    color: var(--white);
    border-color: var(--purple-primary);
}

/* 著者情報 */
.article-author {
    background: var(--white);
    border: 2px solid var(--purple-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-8) 0;
}

.author-info {
    display: flex;
    gap: var(--space-4);
}

.author-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--purple-primary);
}

.author-details {
    flex-grow: 1;
}

.author-name {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.author-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-3);
}

.author-link {
    display: inline-block;
    color: var(--purple-primary);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: var(--transition);
}

.author-link:hover {
    text-decoration: underline;
}

/* 前後記事ナビゲーション */
.article-navigation {
    background: var(--bg-secondary);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin: var(--space-8) 0;
}

.nav-links {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-4);
    align-items: center;
}

.nav-item {
    text-align: center;
}

.nav-previous {
    text-align: left;
}

.nav-next {
    text-align: right;
}

.nav-direction {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-1);
}

.nav-link {
    display: block;
    text-decoration: none;
    transition: var(--transition);
}

.nav-link:hover .nav-title {
    color: var(--purple-primary);
}

.nav-title {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: var(--space-1);
}

.nav-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.nav-icon {
    font-size: 2rem;
    margin-bottom: var(--space-1);
}

.nav-archive {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--white);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius);
    transition: var(--transition);
}

.nav-archive:hover {
    background: var(--purple-primary);
    color: var(--white);
    border-color: var(--purple-primary);
}

.nav-archive:hover .nav-title {
    color: var(--white);
}

/* ========================================
   サイドバーコンテンツ
   ======================================== */

.sidebar-column {
    min-width: 300px;
    position: relative; /* 通常の配置 */
}

.sidebar-content {
    position: relative; /* 通常の配置 - sticky完全解除 */
}

/* サイドバーウィジェット */
.sidebar-widget {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    overflow: hidden;
}

.sidebar-widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: 600;
    padding: var(--space-3) var(--space-4);
    margin: 0;
    border-bottom: 1px solid var(--border-light);
}

.widget-content {
    padding: var(--space-4);
}

/* 広告ウィジェット */
.ad-widget {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: var(--space-4);
    overflow: visible !important;
}

.ad-widget .widget-content {
    padding: 0;
    text-align: center;
    border-radius: 0 !important;
}

/* 会員ステータスウィジェット */
.member-status-card {
    text-align: center;
}

.member-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    text-align: left;
}

.member-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.member-name {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}

.member-type {
    margin: 0;
    font-size: var(--text-sm);
}

.status-free {
    color: var(--success);
    font-weight: 600;
}

.status-mbti-set {
    color: var(--purple-primary);
    font-weight: 600;
}

.status-mbti-unset {
    color: var(--warning);
    font-weight: 600;
}

.member-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}

.member-link {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: var(--transition);
}

.member-link:hover {
    background: var(--purple-primary);
    color: var(--white);
}

.member-link.primary {
    background: var(--purple-primary);
    color: var(--white);
}

.member-link.primary:hover {
    background: var(--purple-hover);
    color: var(--white);
}

.member-link.highlight {
    background: var(--warning);
    color: var(--white);
    animation: pulse 2s infinite;
}

.member-link.highlight:hover {
    background: #E97B0F;
    color: var(--white);
    animation: none;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* ログインプロンプト */
.login-prompt {
    text-align: center;
}

.login-icon {
    font-size: 3rem;
    margin-bottom: var(--space-3);
}

.login-title {
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0 0 var(--space-2);
}

.login-description {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0 0 var(--space-4);
}

.login-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.login-btn {
    display: block;
    padding: var(--space-2) var(--space-4);
    background: var(--purple-primary);
    color: var(--white);
    text-decoration: none;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: var(--transition);
    text-align: center;
}

.login-btn:hover {
    background: var(--purple-dark);
    color: var(--white);
}

/* 人気記事ウィジェット */
.popular-posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.popular-post-item {
    display: flex;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-light);
}

.popular-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.popular-post-thumbnail {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: var(--radius);
    overflow: hidden;
}

.popular-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popular-post-content {
    flex-grow: 1;
    min-width: 0;
}

.popular-post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.post-type-mini {
    font-size: 0.75rem;
}

.popular-post-date {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.popular-post-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.4;
}

.popular-post-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.popular-post-title a:hover {
    color: var(--purple-primary);
}

/* カテゴリーウィジェット */
.category-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    text-decoration: none;
    transition: var(--transition);
}

.category-item:hover {
    background: var(--purple-primary);
    color: var(--white);
}

.category-name {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.category-count {
    color: var(--text-muted);
    font-size: var(--text-xs);
    background: var(--white);
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.category-item:hover .category-name,
.category-item:hover .category-count {
    color: var(--white);
}

.category-item:hover .category-count {
    background: rgba(255, 255, 255, 0.2);
}

.category-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.category-item.disabled:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* 最新予想ウィジェット */
.recent-predictions-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.recent-prediction-item {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-light);
}

.recent-prediction-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.prediction-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.prediction-date {
    font-weight: 500;
}

.prediction-track {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: var(--radius);
}

.recent-prediction-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.4;
}

.recent-prediction-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.recent-prediction-title a:hover {
    color: var(--purple-primary);
}

.no-posts,
.no-categories {
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
    margin: 0;
    padding: var(--space-4);
}

/* モバイル対応 */
@media (max-width: 1024px) {
    .article-layout.two-column {
        grid-template-columns: 1fr 250px;
        gap: var(--space-6);
    }
    
    .sidebar-column {
        min-width: 250px;
    }
}

@media (max-width: 768px) {
    .article-layout.two-column {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .sidebar-column {
        min-width: auto;
        order: -1; /* サイドバーを上に表示 */
    }
    
    .sidebar-content {
        position: relative; /* モバイルも通常の配置 */
    }
    
    .sidebar-widget {
        margin-bottom: var(--space-4);
    }
    
    .popular-post-item {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .popular-post-thumbnail {
        width: 100%;
        height: 120px;
    }
    
    .member-actions {
        flex-direction: column;
    }
}

/* ===== 固定ページ 2カラムレイアウト ===== */

/* ページヘッダー（シンプル版） */
.page-header {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--gray-200);
}

.page-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0;
    margin-top: var(--space-4);
    line-height: 1.2;
}

/* パンくずナビ（シンプル版） */
.breadcrumb {
    margin-bottom: 0;
}

.breadcrumb-item {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: color var(--transition);
}

.breadcrumb-item:hover {
    color: var(--purple-primary);
}

.breadcrumb-item.current {
    color: var(--text-primary);
}

.breadcrumb-separator {
    color: var(--text-muted);
    margin: 0 var(--space-2);
}

/* 2カラムレイアウト */
.page-layout.two-column {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-areas: "main sidebar";
    gap: var(--space-8);
    align-items: start;
    width: 100%;
    max-width: 1200px; /* PC固定幅 */
}

.page-content.main-column {
    grid-area: main !important;
    min-width: 0; /* 幅の制限を解除 */
}

.sidebar-column {
    grid-area: sidebar !important;
    width: 100%;
}

/* 固定ページのテキストスタイリング（シンプル版） */
.page-content h1 {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 var(--space-6) 0;
    line-height: 1.3;
}

.page-content h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #1a1a1a;
    margin: var(--space-8) 0 var(--space-4) 0;
    line-height: 1.3;
    border-left: 4px solid var(--purple-primary);
    padding-left: var(--space-4);
}

.page-content h2:first-child {
    margin-top: 0;
}

.page-content h3 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: #1a1a1a;
    margin: var(--space-6) 0 var(--space-3) 0;
    line-height: 1.3;
}

.page-content h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #1a1a1a;
    margin: var(--space-5) 0 var(--space-2) 0;
    line-height: 1.4;
}

.page-content p {
    font-size: var(--text-base);
    line-height: 1.7;
    color: #333333;
    margin-bottom: var(--space-4);
}

.page-content ul,
.page-content ol {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.page-content li {
    font-size: var(--text-base);
    line-height: 1.7;
    color: #333333;
    margin-bottom: var(--space-2);
}

.page-content a {
    color: var(--purple-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition);
}

.page-content a:hover {
    color: var(--purple-dark);
    text-decoration: underline;
}

.page-content img {
    max-width: 100%;
    height: auto;
    margin: var(--space-4) 0;
}

.page-content blockquote {
    border-left: 4px solid var(--warning);
    padding: var(--space-4);
    margin: var(--space-6) 0;
    font-style: italic;
    color: #1a1a1a;
}

.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-6) 0;
    font-size: var(--text-sm);
}

.page-content th,
.page-content td {
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.page-content th {
    background: #f5f5f5;
    font-weight: 600;
    color: #1a1a1a;
}

.page-content tr:hover {
    background: #f9f9f9;
}

/* ページネーション */
.page-pagination {
    text-align: center;
    margin: var(--space-8) 0 0 0;
    padding: var(--space-4) 0 0 0;
    border-top: 1px solid #e0e0e0;
}

.page-number {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    margin: 0 var(--space-1);
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    color: var(--purple-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition);
}

.page-number:hover {
    background: var(--purple-primary);
    color: var(--white);
    border-color: var(--purple-primary);
}

/* モバイル対応 */
@media (max-width: 1024px) {
    .page-layout.two-column {
        grid-template-columns: 1fr 250px;
        grid-template-areas: "main sidebar";
        gap: var(--space-6);
    }
}

@media (max-width: 768px) {
    .page-layout.two-column {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "sidebar"
            "main";
        gap: var(--space-4);
    }
    
    .sidebar-column {
        /* order: -1 は不要 - grid-template-areasで制御 */
    }
    
    .page-title {
        font-size: var(--text-2xl);
    }
    
    .page-content h2 {
        font-size: var(--text-xl);
    }
    
    .page-content h3 {
        font-size: var(--text-lg);
    }
}

/* ===== 会員登録・ログインページ ===== */

.auth-layout {
    max-width: 800px;
    margin: 0 auto;
}

/* 新しい会員登録ページレイアウト（1200px幅） */
.auth-page-layout {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.auth-page-content {
    width: 100%;
}

/* Simple Membership フォームスタイル - より汎用的なセレクタ */
.auth-form-section {
    background: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 登録とログインセクションの高さを揃える */
.register-section,
.login-section {
    min-height: 500px;
}

.auth-form-section form,
.auth-form-section div[id*="swpm"],
.auth-form-section table {
    width: 100%;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    margin: 0;
}

.auth-form-section table {
    border-collapse: collapse;
}

.auth-form-section td {
    padding: var(--space-3);
    border: none;
    vertical-align: top;
}

.auth-form-section input[type="text"],
.auth-form-section input[type="email"],
.auth-form-section input[type="password"] {
    width: 100%;
    padding: var(--space-3);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: var(--text-base);
    transition: all var(--transition);
    background: var(--white);
    box-sizing: border-box;
    max-width: 400px;
}

.auth-form-section input:focus {
    outline: none;
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px rgba(103, 98, 166, 0.1);
}

.auth-form-section label {
    font-weight: 600;
    color: #1a1a1a;
    font-size: var(--text-sm);
    display: block;
    margin-bottom: var(--space-2);
}

.auth-form-section input[type="submit"],
.auth-form-section button {
    background: var(--purple-primary) !important;
    color: var(--white) !important;
    padding: var(--space-4) var(--space-8) !important;
    font-size: var(--text-lg) !important;
    font-weight: 600 !important;
    border: 2px solid var(--purple-primary) !important;
    border-radius: var(--radius) !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
    text-decoration: none !important;
}

.auth-form-section input[type="submit"]:hover,
.auth-form-section button:hover {
    background: var(--purple-dark) !important;
    border-color: var(--purple-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* 姓名フィールドを非表示 - より確実な方法 */
.auth-form-section tr td:has(input[name*="first"]),
.auth-form-section tr td:has(input[name*="last"]),
.auth-form-section tr:has(input[name*="first"]),
.auth-form-section tr:has(input[name*="last"]) {
    display: none !important;
}

/* Simple Membershipのチェックボックススタイル */
.swpm-password-input-visibility,
.swpm-remember-me {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    margin: var(--space-3) 0 !important;
}

.swpm-password-toggle-checkbox,
.swpm-remember-checkbox {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.swpm-password-toggle-checkbox input,
.swpm-remember-checkbox input {
    margin: 0 !important;
    width: auto !important;
    padding: 0 !important;
    box-sizing: content-box !important;
}

.swpm-password-toggle-checkbox-label,
.swpm-rememberme-label {
    margin: 0 !important;
    font-size: var(--text-sm) !important;
    color: #666666 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
}

.swpm-password-toggle-label,
.swpm-rember-label {
    margin-left: var(--space-1) !important;
}

/* 会員登録ページ新レイアウト */
.auth-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-6);
}

/* PC用横並びレイアウト */
.auth-forms-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: stretch; /* startからstretchに変更して高さを揃える */
}

/* 単一フォームページ用のレイアウト調整 */
.auth-forms-container:has(.register-only),
.auth-forms-container:has(.login-only) {
    display: block; /* gridを無効化して通常のブロック要素にする */
    max-width: 500px;
    margin: 0 auto;
}

/* スマホレイアウト */
@media (max-width: 768px) {
    .auth-forms-container {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .auth-container {
        padding: var(--space-4);
    }
}

/* 会員登録メリットセクション */
.membership-benefits {
    max-width: 1200px;
    margin: var(--space-12) auto 0;
    padding: var(--space-8);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.membership-benefits h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: var(--space-8);
}

.membership-benefits h4 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin: var(--space-8) 0 var(--space-6);
}

/* 既存のstyles-listを上書き */
.membership-benefits .steps-list {
    max-width: 800px;
}

.membership-benefits .steps-list li {
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.membership-benefits .steps-list li::before {
    top: 15px;
}

/* 会員登録ページ新スタイル */
.auth-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-6);
}

.auth-intro {
    text-align: center;
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
    color: var(--white);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
}

.auth-intro h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--white);
}

.auth-intro p {
    font-size: var(--text-lg);
    opacity: 0.9;
    margin-bottom: var(--space-2);
}

/* 性格タイプ設定セクション */
.mbti-setup-section {
    background: var(--white);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-8);
    text-align: center;
}

.auth-form-section h3,
.mbti-setup-section h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: var(--space-4);
    text-align: center;
}

.auth-form-section p,
.mbti-setup-section p {
    font-size: var(--text-base);
    color: #666666;
    margin-bottom: var(--space-6);
    text-align: center;
}

.mbti-actions {
    display: flex;
    justify-content: center;
}

.btn-large {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
    font-weight: 600;
    border-radius: var(--radius);
    text-decoration: none;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* 重複削除 - design-improvements.cssで定義済み */

.btn-xl {
    padding: var(--space-5) var(--space-10);
    font-size: var(--text-xl);
    font-weight: 700;
}

/* 特徴セクション */
.benefits-section {
    background: var(--bg-secondary);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
}

.benefits-section h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: var(--space-6);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
}

.benefit-item {
    background: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    text-align: center;
    transition: all var(--transition);
}

.benefit-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.benefit-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
}

.benefit-item h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: var(--space-3);
}

.benefit-item p {
    font-size: var(--text-sm);
    color: #666666;
    margin: 0;
    line-height: 1.6;
}

/* 性格タイププレビュー */
.mbtis-preview {
    background: var(--white);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    margin-bottom: var(--space-8);
}

.mbtis-preview h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: var(--space-6);
}

.types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
}

.type-preview {
    padding: var(--space-5);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}

.type-preview h4 {
    font-size: var(--text-base);
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: var(--space-3);
}

.type-preview p {
    font-size: var(--text-sm);
    color: #666666;
    margin: 0;
    line-height: 1.5;
}

/* はじめ方セクション */
.getting-started {
    background: var(--bg-secondary);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
}

.getting-started h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: var(--space-6);
}

.steps-list {
    max-width: 600px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
    counter-reset: step-counter;
}

.steps-list li {
    counter-increment: step-counter;
    position: relative;
    background: var(--white);
    padding: var(--space-5);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    margin-bottom: var(--space-4);
}

.steps-list li::before {
    content: counter(step-counter);
    position: absolute;
    left: -15px;
    top: 20px;
    width: 30px;
    height: 30px;
    background: var(--purple-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
}

.steps-list li strong {
    display: block;
    font-size: var(--text-base);
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: var(--space-2);
}

.steps-list li br + text {
    font-size: var(--text-sm);
    color: #666666;
}

/* CTAセクション */
.cta-section {
    text-align: center;
}

.cta-card {
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
    color: var(--white);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.cta-card h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--white);
}

.cta-card p {
    font-size: var(--text-lg);
    opacity: 0.9;
    margin-bottom: var(--space-6);
}

.cta-actions {
    display: flex;
    justify-content: center;
}

.auth-content {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

/* イントロセクション */
.auth-intro {
    text-align: center;
    padding: var(--space-8) var(--space-6);
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
    color: var(--white);
}

.intro-icon {
    font-size: 4rem;
    margin-bottom: var(--space-4);
}

.auth-intro h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--white);
}

.auth-intro p {
    font-size: var(--text-lg);
    opacity: 0.9;
    margin: 0;
}

/* 特徴グリッド */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--bg-secondary);
}

.feature-card {
    text-align: center;
    padding: var(--space-4);
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
}

.feature-card h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: var(--space-2);
}

.feature-card p {
    font-size: var(--text-sm);
    color: #666666;
    margin: 0;
    line-height: 1.5;
}

/* フォームセクション */
.auth-forms {
    padding: var(--space-8) var(--space-6);
}

.auth-form-section {
    margin-bottom: var(--space-8);
}

.form-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: var(--space-2);
}

.form-description {
    font-size: var(--text-base);
    color: #666666;
    margin-bottom: var(--space-6);
}

/* フォーム要素 */
.form-group {
    margin-bottom: var(--space-5);
}

.form-group label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: var(--space-2);
}

.form-input {
    width: 100%;
    padding: var(--space-3);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: var(--text-base);
    transition: all var(--transition);
    background: var(--white);
}

.form-input:focus {
    outline: none;
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px rgba(103, 98, 166, 0.1);
}

.form-hint {
    font-size: var(--text-xs);
    color: #888888;
    margin-top: var(--space-1);
}

/* チェックボックス */
.checkbox-group, .terms-agreement {
    margin-bottom: var(--space-5);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    font-size: var(--text-sm);
    color: #333333;
    cursor: pointer;
    gap: var(--space-2);
}

.checkbox-label input[type="checkbox"] {
    opacity: 0;
    position: absolute;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-400);
    border-radius: var(--radius-sm);
    position: relative;
    flex-shrink: 0;
    transition: all var(--transition);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: var(--purple-primary);
    border-color: var(--purple-primary);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
    font-size: var(--text-xs);
    font-weight: 700;
}

/* ボタン */
.form-actions {
    margin-bottom: var(--space-4);
}

.btn-large {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-lg);
    width: 100%;
}

/* リンク */
.form-links {
    text-align: center;
    margin-top: var(--space-4);
}

.forgot-password {
    color: var(--purple-primary);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--transition);
}

.forgot-password:hover {
    color: var(--purple-dark);
    text-decoration: underline;
}

/* 区切り線 */
.auth-divider {
    text-align: center;
    margin: var(--space-8) 0;
    position: relative;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gray-300);
}

.auth-divider span {
    background: var(--white);
    padding: 0 var(--space-4);
    color: #888888;
    font-size: var(--text-sm);
    position: relative;
}

/* 登録成功 */
.login-success {
    text-align: center;
    padding: var(--space-6);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--success);
}

.success-icon {
    font-size: 3rem;
    margin-bottom: var(--space-3);
}

.login-success h4 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: var(--space-2);
}

.login-success p {
    font-size: var(--text-base);
    color: #666666;
    margin-bottom: var(--space-4);
}

.success-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* 注意書き */
.register-note {
    text-align: center;
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius);
}

.register-note p {
    font-size: var(--text-sm);
    color: var(--success);
    margin: 0;
    font-weight: 500;
}

/* 追加コンテンツ */
.page-additional-content {
    padding: 0 var(--space-6) var(--space-6);
}

.page-additional-content:empty {
    display: none;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .auth-layout {
        margin: 0;
    }
    
    .auth-content {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .auth-intro {
        padding: var(--space-6) var(--space-4);
    }
    
    .intro-icon {
        font-size: 3rem;
    }
    
    .auth-intro h2 {
        font-size: var(--text-xl);
    }
    
    .auth-intro p {
        font-size: var(--text-base);
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        padding: var(--space-4);
        gap: var(--space-3);
    }
    
    .auth-forms {
        padding: var(--space-6) var(--space-4);
    }
    
    .success-actions {
        flex-direction: column;
    }
    
    .success-actions .btn {
        width: 100%;
    }
}

/* ===== ユーザーカスタムHTML用スタイル ===== */

.auth-page-wrapper {
    width: 100%;
}

/* ヒーローセクション */
.auth-hero {
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
    color: var(--white);
    padding: var(--space-12) 0;
    text-align: center;
}

.auth-hero-title {
    font-size: var(--text-4xl);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--white);
}

.auth-hero-title i {
    margin-right: var(--space-3);
    color: var(--warning);
}

.auth-hero-subtitle {
    font-size: var(--text-xl);
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* 認証フォームセクション */
.auth-forms {
    padding: var(--space-12) 0;
}

.auth-wrapper {
    max-width: 600px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* タブ切り替え */
.auth-tabs {
    display: flex;
    background: var(--bg-secondary);
}

.auth-tab {
    flex: 1;
    padding: var(--space-4);
    background: transparent;
    border: none;
    font-size: var(--text-base);
    font-weight: 600;
    color: #666666;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}

.auth-tab.active {
    background: var(--white);
    color: var(--purple-primary);
    border-bottom: 3px solid var(--purple-primary);
}

.auth-tab i {
    margin-right: var(--space-2);
}

/* フォームコンテナ */
.auth-form-container {
    display: none;
    padding: var(--space-8);
}

.auth-form-container.active {
    display: block;
}

.form-header {
    margin-bottom: var(--space-6);
    text-align: center;
}

.form-header h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: var(--space-2);
}

.form-header p {
    color: #666666;
    font-size: var(--text-base);
}

/* フォーム特典 */
.form-benefits {
    margin: var(--space-6) 0;
    padding: var(--space-5);
    background: var(--bg-secondary);
    border-radius: var(--radius);
}

.form-benefits h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: var(--space-3);
}

.form-benefits h3 i {
    margin-right: var(--space-2);
    color: var(--warning);
}

.form-benefits ul {
    list-style: none;
    padding: 0;
}

.form-benefits li {
    padding: var(--space-2) 0;
    color: #333333;
}

.form-benefits li i {
    margin-right: var(--space-2);
    color: var(--success);
}

/* 無料通知 */
.free-notice {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--info);
    border-radius: var(--radius);
    color: var(--white);
}

/* ログインヘルプ */
.login-help {
    margin-top: var(--space-4);
    text-align: center;
}

.help-link {
    color: var(--purple-primary);
    text-decoration: none;
    font-size: var(--text-sm);
}

.help-link:hover {
    text-decoration: underline;
}

.help-link i {
    margin-right: var(--space-1);
}

/* 価値提供セクション */
.value-ladder {
    margin: var(--space-12) 0;
    padding: var(--space-8);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.ladder-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: var(--space-8);
}

.ladder-title i {
    margin-right: var(--space-2);
    color: var(--purple-primary);
}

.ladder-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.ladder-step {
    background: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 2px solid var(--gray-200);
    transition: all var(--transition);
}

.ladder-step:hover {
    border-color: var(--purple-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.ladder-step.featured {
    border-color: var(--success);
    position: relative;
}

.ladder-step.premium {
    border-color: var(--warning);
}

.step-header {
    margin-bottom: var(--space-4);
    text-align: center;
}

.step-badge {
    display: inline-block;
    background: var(--gray-600);
    color: var(--white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.featured .step-badge {
    background: var(--success);
}

.premium .step-badge {
    background: var(--warning);
}

.step-header h4 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: #1a1a1a;
    margin: var(--space-2) 0;
}

.recommended {
    background: var(--success);
    color: var(--white);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-weight: 600;
}

.step-content p {
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: var(--space-3);
}

.step-content ul {
    list-style: none;
    padding: 0;
}

.step-content li {
    padding: var(--space-1) 0;
    color: #666666;
    font-size: var(--text-sm);
}

.premium-link {
    display: inline-block;
    margin-top: var(--space-3);
    color: var(--warning);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-sm);
}

.premium-link:hover {
    text-decoration: underline;
}

/* 信頼性セクション */
.auth-trust {
    padding: var(--space-12) 0;
    background: var(--white);
}

.section-title-center {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: var(--space-8);
}

.section-title-center i {
    margin-right: var(--space-2);
    color: var(--success);
}

.trust-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
}

.trust-item {
    text-align: center;
    padding: var(--space-4);
}

.trust-item i {
    font-size: 3rem;
    color: var(--success);
    margin-bottom: var(--space-3);
}

.trust-item h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: var(--space-2);
}

.trust-item p {
    color: #666666;
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .auth-page-layout {
        margin: 0;
        max-width: none;
    }
    
    .auth-hero {
        padding: var(--space-8) 0;
    }
    
    .auth-hero-title {
        font-size: var(--text-2xl);
    }
    
    .auth-hero-subtitle {
        font-size: var(--text-base);
    }
    
    .auth-wrapper {
        margin: 0 var(--space-4);
        border-radius: var(--radius);
    }
    
    .ladder-steps {
        grid-template-columns: 1fr;
    }
    
    .trust-items {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   FAQページ専用スタイル
   ======================================== */

/* FAQページの追加機能とアクセシビリティ */
.faq-page .breadcrumb {
    margin-bottom: 2rem;
}

/* JavaScript無効時の対応 */
.no-js .faq-answer {
    display: block !important;
    margin-top: 1rem;
}

.no-js .toggle-icon {
    display: none;
}

.no-js .faq-question {
    cursor: default;
}

/* アクセシビリティ向上 */
.faq-question:focus {
    outline: 2px solid var(--purple-primary);
    outline-offset: 2px;
}

.faq-question[aria-expanded="true"] .toggle-icon {
    transform: rotate(45deg);
}

/* 検索機能（将来の拡張用） */
.faq-search {
    margin-bottom: 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.faq-search input {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.faq-search input:focus {
    border-color: var(--purple-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(103, 98, 166, 0.1);
}

/* 印刷用スタイル */
@media print {
    .faq-container {
        padding: 0;
        box-shadow: none;
    }
    
    .breadcrumb,
    .contact-actions,
    .toggle-icon,
    .faq-contact {
        display: none;
    }
    
    .faq-answer {
        display: block !important;
    }
    
    .faq-question {
        border-bottom: 1px solid #ccc;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        background: white !important;
    }
    
    .category-title {
        border-bottom: 2px solid #000;
        page-break-after: avoid;
        background: white !important;
    }
    
    .faq-item {
        page-break-inside: avoid;
        margin-bottom: 1rem;
        border: 1px solid #ccc;
        background: white !important;
    }
    
    .faq-category {
        margin-bottom: 2rem;
        background: white !important;
    }
}

/* ========================================
   FAQページのコア機能
   ======================================== */

/* FAQコンテナ */
.faq-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* FAQヘッダー */
.faq-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--gray-200);
}

.faq-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.faq-icon {
    font-size: 2rem;
}

.faq-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* FAQカテゴリ */
.faq-categories {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.faq-category {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--gray-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.category-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--purple-primary);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--purple-light);
}

.category-icon {
    font-size: 1.5rem;
}

/* FAQ項目 */
.faq-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--purple-primary);
    box-shadow: 0 2px 8px rgba(103, 98, 166, 0.1);
}

.faq-item.active {
    border-color: var(--purple-primary);
    box-shadow: 0 4px 12px rgba(103, 98, 166, 0.15);
}

/* FAQ質問 */
.faq-question {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    cursor: pointer;
    background: var(--gray-50);
    transition: all 0.3s ease;
    user-select: none;
}

/* ========================================
   なぜ性格タイプページスタイル
   ======================================== */

/* イントロセクション */
.why-intro-section {
    margin-bottom: 3rem;
}

.intro-card {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--white) 100%);
    border: 2px solid var(--purple-primary);
    border-radius: var(--radius-lg);
}

.intro-icon {
    font-size: 4rem;
    flex-shrink: 0;
}

.intro-content h2 {
    margin-bottom: 0.5rem;
    color: var(--purple-primary);
}

.intro-content p {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.intro-content p strong {
    color: var(--text-primary);
}

/* 問題提起セクション */
.why-problems-section {
    margin-bottom: 3rem;
}

.why-problems-section h2 {
    margin-bottom: 2rem;
    color: var(--text-primary);
    font-size: var(--text-2xl);
}

.problems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.problem-card {
    padding: 1.5rem;
    background: var(--white);
    border: 2px solid var(--error);
    border-radius: var(--radius);
    text-align: center;
    opacity: 0.9;
}

.problem-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.problem-card h3 {
    margin-bottom: 0.5rem;
    color: var(--error);
    font-size: var(--text-base);
}

.problem-card p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ソリューションセクション */
.why-solution-section {
    margin-bottom: 3rem;
}

.why-solution-section h2 {
    margin-bottom: 2rem;
    color: var(--text-primary);
    font-size: var(--text-2xl);
}

.solution-cards {
    display: grid;
    gap: 1.5rem;
}

.solution-card {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--white);
    border: 2px solid var(--success);
    border-radius: var(--radius);
}

.solution-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.solution-content h3 {
    margin-bottom: 0.5rem;
    color: var(--success);
}

.solution-content p {
    color: var(--text-secondary);
}

/* なぜ性格タイプなのかセクション */
.why-reason-section {
    margin-bottom: 3rem;
}

.why-reason-section h2 {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-size: var(--text-2xl);
}

.reason-explanation {
    margin-bottom: 2rem;
}

.reason-explanation p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.innovation-highlight {
    padding: 2rem;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    color: var(--white);
    border-radius: var(--radius-lg);
    text-align: center;
}

.highlight-badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    background: var(--white);
    color: var(--purple-primary);
    font-weight: bold;
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
}

.innovation-highlight h3 {
    margin-bottom: 0.5rem;
    color: var(--white);
    font-size: var(--text-xl);
}

.innovation-highlight p {
    color: rgba(255, 255, 255, 0.9);
}

/* 予想スタイルセクション */
.why-styles-section {
    margin-bottom: 3rem;
}

.why-styles-section h2 {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-size: var(--text-2xl);
}

.section-intro {
    margin-bottom: 2rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.style-groups {
    display: grid;
    gap: 2rem;
}

.style-group {
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 2px solid;
}

.style-group.analyst-style {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(139, 92, 246, 0.02) 100%);
    border-color: rgba(139, 92, 246, 0.3);
}

.style-group.diplomat-style {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(6, 182, 212, 0.02) 100%);
    border-color: rgba(6, 182, 212, 0.3);
}

.style-group.sentinel-style {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

.style-group.explorer-style {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.02) 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

.style-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.style-icon {
    font-size: 2rem;
}

.style-header h3 {
    color: var(--text-primary);
    margin: 0;
}

.style-tagline {
    margin-bottom: 1.5rem;
    color: var(--text-muted);
    font-style: italic;
}

.style-features {
    margin-bottom: 1.5rem;
}

.style-features h4 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.style-features ul {
    list-style: none;
    padding: 0;
}

.style-features li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
}

.style-features li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--purple-primary);
}

.style-types {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.type-badge {
    padding: 0.25rem 0.75rem;
    background: var(--white);
    color: var(--purple-primary);
    border: 1px solid var(--purple-primary);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* 技術的優位性セクション */
.why-advantage-section {
    margin-bottom: 3rem;
}

.why-advantage-section h2 {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-size: var(--text-2xl);
}

.advantage-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.advantage-card {
    padding: 2rem;
    background: var(--white);
    border-top: 4px solid var(--purple-primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.advantage-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.advantage-card h3 {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.advantage-content p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.advantage-point {
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-left: 3px solid var(--purple-primary);
    color: var(--purple-primary);
    font-weight: 600;
    font-size: var(--text-sm);
}

/* CTAセクション */
.why-cta-section {
    margin-top: 4rem;
}

.cta-container {
    padding: 3rem;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    color: var(--white);
    border-radius: var(--radius-lg);
    text-align: center;
}

.cta-container h2 {
    margin-bottom: 2rem;
    color: var(--white);
    font-size: var(--text-3xl);
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.cta-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.feature-icon {
    font-size: 2rem;
}

.feature-text {
    text-align: left;
}

.feature-text strong {
    display: block;
    color: var(--white);
    font-size: var(--text-lg);
}

.feature-text span {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--text-sm);
}

.cta-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cta-actions .btn {
    padding: var(--space-4) var(--space-8);
}

.btn-large {
    padding: var(--space-5) var(--space-10) !important;
    font-size: var(--text-lg);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .intro-card {
        flex-direction: column;
        text-align: center;
    }
    
    .problems-grid {
        grid-template-columns: 1fr;
    }
    
    .solution-card {
        flex-direction: column;
        text-align: center;
    }
    
    .advantage-cards {
        grid-template-columns: 1fr;
    }
    
    .cta-features {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .cta-feature {
        justify-content: center;
    }
}

/* ========================================
   予想一覧ページスタイル
   ======================================== */

/* 競馬場グリッド */
.racetracks-grid {
    margin-bottom: 4rem;
}

.racetrack-section {
    margin-bottom: 3rem;
}

.section-subtitle {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-size: var(--text-xl);
    border-bottom: 2px solid var(--purple-primary);
    padding-bottom: 0.5rem;
}

.racetrack-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.racetrack-card {
    display: block;
    padding: 1.5rem;
    background: var(--white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
}

.racetrack-card:hover {
    border-color: var(--purple-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.racetrack-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.racetrack-name {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-size: var(--text-xl);
    font-weight: 600;
}

.racetrack-info {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.info-item {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.racetrack-stats {
    margin-top: 1rem;
}

.stat-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--bg-secondary);
    color: var(--purple-primary);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* 最新予想一覧 */
.latest-predictions {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid var(--border-light);
}

.predictions-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.prediction-item {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
}

.prediction-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.prediction-link:hover {
    background: var(--bg-secondary);
}

.prediction-content {
    flex: 1;
}

.prediction-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.prediction-date {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.prediction-racetrack {
    padding: 0.125rem 0.5rem;
    background: var(--purple-primary);
    color: var(--white);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}

.prediction-title {
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: 500;
    margin: 0;
}

.prediction-arrow {
    color: var(--purple-primary);
    font-size: var(--text-xl);
    font-weight: bold;
}

.no-predictions {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .racetrack-cards {
        grid-template-columns: 1fr;
    }
    
    .racetrack-info {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* ========================================
   カテゴリーページスタイル  
   ======================================== */

/* 記事リスト */
.article-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.article-card {
    background: var(--white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
}

.article-card:hover {
    border-color: var(--purple-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.article-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.article-card-inner {
    display: flex;
    align-items: center;
    padding: 1.5rem;
}

.article-card-content {
    flex: 1;
}

.article-card-title {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.3;
}

.article-card-excerpt {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.article-card-meta {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.meta-date::before {
    content: "📅";
    margin-right: 0.25rem;
}

.meta-author::before {
    content: "👤";
    margin-right: 0.25rem;
}

.article-card-action {
    margin-left: 1rem;
    flex-shrink: 0;
}

.btn-view-prediction {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--purple-primary);
    color: var(--white);
    border-radius: var(--radius);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-view-prediction:hover {
    background: var(--purple-hover);
    transform: translateX(2px);
}

.btn-view-prediction .arrow {
    font-weight: bold;
    transition: transform 0.3s ease;
}

.article-card:hover .btn-view-prediction .arrow {
    transform: translateX(3px);
}

/* ページネーション */
.pagination-wrapper {
    margin-top: 3rem;
    text-align: center;
}

.page-numbers {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.25rem;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.5rem;
}

.page-numbers li {
    margin: 0;
}

.page-numbers a,
.page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    font-weight: 500;
}

.page-numbers a {
    color: var(--text-primary);
}

.page-numbers a:hover {
    background: var(--purple-primary);
    color: var(--white);
}

.page-numbers .current {
    background: var(--purple-primary);
    color: var(--white);
}

.page-numbers .prev,
.page-numbers .next {
    padding: 0.5rem 1rem;
}

.pagination-icon {
    font-weight: bold;
}

/* コンテンツなし */
.no-content {
    text-align: center;
    padding: 4rem 2rem;
}

.no-content-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.no-content-title {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: var(--text-2xl);
}

.no-content-text {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.no-content-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* カテゴリー固有スタイル */
.page-meta {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.page-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
}

.meta-icon {
    font-size: 1.25rem;
}

.meta-text {
    font-weight: 500;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .article-card-inner {
        flex-direction: column;
        text-align: center;
    }
    
    .article-card-action {
        margin-left: 0;
        margin-top: 1rem;
    }
    
    .page-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .no-content-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* ========================================
   会員登録・ログインページスタイル
   ======================================== */

/* アカウントハブ（ログイン済み） */
.account-hub {
    max-width: 800px;
    margin: 0 auto;
}

.user-info-card {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: var(--white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    margin-bottom: 3rem;
}

.user-avatar {
    flex-shrink: 0;
}

.user-avatar img {
    border-radius: 50%;
    border: 3px solid var(--purple-primary);
}

.user-details h2 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.user-email {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.user-status {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
}

.status-badge.free {
    background: var(--success);
    color: var(--white);
}

.status-badge.mbti-set {
    background: var(--purple-primary);
    color: var(--white);
}

.status-badge.mbti-unset {
    background: var(--warning);
    color: var(--white);
}

.join-date {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.account-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.action-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background: var(--white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.action-card:hover {
    border-color: var(--purple-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.action-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.action-card h3 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-size: var(--text-lg);
}

.action-card p {
    color: var(--text-secondary);
    flex: 1;
}

.action-arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--purple-primary);
    font-size: var(--text-xl);
    font-weight: bold;
    transition: transform 0.3s ease;
}

.action-card:hover .action-arrow {
    transform: translateX(3px);
}

.logout-section {
    text-align: center;
    padding: 2rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.logout-section h3 {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.logout-actions {
    display: flex;
    justify-content: center;
}

/* 認証フォーム（未ログイン） - SWPM対応 */
.auth-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* PC用横並びレイアウト */
.auth-forms-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.auth-form-section {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-light);
    transition: all 0.3s ease;
}

.auth-form-section:hover {
    border-color: var(--purple-primary);
    box-shadow: var(--shadow-lg);
}

.auth-form-section h3 {
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.auth-form-section p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* SWPM フォームのスタイリング */
.auth-form-section .swpm-registration-form,
.auth-form-section .swpm-login-form {
    margin: 0;
}

.auth-form-section .swpm-registration-form input,
.auth-form-section .swpm-login-form input {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 2px solid var(--border-light);
    border-radius: var(--radius);
    font-size: var(--text-base);
    transition: border-color 0.3s ease;
}

.auth-form-section .swpm-registration-form input:focus,
.auth-form-section .swpm-login-form input:focus {
    outline: none;
    border-color: var(--purple-primary);
}

.auth-form-section .swpm-registration-form .swpm-registration-submit,
.auth-form-section .swpm-login-form .swpm-login-submit {
    background: var(--purple-primary);
    color: var(--white);
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--radius);
    font-size: var(--text-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.auth-form-section .swpm-registration-form .swpm-registration-submit:hover,
.auth-form-section .swpm-login-form .swpm-login-submit:hover {
    background: var(--purple-dark);
    transform: translateY(-1px);
}

/* 会員登録のメリットセクション */
.membership-benefits {
    background: var(--bg-light);
    padding: 3rem;
    border-radius: var(--radius-lg);
    margin-top: 3rem;
}

.membership-benefits h3 {
    text-align: center;
    font-size: var(--text-2xl);
    color: var(--text-primary);
    margin-bottom: 2.5rem;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.benefit-item {
    text-align: center;
    padding: 2rem;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}

.benefit-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--purple-light);
}

.benefit-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.benefit-item h4 {
    font-size: var(--text-lg);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.benefit-item p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 性格タイプ別アプローチ例 */
.mbtis-preview {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius);
    margin-bottom: 3rem;
}

.mbtis-preview h4 {
    text-align: center;
    font-size: var(--text-lg);
    color: var(--text-primary);
    margin-bottom: 2rem;
}

.types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.type-preview {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border-left: 4px solid var(--purple-primary);
}

.type-preview strong {
    color: var(--purple-primary);
    font-size: var(--text-base);
}

/* 登録後の流れ */
.getting-started {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius);
}

.getting-started h4 {
    text-align: center;
    font-size: var(--text-lg);
    color: var(--text-primary);
    margin-bottom: 2rem;
}

.steps-list {
    list-style: none;
    padding: 0;
    counter-reset: step-counter;
}

.steps-list li {
    position: relative;
    padding: 1.5rem 0 1.5rem 4rem;
    border-left: 2px solid var(--border-light);
    margin-bottom: 1rem;
    counter-increment: step-counter;
}

.steps-list li:last-child {
    border-left: none;
}

.steps-list li::before {
    content: counter(step-counter);
    position: absolute;
    left: -1.25rem;
    top: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--purple-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-sm);
}

.steps-list strong {
    color: var(--purple-primary);
    display: block;
    margin-bottom: 0.5rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .user-info-card {
        flex-direction: column;
        text-align: center;
    }
    
    .user-status {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .account-actions-grid {
        grid-template-columns: 1fr;
    }
    
    .auth-forms-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .auth-form-section {
        padding: 1.5rem;
    }
    
    .membership-benefits {
        padding: 2rem 1.5rem;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .types-grid {
        grid-template-columns: 1fr;
    }
    
    .mbtis-preview,
    .getting-started {
        padding: 2rem 1.5rem;
    }
    
    .steps-list li {
        padding-left: 3rem;
    }
    
    .steps-list li::before {
        left: -1rem;
        width: 2rem;
        height: 2rem;
    }
}

/* ========================================
   マイダッシュボードページスタイル
   ======================================== */

/* メインラッパー */
.jikuma-dash-wrapper {
    background: var(--bg-light);
    min-height: 100vh;
    padding: var(--space-6) 0;
}

.jikuma-dash-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* ヘッダー部分 */
.jikuma-dash-header {
    text-align: center;
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.jikuma-dash-title {
    font-size: var(--text-3xl);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    font-weight: 700;
}

.jikuma-dash-welcome {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    margin: 0;
}

/* メインコンテンツ */
.jikuma-dash-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* 会員ステータスカード */
.jikuma-status-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 2px solid var(--border-light);
    transition: all 0.3s ease;
}

.jikuma-status-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.jikuma-status-card.premium {
    border-color: var(--warning);
    background: linear-gradient(135deg, #fff 0%, #fff9e6 100%);
}

.jikuma-status-card.free {
    border-color: var(--success);
    background: linear-gradient(135deg, #fff 0%, #f0f9ff 100%);
}

.jikuma-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-light);
}

.jikuma-status-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0;
}

.jikuma-status-icon {
    font-size: var(--text-2xl);
}

.jikuma-status-badge {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
}

.jikuma-status-badge.active {
    background: var(--success);
    color: var(--white);
}

.jikuma-status-badge.inactive {
    background: var(--info);
    color: var(--white);
}

.jikuma-status-body {
    padding: var(--space-6);
}

.jikuma-status-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
}

/* サブスクリプション情報 */
.jikuma-subscription-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.jikuma-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius);
}

.jikuma-info-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.jikuma-info-value {
    color: var(--text-primary);
    font-weight: 600;
}

/* アップグレード特典 */
.jikuma-upgrade-benefits {
    margin-bottom: var(--space-6);
}

.jikuma-upgrade-benefits h3 {
    color: var(--purple-primary);
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
}

.jikuma-upgrade-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jikuma-upgrade-benefits li {
    padding: var(--space-2) 0;
    color: var(--text-secondary);
    font-size: var(--text-base);
    border-bottom: 1px solid var(--border-light);
}

.jikuma-upgrade-benefits li:last-child {
    border-bottom: none;
}

/* アクションボタン */
.jikuma-action-buttons {
    display: flex;
    gap: var(--space-3);
}

.jikuma-btn-primary {
    background: var(--purple-primary) !important;
    color: var(--white) !important;
    padding: var(--space-3) var(--space-6);
    border: none;
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jikuma-btn-primary:hover {
    background: var(--purple-dark) !important;
    color: var(--white) !important;
    text-decoration: none;
    transform: translateY(-1px);
}

.jikuma-btn-secondary {
    background: transparent;
    color: var(--error);
    padding: var(--space-3) var(--space-6);
    border: 2px solid var(--error);
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.jikuma-btn-secondary:hover {
    background: var(--error);
    color: var(--white);
}

/* セクションタイトル */
.jikuma-section-title {
    color: var(--text-primary);
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

/* クイックリンク */
.jikuma-quick-links {
    background: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.jikuma-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.jikuma-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6);
    background: var(--bg-light);
    border-radius: var(--radius);
    border: 2px solid var(--border-light);
    text-decoration: none;
    transition: all 0.3s ease;
}

.jikuma-link-card:hover {
    border-color: var(--purple-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.jikuma-link-icon {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}

.jikuma-link-text {
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--text-base);
}

/* アカウント設定 */
.jikuma-account-settings {
    background: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.jikuma-settings-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.jikuma-settings-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-light);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    text-decoration: none;
    transition: all 0.3s ease;
}

.jikuma-settings-item:hover {
    background: var(--bg-secondary);
    border-color: var(--purple-light);
    text-decoration: none;
    transform: translateX(4px);
}

.jikuma-settings-icon {
    font-size: var(--text-xl);
}

.jikuma-settings-text {
    color: var(--text-primary);
    font-weight: 500;
}

/* モーダルスタイル */
.jikuma-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
}

.jikuma-modal-content {
    background: var(--white);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.jikuma-modal-content h3 {
    color: var(--error);
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
    text-align: center;
}

.jikuma-modal-content p {
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.jikuma-modal-content ul {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    padding-left: var(--space-4);
}

.jikuma-modal-content li {
    margin-bottom: var(--space-1);
}

.jikuma-modal-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-6);
}

.jikuma-btn-cancel-confirm {
    background: var(--error);
    color: var(--white);
    padding: var(--space-3) var(--space-6);
    border: none;
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.jikuma-btn-cancel-confirm:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.jikuma-btn-close {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: var(--space-3) var(--space-6);
    border: 2px solid var(--border-medium);
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.jikuma-btn-close:hover {
    background: var(--border-medium);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .jikuma-dash-container {
        padding: 0 var(--space-3);
    }
    
    .jikuma-dash-header {
        padding: var(--space-4);
    }
    
    .jikuma-dash-title {
        font-size: var(--text-2xl);
    }
    
    .jikuma-dash-welcome {
        font-size: var(--text-base);
    }
    
    .jikuma-status-header {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }
    
    .jikuma-subscription-info {
        gap: var(--space-2);
    }
    
    .jikuma-info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
    
    .jikuma-action-buttons {
        flex-direction: column;
    }
    
    .jikuma-links-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--space-3);
    }
    
    .jikuma-link-card {
        padding: var(--space-4);
    }
    
    .jikuma-link-icon {
        font-size: var(--text-2xl);
    }
    
    .jikuma-modal-content {
        padding: var(--space-6);
        width: 95%;
    }
    
    .jikuma-modal-actions {
        flex-direction: column;
    }
}

/* ========================================
   性格タイプガイドページスタイル
   ======================================== */

/* ガイドナビゲーション */
.guide-nav {
    margin-bottom: 3rem;
    padding: 2rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.guide-nav h2 {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-size: var(--text-2xl);
}

.guide-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    background: var(--white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-card:hover {
    border-color: var(--purple-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.nav-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.nav-title {
    color: var(--text-primary);
    font-weight: 600;
}

/* ガイドセクション */
.guide-section {
    margin-bottom: 4rem;
    scroll-margin-top: 100px;
}

.guide-section h2 {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-size: var(--text-3xl);
    border-bottom: 3px solid var(--purple-primary);
    padding-bottom: 0.5rem;
}

/* 診断ステップ */
.diagnosis-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.step-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--purple-primary);
    color: var(--white);
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 50%;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-content h3 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.step-content p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.step-content ul {
    list-style: none;
    padding: 0;
}

.step-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.step-content li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--purple-primary);
}

.result-tips,
.selection-tips,
.confirmation-check {
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    margin-top: 1rem;
}

/* タイプグループ */
.type-group {
    margin-bottom: 3rem;
    padding: 2rem;
    border-radius: var(--radius-lg);
}

.type-group.analyst {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(139, 92, 246, 0.02) 100%);
    border: 2px solid rgba(139, 92, 246, 0.2);
}

.type-group.diplomat {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(6, 182, 212, 0.02) 100%);
    border: 2px solid rgba(6, 182, 212, 0.2);
}

.type-group.sentinel {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
    border: 2px solid rgba(16, 185, 129, 0.2);
}

.type-group.explorer {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.02) 100%);
    border: 2px solid rgba(245, 158, 11, 0.2);
}

.group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-size: var(--text-xl);
}

.group-icon {
    font-size: 1.5rem;
}

/* タイプカード */
.type-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.type-card {
    padding: 1.5rem;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.type-card h4 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-size: var(--text-lg);
}

.type-description {
    margin-bottom: 1rem;
    color: var(--text-muted);
    font-style: italic;
}

.horse-racing-style {
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.horse-racing-style strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.horse-racing-style ul {
    list-style: none;
    padding: 0;
}

.horse-racing-style li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.horse-racing-style li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--purple-primary);
}

/* 設定プロセス */
.setup-process {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.process-step {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-left: 4px solid var(--purple-primary);
    border-radius: var(--radius);
}

.process-step h3 {
    margin-bottom: 0.5rem;
    color: var(--purple-primary);
}

.process-step p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

/* 活用例 */
.usage-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.usage-card {
    padding: 1.5rem;
    background: var(--white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.usage-card h3 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.usage-card p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

/* 上級者向けTips */
.advanced-tips {
    padding: 2rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.advanced-tips h3 {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.tip-card {
    padding: 1rem;
    background: var(--white);
    border-radius: var(--radius);
}

.tip-card h4 {
    margin-bottom: 0.5rem;
    color: var(--purple-primary);
    font-size: var(--text-base);
}

.tip-card p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* まとめセクション */
.guide-summary {
    padding: 2rem;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    color: var(--white);
    border-radius: var(--radius-lg);
    text-align: center;
}

.guide-summary h2 {
    margin-bottom: 1rem;
    color: var(--white);
    border: none;
}

.guide-summary p {
    margin-bottom: 2rem;
    font-size: var(--text-lg);
}

.summary-points {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.summary-point {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.point-icon {
    font-size: 1.5rem;
}

.point-text {
    color: var(--white);
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cta-buttons .btn {
    padding: var(--space-4) var(--space-8);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .guide-nav-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .type-cards {
        grid-template-columns: 1fr;
    }
    
    .step-card {
        flex-direction: column;
        text-align: center;
    }
    
    .summary-points {
        flex-direction: column;
        gap: 1rem;
    }
}

.faq-question:hover {
    background: rgba(103, 98, 166, 0.05);
}

.faq-item.active .faq-question {
    background: rgba(103, 98, 166, 0.1);
}

.question-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--purple-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    margin-right: 1rem;
}

.question-text {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.125rem;
}

.toggle-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: var(--purple-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.faq-item.active .toggle-icon {
    transform: rotate(45deg);
}

/* FAQ回答 */
.faq-answer {
    display: none;
    padding: 0 1.5rem 1.5rem 1.5rem;
    background: var(--white);
}

.answer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--success);
    color: var(--white);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
    margin-right: 1rem;
    float: left;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.answer-text {
    overflow: hidden;
    line-height: 1.7;
    color: var(--text-primary);
    margin-top: 0.25rem;
}

.answer-text p {
    margin-bottom: 1rem;
}

.answer-text p:first-child {
    margin-top: 0.25rem;
}

.answer-text ul,
.answer-text ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.answer-text li {
    margin-bottom: 0.5rem;
}

.answer-text strong {
    color: var(--purple-primary);
    font-weight: 600;
}

.answer-text a {
    color: var(--purple-primary);
    text-decoration: underline;
}

.answer-text a:hover {
    color: var(--purple-dark);
}

/* FAQフッター */
.faq-footer {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid var(--gray-200);
}

.faq-contact {
    background: linear-gradient(135deg, rgba(103, 98, 166, 0.05) 0%, rgba(139, 132, 199, 0.05) 100%);
    border: 1px solid rgba(103, 98, 166, 0.1);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    text-align: center;
}

.contact-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--purple-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.contact-icon {
    font-size: 1.5rem;
}

.contact-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   FAQページのレスポンシブデザイン
   ======================================== */

@media (max-width: 768px) {
    .faq-container {
        padding: 1rem 0.5rem;
    }
    
    .faq-title {
        font-size: 2rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .faq-description {
        font-size: 1rem;
    }
    
    .faq-category {
        padding: 1.5rem 1rem;
    }
    
    .category-title {
        font-size: 1.25rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .faq-question {
        padding: 1rem;
    }
    
    .question-text {
        font-size: 1rem;
    }
    
    .faq-answer {
        padding: 0 1rem 1rem 1rem;
    }
    
    .contact-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .contact-actions .btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .faq-question {
        padding: 0.75rem;
    }
    
    .question-icon,
    .answer-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .toggle-icon {
        width: 20px;
        height: 20px;
        font-size: 1rem;
    }
    
    .question-text {
        font-size: 0.95rem;
    }
    
    .faq-contact {
        padding: 2rem 1rem;
    }
}

/* プロフィール編集フォーム - 不要なフィールドを非表示 */
.swpm-firstname-row,
.swmp-lastname-row,
.swpm-profile-phone-row,
.swpm-profile-street-row,
.swpm-profile-city-row,
.swpm-profile-state-row,
.swpm-profile-zipcode-row,
.swpm-profile-country-row,
.swpm-profile-company-row,
.swpm-profile-membership-level-row,
.swpm-form-wrapper input[name="first_name"],
.swpm-form-wrapper input[name="last_name"],
.swpm-form-wrapper input[name="phone"],
.swpm-form-wrapper input[name="address_street"],
.swpm-form-wrapper input[name="address_city"],
.swpm-form-wrapper input[name="address_state"],
.swpm-form-wrapper input[name="address_zipcode"],
.swpm-form-wrapper select[name="country"],
.swpm-form-wrapper input[name="company_name"],
.swpm-form-wrapper label[for="first_name"],
.swpm-form-wrapper label[for="last_name"],
.swpm-form-wrapper label[for="phone"],
.swpm-form-wrapper label[for="address_street"],
.swpm-form-wrapper label[for="address_city"],
.swpm-form-wrapper label[for="address_state"],
.swpm-form-wrapper label[for="address_zipcode"],
.swpm-form-wrapper label[for="country"],
.swpm-form-wrapper label[for="company_name"],
.swpm-registration-form tr:has(input[name="first_name"]),
.swpm-registration-form tr:has(input[name="last_name"]),
.swpm-edit-profile-form tr:has(input[name="first_name"]),
.swpm-edit-profile-form tr:has(input[name="last_name"]) {
  display: none !important;
}

/* プロフィール編集ページ - デザイン統一 */
.page-membership-profile .card,
.page-membership-profile .profile-form-card,
.page-membership-profile .info-card,
.page-membership-profile .mbti-status-card,
.page-membership-profile .help-card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 2rem !important;
}

.page-membership-profile .card-header,
.page-membership-profile .card-body {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* =================================================================
   FAQページスタイル - サイト統一デザイン
   ================================================================= */

/* FAQ基本スタイル */
.faq-page .faq-container {
    max-width: 100%;
}

.faq-page .faq-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.faq-page .highlight-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* FAQカテゴリタイトル */
.faq-page .faq-category-title {
    color: var(--text-primary);
    font-size: 1.375rem;
    font-weight: 700;
    margin: 2.5rem 0 1.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--purple-primary);
}

/* FAQアイテム */
.faq-page .faq-item {
    margin-bottom: 1rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.faq-page .faq-item:hover {
    border-color: var(--purple-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* FAQ質問部分 */
.faq-page .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    cursor: pointer;
    background: var(--white);
    transition: all 0.2s ease;
    border: none;
    width: 100%;
}

.faq-page .faq-question:hover {
    background: #f8f9ff;
}

.faq-page .faq-item.active .faq-question {
    background: var(--purple-primary);
    color: var(--white);
}

.faq-page .faq-question h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
    flex: 1;
    text-align: left;
}

.faq-page .faq-toggle {
    font-size: 1.25rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    margin-left: 1rem;
}

/* FAQ回答部分 */
.faq-page .faq-answer {
    padding: 1.25rem;
    background: var(--white);
    border-top: 1px solid var(--border-light);
    display: none;
}

.faq-page .faq-answer p {
    margin: 0.75rem 0;
    line-height: 1.6;
    color: var(--text-secondary);
}

.faq-page .faq-answer p:first-child {
    margin-top: 0;
}

.faq-page .faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-page .faq-answer ul,
.faq-page .faq-answer ol {
    margin: 1rem 0;
    padding-left: 1.25rem;
}

.faq-page .faq-answer li {
    margin: 0.5rem 0;
    line-height: 1.5;
    color: var(--text-secondary);
}

.faq-page .faq-answer strong {
    color: var(--text-primary);
    font-weight: 600;
}

.faq-page .faq-answer a {
    color: var(--purple-primary);
    text-decoration: none;
    font-weight: 500;
}

.faq-page .faq-answer a:hover {
    text-decoration: underline;
}

/* FAQ フッターセクション */
.faq-page .faq-contact {
    margin-top: 3rem;
    padding: 2.5rem;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.faq-page .contact-title {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.faq-page .contact-description {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.faq-page .contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.faq-page .contact-actions .btn {
    padding: 0.875rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.faq-page .btn-primary {
    background: var(--purple-primary);
    color: var(--white);
    border: none;
}

.faq-page .btn-primary:hover {
    background: var(--purple-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(103, 98, 166, 0.25);
}

.faq-page .btn-secondary {
    background: var(--white);
    color: var(--purple-primary);
    border: 1px solid var(--purple-primary);
}

.faq-page .btn-secondary:hover {
    background: var(--purple-primary);
    color: var(--white);
}

.faq-page .btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.faq-page .btn-outline:hover {
    background: var(--background-light);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* モバイル対応 */
@media (max-width: 768px) {
    .faq-page .faq-highlights {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .faq-page .highlight-item {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    .faq-page .faq-category-title {
        font-size: 1.25rem;
        margin: 2rem 0 1rem 0;
    }
    
    .faq-page .faq-question {
        padding: 1rem;
    }
    
    .faq-page .faq-question h3 {
        font-size: 0.95rem;
        line-height: 1.4;
    }
    
    .faq-page .faq-answer {
        padding: 1rem;
    }
    
    .faq-page .faq-contact {
        padding: 2rem 1.5rem;
        margin-top: 2rem;
    }
    
    .faq-page .contact-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =================================================================
   サイドバー動的ウィジェットエリア
   ================================================================= */

/* 動的ウィジェットエリア */
.sidebar-dynamic-widgets {
    margin-top: var(--space-6);
}

.dynamic-widget {
    margin-bottom: var(--space-6);
}

.dynamic-widget .widget-title {
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--purple-primary);
    position: relative;
}

.dynamic-widget .widget-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--purple-dark);
}

/* ウィジェット順序の視覚的指標 */
.dmm-widget {
    order: 1;
}

.member-status-widget {
    order: 2;
}

.categories-widget {
    order: 3;
}

.google-widget {
    order: 4;
}

.sidebar-dynamic-widgets {
    order: 5;
}

/* 管理画面でのウィジェット説明 */
.widget-description {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: var(--space-2);
}

/* why-mbtiページ専用ヘッダー - 明るい背景版 */
.why-mbti-header {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--white) 100%);
    color: var(--text-primary);
    padding: var(--space-12) var(--space-8);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--border-light);
}

.why-mbti-header .page-title {
    font-size: var(--text-4xl);
    font-weight: 800;
    margin-bottom: var(--space-6);
    line-height: 1.2;
    color: var(--text-primary) !important;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-mbti-header .page-description {
    font-size: var(--text-lg);
    line-height: 1.6;
    margin-bottom: var(--space-8);
    color: var(--text-secondary) !important;
}

.why-mbti-header .page-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.why-mbti-header .btn-large {
    padding: var(--space-5) var(--space-8);
    font-size: var(--text-lg);
    font-weight: 700;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    display: inline-block;
    box-shadow: var(--shadow-md);
}

.why-mbti-header .btn-primary {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-hover) 100%) !important;
    color: var(--white) !important;
    border-color: transparent;
}

.why-mbti-header .btn-primary:hover {
    background: linear-gradient(135deg, var(--purple-hover) 0%, var(--purple-dark) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(103, 98, 166, 0.4);
}

.why-mbti-header .btn-secondary {
    background: var(--white) !important;
    color: var(--purple-primary) !important;
    border-color: var(--purple-primary);
}

.why-mbti-header .btn-secondary:hover {
    background: var(--purple-primary) !important;
    color: var(--white) !important;
    transform: translateY(-2px);
}

/* コンテンツセクション - UX改善版 */
.content-section {
    margin-bottom: var(--space-16);
    padding: var(--space-10) 0;
    position: relative;
}

.content-section:not(:last-child) {
    border-bottom: 2px solid var(--border-light);
}

/* ===== 統一されたセクションタイトル（推奨使用） ===== */
.section-title {
    /* 基本スタイル */
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--space-6);
    
    /* レスポンシブ対応 */
    line-height: 1.2;
    
    /* 汎用性のための基本設定 */
    display: block;
    width: 100%;
}

/* ヒーロータイトル（特大サイズ） */
.section-title--hero {
    font-size: var(--text-4xl);
    font-weight: 800;
    margin-bottom: var(--space-8);
    position: relative;
}

/* 装飾付きタイトル */
.section-title--decorated {
    position: relative;
}

/* 装飾アンダーライン */
.section-title--decorated::after,
.section-title--hero::after {
    content: '';
    position: absolute;
    bottom: -var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, var(--purple-primary), var(--purple-hover));
    border-radius: var(--radius-full);
}

.section-intro {
    font-size: var(--text-xl);
    color: var(--text-secondary) !important;
    text-align: center;
    margin-bottom: var(--space-10);
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 一般的なボタンスタイル統一 */
.btn {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.btn-large {
    padding: var(--space-5) var(--space-8);
    font-size: var(--text-lg);
    font-weight: 700;
}

.btn-primary {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-hover) 100%) !important;
    color: var(--white) !important;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(103, 98, 166, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--purple-hover) 0%, var(--purple-dark) 100%) !important;
    color: var(--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(103, 98, 166, 0.4);
}

.btn-secondary {
    background: var(--white) !important;
    color: var(--purple-primary) !important;
    border-color: var(--purple-primary);
    box-shadow: 0 2px 10px rgba(103, 98, 166, 0.15);
}

.btn-secondary:hover {
    background: var(--purple-primary) !important;
    color: var(--white) !important;
    border-color: var(--purple-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(103, 98, 166, 0.3);
}

/* 最終CTA - UX修正版 */
.final-cta {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-hover) 100%);
    color: var(--white) !important;
    padding: var(--space-12);
    border-radius: var(--radius-2xl);
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.final-cta-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-8);
    color: var(--white) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.cta-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.cta-feature:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.cta-feature-icon {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-2);
    color: var(--white) !important;
}

.cta-feature strong {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-1);
    color: var(--white) !important;
}

.cta-feature span {
    font-size: var(--text-sm);
    color: var(--white) !important;
    opacity: 0.9;
}

/* 最終CTA内のボタン統一 */
.final-cta .btn {
    padding: var(--space-5) var(--space-10);
    font-size: var(--text-xl);
    font-weight: 700;
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    border: 3px solid transparent;
    position: relative;
    z-index: 1;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.final-cta .btn-primary {
    background: var(--white) !important;
    color: var(--purple-primary) !important;
    border-color: var(--white);
}

.final-cta .btn-primary:hover {
    background: var(--gray-100) !important;
    color: var(--purple-dark) !important;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

/* 強みセクション */
.strengths-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.strength-card {
    background: var(--bg-primary);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.strength-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.strength-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.strength-content {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 重要性セクション - UX修正版 */
.importance-section {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-hover) 100%);
    color: var(--white) !important;
    padding: var(--space-10);
    border-radius: var(--radius-xl);
    margin: var(--space-8) 0;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.importance-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-6);
    color: var(--white) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.importance-text {
    font-size: var(--text-lg);
    line-height: 1.6;
    margin-bottom: var(--space-8);
    color: var(--white) !important;
    opacity: 0.95;
}

.industry-first {
    background: rgba(255, 255, 255, 0.15);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-8);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.industry-first-title {
    display: block;
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--white) !important;
}

.industry-first-sub {
    font-size: var(--text-base);
    color: var(--white) !important;
    opacity: 0.9;
}

/* 重要性セクション内のボタン統一 */
.importance-section .btn {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
    font-weight: 600;
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    border: 2px solid transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.importance-section .btn-primary {
    background: var(--white) !important;
    color: var(--purple-primary) !important;
    border-color: var(--white);
}

.importance-section .btn-primary:hover {
    background: var(--gray-100) !important;
    color: var(--purple-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.importance-section .btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--white) !important;
    border-color: rgba(255, 255, 255, 0.3);
}

.importance-section .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* モバイル対応 - UX改善版 */
@media (max-width: 768px) {
    .why-mbti-header {
        padding: var(--space-8) var(--space-6);
        margin-bottom: var(--space-6);
    }
    
    .why-mbti-header .page-title {
        font-size: var(--text-3xl);
        margin-bottom: var(--space-4);
    }
    
    .why-mbti-header .page-description {
        font-size: var(--text-base);
        margin-bottom: var(--space-6);
    }
    
    .why-mbti-header .page-actions {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .why-mbti-header .btn-large {
        width: 100%;
        padding: var(--space-4) var(--space-6);
        font-size: var(--text-base);
    }
    
    .section-title {
        font-size: var(--text-3xl);
        margin-bottom: var(--space-6);
    }
    
    .section-intro {
        font-size: var(--text-lg);
        margin-bottom: var(--space-8);
        padding: 0 var(--space-4);
    }
    
    .content-section {
        padding: var(--space-8) 0;
        margin-bottom: var(--space-12);
    }
    
    .importance-section {
        padding: var(--space-8) var(--space-6);
        margin: var(--space-6) 0;
    }
    
    .importance-title {
        font-size: var(--text-xl);
    }
    
    .importance-text {
        font-size: var(--text-base);
    }
    
    .industry-first {
        padding: var(--space-6);
    }
    
    .industry-first-title {
        font-size: var(--text-lg);
    }
    
    .cta-features {
        flex-direction: column;
        gap: var(--space-4);
        margin-bottom: var(--space-8);
    }
    
    .cta-feature {
        padding: var(--space-6);
    }
    
    .cta-feature-icon {
        font-size: var(--text-3xl);
    }
    
    .strengths-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .final-cta {
        padding: var(--space-10) var(--space-6);
    }
    
    .final-cta-title {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-6);
    }
    
    .final-cta .btn {
        padding: var(--space-4) var(--space-6);
        font-size: var(--text-lg);
        width: 100%;
        max-width: 320px;
    }
}

/* why-mbtiページ追加スタイル改良 */

/* 比較グリッドの改善 - 適切なコントラスト */
.comparison-card.problem .card-title.problem-title {
    color: #dc2626 !important; /* 赤背景に濃い赤文字 */
    font-weight: 700;
}

.comparison-card.solution .card-title.solution-title {
    color: #16a34a !important; /* 緑背景に濃い緑文字 */
    font-weight: 700;
}

.comparison-card.problem .problem-list li,
.comparison-card.solution .solution-list li {
    color: var(--text-primary) !important; /* 明るい背景に濃い文字 */
    font-weight: 500;
}

/* 性格タイプカードグリッドの強化 - 適切なコントラスト */
.mbti-card {
    background: var(--white) !important;
    border: 2px solid var(--border-light);
    transition: all 0.3s ease;
}

.mbti-card:hover {
    border-color: var(--purple-primary);
    box-shadow: 0 8px 30px rgba(103, 98, 166, 0.15);
}

.mbti-card.analyst {
    border-left: 6px solid var(--analysts);
    background: linear-gradient(145deg, #faf5ff 0%, var(--white) 100%) !important;
}

.mbti-card.diplomat {
    border-left: 6px solid var(--diplomats);
    background: linear-gradient(145deg, #f0fdfa 0%, var(--white) 100%) !important;
}

.mbti-card.sentinel {
    border-left: 6px solid var(--sentinels);
    background: linear-gradient(145deg, #f0fdf4 0%, var(--white) 100%) !important;
}

.mbti-card.explorer {
    border-left: 6px solid var(--explorers);
    background: linear-gradient(145deg, #fffbeb 0%, var(--white) 100%) !important;
}

.mbti-card-icon {
    color: var(--text-primary) !important;
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
}

.mbti-card-title {
    color: var(--text-primary) !important;
    font-size: var(--text-xl);
    font-weight: 800;
    margin-bottom: var(--space-3);
}

.mbti-card-subtitle {
    color: var(--text-secondary) !important;
    font-size: var(--text-base);
    font-weight: 500;
    margin-bottom: var(--space-6);
}

.mbti-card-content {
    color: var(--text-primary) !important;
    text-align: left;
}

.mbti-card-content strong {
    color: var(--text-primary) !important;
    font-weight: 700;
    display: block;
    margin-bottom: var(--space-4);
}

.mbti-card-content ul {
    list-style: none;
    padding: 0;
}

.mbti-card-content ul li {
    color: var(--text-secondary) !important;
    padding: var(--space-2) 0;
    position: relative;
    padding-left: var(--space-6);
}

.mbti-card-content ul li:before {
    content: '✓';
    position: absolute;
    left: 0;
    top: var(--space-2);
    color: var(--purple-primary);
    font-weight: 700;
}

.mbti-card-types {
    color: var(--text-muted) !important;
    font-size: var(--text-sm);
    font-weight: 600;
    background: var(--bg-secondary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    margin-top: var(--space-4);
    text-align: center;
}

/* サイドバーウィジェットの改善 */
.sidebar-widget .widget-title {
    color: var(--text-primary) !important;
    font-size: var(--text-lg);
    font-weight: 700;
}

.sidebar-widget .widget-icon {
    color: var(--purple-primary) !important;
}

.stat-number {
    color: var(--purple-primary) !important;
    font-size: var(--text-2xl);
    font-weight: 800;
}

.stat-label {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.stat-detail {
    color: var(--text-secondary) !important;
    font-size: var(--text-sm);
}

.timeline-item strong {
    color: var(--purple-primary) !important;
    font-weight: 700;
}

.timeline-item p {
    color: var(--text-secondary) !important;
}

/* CTA Widget内のボタン */
.cta-widget .btn-primary {
    width: 100%;
    text-align: center;
}

/* フォーカス対応とアクセシビリティ改善 */
.btn:focus,
.btn:focus-visible {
    outline: 3px solid rgba(103, 98, 166, 0.5);
    outline-offset: 2px;
}

/* テキストの可読性向上 */
.importance-section,
.final-cta,
.why-mbti-header {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* スクロール時のスムーズな動作 */
html {
    scroll-behavior: smooth;
}

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
    .importance-section,
    .final-cta,
    .why-mbti-header {
        background: var(--gray-900) !important;
        color: var(--white) !important;
    }
    
    .btn-primary {
        background: var(--white) !important;
        color: var(--gray-900) !important;
        border: 3px solid var(--gray-900) !important;
    }


/* ===============================================
 * 認証フォーム（会員登録・ログイン）- リニューアル版
 * =============================================== */

/* 認証ページ共通コンテナ */
.auth-container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

/* 認証フォームセクション - 単一レイアウト用 */
.auth-form-section.register-only,
.auth-form-section.login-only {
    max-width: 500px;
    margin: 0 auto var(--space-6);
    min-height: auto;
    height: auto;
    text-align: center;
    padding: var(--space-8);
}

/* フォーム見出し */
.auth-form-section.register-only h3,
.auth-form-section.login-only h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    text-align: center;
}

/* フォーム説明文 */
.auth-form-section.register-only p,
.auth-form-section.login-only p {
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.6;
    margin-bottom: var(--space-6);
    text-align: center;
}

/* フォーム入力フィールド - より具体的なセレクタで上書き */
.auth-form-section.register-only input[type="text"],
.auth-form-section.register-only input[type="email"],
.auth-form-section.register-only input[type="password"],
.auth-form-section.login-only input[type="text"],
.auth-form-section.login-only input[type="email"],
.auth-form-section.login-only input[type="password"] {
    width: 100%;
    max-width: none;
    padding: var(--space-4);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: var(--text-base);
    transition: all var(--transition);
    background: var(--white);
    box-sizing: border-box;
    font-family: inherit;
    margin-bottom: var(--space-3);
}

/* 送信ボタン - より具体的なセレクタで上書き */
.auth-form-section.register-only input[type="submit"],
.auth-form-section.register-only button[type="submit"],
.auth-form-section.login-only input[type="submit"],
.auth-form-section.login-only button[type="submit"] {
    width: 100%;
    background: var(--purple-primary);
    color: var(--white);
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-lg);
    font-weight: 600;
    border: 2px solid var(--purple-primary);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    margin-top: var(--space-4);
    box-shadow: none;
    transform: none;
}

.auth-form-section.register-only input[type="submit"]:hover,
.auth-form-section.register-only button[type="submit"]:hover,
.auth-form-section.login-only input[type="submit"]:hover,
.auth-form-section.login-only button[type="submit"]:hover {
    background: var(--purple-dark);
    border-color: var(--purple-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* フォームテーブルレイアウト調整 */
.auth-form-section.register-only table,
.auth-form-section.login-only table {
    width: 100%;
    margin: var(--space-4) 0;
    text-align: left;
}

.auth-form-section.register-only td,
.auth-form-section.login-only td {
    padding: var(--space-2) 0;
}

/* リンクセクション */
.register-links,
.login-links {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-200);
    text-align: center;
}

.register-links p,
.login-links p {
    margin-bottom: 0;
    color: var(--text-secondary);
}

.register-links a,
.login-links a {
    color: var(--purple-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition);
}

.register-links a:hover,
.login-links a:hover {
    color: var(--purple-dark);
    text-decoration: underline;
}

/* ログイン後の案内 */
.login-benefits {
    max-width: 800px;
    margin: var(--space-8) auto;
    padding: var(--space-6) var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.login-benefits h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--space-6);
}

/* メンバーシップ特典とログイン特典のグリッド共通スタイル */
.membership-benefits .benefits-grid,
.login-benefits .benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.membership-benefits .benefit-item,
.login-benefits .benefit-item {
    background: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--gray-200);
    transition: all var(--transition);
}

.membership-benefits .benefit-item:hover,
.login-benefits .benefit-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.membership-benefits .benefit-icon,
.login-benefits .benefit-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
    display: block;
}

.membership-benefits .benefit-item h4,
.login-benefits .benefit-item h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.membership-benefits .benefit-item p,
.login-benefits .benefit-item p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .auth-container {
        padding: var(--space-4) var(--space-3);
    }
    
    .auth-form-section.register-only,
    .auth-form-section.login-only {
        padding: var(--space-6);
        margin-bottom: var(--space-4);
    }
    
    .membership-benefits .benefits-grid,
    .login-benefits .benefits-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* ===== セクションタイトル - レスポンシブ対応 ===== */
@media (max-width: 768px) {
    .section-title {
        font-size: var(--text-xl);
    }
    
    .section-title--hero {
        font-size: var(--text-3xl);
    }
    
    .section-title--large {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-8);
    }
    
    .section-title--medium {
        font-size: var(--text-lg);
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: var(--text-lg);
        margin-bottom: var(--space-4);
    }
    
    .section-title--hero {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-6);
    }
    
    .section-title--large {
        font-size: var(--text-xl);
    }
    
    .section-title--small,
    .section-title--medium {
        font-size: var(--text-base);
    }
}

/* ===== 記事詳細ページのリスト・マーカー完全削除 ===== */
/* ulとliの・を確実に削除する最も効果的な方法 */
.single .article-text ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
}

.single .article-text li {
    display: block !important;
    list-style: none !important;
    list-style-type: none !important;
    margin-bottom: 0.5rem !important;
}

/* Firefox対応 */
.single .article-text li::-moz-list-bullet {
    display: none !important;
}

/* Chrome/Safari対応 - markerを透明化 */
.single .article-text li::marker {
    color: transparent !important;
    font-size: 0 !important;
}

/* Markdownから変換された段落のスタイル */
.single .article-text .markdown-single-item,
.single .article-text .markdown-converted-item {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* 性格タイプ別アイコンも削除 - シンプルに・だけを削除 */

/* スマホ対応 */
@media (max-width: 768px) {
    .single .article-text li {
        padding-left: 0 !important;
        font-size: 0.95rem;
    }
}

/* サイドバー専用のリスト装飾（影響なし） */
.mbti-sidebar-tip {
    position: relative;
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--bg-soft);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--purple-primary);
}

.mbti-sidebar-tip strong {
    color: var(--purple-primary);
    display: block;
    margin-bottom: var(--space-1);
}

.mbti-sidebar-tip br {
    line-height: 1.8;
}

/* ===== マイダッシュボード - MBTI専用情報セクション ===== */
.jikuma-mbti-specialized-section {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: var(--space-8);
    margin-top: var(--space-6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

/* PC用のコンパクト化 */
@media (min-width: 1024px) {
    .jikuma-mbti-specialized-section {
        padding: var(--space-6);
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }
}

.jikuma-mbti-specialized-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--purple-primary), var(--jikuma-primary));
}

.jikuma-mbti-dashboard-content {
    background: var(--bg-primary);
    border-radius: 10px;
    padding: var(--space-6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mbti-dashboard-specialized-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

/* PC用の横長レイアウト */
@media (min-width: 1024px) {
    .mbti-dashboard-specialized-content {
        display: grid;
        grid-template-columns: 300px 1fr 250px;
        grid-template-rows: auto;
        gap: var(--space-5);
        align-items: start;
    }
    
    .mbti-dashboard-header {
        grid-column: 1 / -1;
        text-align: left;
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-3);
    }
    
    .mbti-dashboard-header::after {
        left: 0;
        transform: none;
        width: 80px;
    }
    
    .mbti-dashboard-title {
        justify-content: flex-start;
        font-size: var(--text-xl);
        font-weight: 700;
    }
}

.mbti-dashboard-header {
    text-align: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--border-light);
    position: relative;
}

.mbti-dashboard-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--purple-primary);
    border-radius: 1px;
}

.mbti-dashboard-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--purple-primary);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.mbti-dashboard-tips {
    margin-bottom: var(--space-6);
    display: grid;
    gap: var(--space-3);
}

/* PC用のTips横長レイアウト */
@media (min-width: 1024px) {
    .mbti-dashboard-tips {
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        grid-column: 1 / 3; /* ヘッダー下の2カラム分を使用 */
    }
    
    .mbti-dashboard-tip {
        padding: var(--space-3);
        font-size: var(--text-sm);
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-height: 50px;
    }
    
    .mbti-dashboard-tip strong {
        min-width: 120px;
        flex-shrink: 0;
    }
    
    .mbti-dashboard-action {
        grid-column: 3;
        align-self: start;
        margin: 0;
        max-width: 250px;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
    }
    
    .mbti-dashboard-action::before {
        height: 2px;
    }
    
    /* PC用のアクション強調デザイン */
    .mbti-action-header {
        font-size: var(--text-sm);
        margin-bottom: var(--space-2);
    }
    
    .mbti-action-content {
        font-size: var(--text-base);
        padding: var(--space-2);
        text-align: center;
        border-radius: 8px;
    }
}

.mbti-dashboard-tip {
    background: var(--bg-secondary) !important;
    padding: var(--space-4) !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--purple-primary) !important;
    line-height: 1.6 !important;
    font-size: var(--text-sm) !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    
    /* テスト用 - 絶対に見えるスタイル */
    border: 5px solid red !important;
    background: yellow !important;
}

/* 更にテスト用の追加スタイル */
div[class*="mbti-dashboard-tip"] {
    border: 10px solid blue !important;
    background: lime !important;
    color: black !important;
}

/* 大きなコンテナをテスト */
.jikuma-mbti-specialized-section {
    border: 15px solid purple !important;
    background: orange !important;
}

.jikuma-mbti-dashboard-content {
    border: 10px solid green !important;
    background: pink !important;
}

.mbti-dashboard-tip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.mbti-dashboard-tip:last-child {
    margin-bottom: 0;
}

.mbti-dashboard-tip strong {
    color: var(--text-primary);
    font-weight: 600;
}

.mbti-dashboard-action {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    padding: var(--space-5);
    border-radius: 10px;
    border: 2px solid var(--border-light);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mbti-dashboard-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--warning), var(--jikuma-primary));
}

.mbti-action-header {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--warning);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.mbti-action-content {
    font-size: var(--text-lg);
    color: var(--text-primary);
    font-weight: 600;
    background: var(--bg-primary);
    padding: var(--space-3);
    border-radius: 6px;
    border: 1px solid var(--border-light);
}

/* グループ別カラーカスタマイズ */
.mbti-analyst-content .mbti-dashboard-tip {
    border-left-color: var(--analysts);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(133, 94, 194, 0.05) 100%);
}

.mbti-analyst-content .jikuma-mbti-specialized-section::before {
    background: linear-gradient(90deg, var(--analysts), var(--purple-primary));
}

.mbti-diplomat-content .mbti-dashboard-tip {
    border-left-color: var(--diplomats);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(51, 168, 120, 0.05) 100%);
}

.mbti-diplomat-content .jikuma-mbti-specialized-section::before {
    background: linear-gradient(90deg, var(--diplomats), var(--success));
}

.mbti-sentinel-content .mbti-dashboard-tip {
    border-left-color: var(--sentinels);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(72, 126, 176, 0.05) 100%);
}

.mbti-sentinel-content .jikuma-mbti-specialized-section::before {
    background: linear-gradient(90deg, var(--sentinels), var(--info));
}

.mbti-explorer-content .mbti-dashboard-tip {
    border-left-color: var(--explorers);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(245, 181, 61, 0.05) 100%);
}

.mbti-explorer-content .jikuma-mbti-specialized-section::before {
    background: linear-gradient(90deg, var(--explorers), var(--warning));
}

/* ダッシュボードフォールバック */
.mbti-dashboard-fallback {
    background: var(--bg-secondary);
    border-radius: 6px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* モバイル対応 */
@media (max-width: 768px) {
    /* MBTI ダッシュボード モバイル対応 */
    .jikuma-mbti-specialized-section {
        padding: var(--space-4);
        margin-top: var(--space-4);
        border-radius: 8px;
    }
    
    .jikuma-mbti-dashboard-content {
        padding: var(--space-4);
    }
    
    .mbti-dashboard-title {
        font-size: var(--text-xl);
        flex-direction: column;
        gap: var(--space-1);
    }
    
    .mbti-dashboard-tips {
        gap: var(--space-2);
    }
    
    .mbti-dashboard-tip {
        padding: var(--space-3);
        font-size: var(--text-xs);
    }
    
    .mbti-dashboard-action {
        padding: var(--space-4);
    }
    
    .mbti-action-content {
        font-size: var(--text-base);
        padding: var(--space-2);
    }
}

/* ===== プロフィール編集ページ ===== */
/* Simple Membership フォームスタイル */
.swpm-edit-profile-form {
    background: var(--bg-primary);
    border-radius: 8px;
    padding: var(--space-6);
}

.swpm-edit-profile-form table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 var(--space-3);
}

.swpm-edit-profile-form td {
    padding: var(--space-2);
}

.swpm-edit-profile-form td:first-child {
    width: 180px;
    font-weight: 600;
    color: var(--text-primary);
}

.swpm-edit-profile-form input[type="text"],
.swpm-edit-profile-form input[type="email"],
.swpm-edit-profile-form input[type="password"],
.swpm-edit-profile-form select {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: var(--text-base);
    background: var(--bg-primary);
    transition: all 0.2s ease;
}

.swpm-edit-profile-form input:focus,
.swpm-edit-profile-form select:focus {
    outline: none;
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px rgba(103, 98, 166, 0.1);
}

.swpm-edit-profile-submit {
    background: var(--purple-primary);
    color: white;
    padding: var(--space-3) var(--space-6);
    border: none;
    border-radius: 6px;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.swpm-edit-profile-submit:hover {
    background: var(--purple-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.swpm-edit-profile-submit-section {
    text-align: center;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
}

/* カードレイアウト */
.card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: var(--space-6);
    overflow: hidden;
}

.card-header {
    background: var(--bg-secondary);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.card-body {
    padding: var(--space-5);
}

/* 情報カード */
.info-card .info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.info-list li:last-child {
    border-bottom: none;
}

.info-list a {
    color: var(--purple-primary);
    text-decoration: none;
}

.info-list a:hover {
    text-decoration: underline;
}

/* MBTI ステータスカード */
.mbti-status-info {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
}

.status-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.status-value {
    color: var(--text-primary);
}

.mbti-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--diplomats);
    color: white;
    border-radius: 20px;
    font-size: var(--text-sm);
    font-weight: 600;
}

.mbti-current-info h4 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mbti-details {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.mbti-details p {
    margin: var(--space-2) 0;
    color: var(--text-secondary);
}

.mbti-details strong {
    color: var(--text-primary);
}

.mbti-actions {
    text-align: center;
}

/* 設定グリッド */
.other-settings-section {
    margin-top: var(--space-8);
}

.section-subtitle {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.setting-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.setting-card:hover {
    border-color: var(--purple-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.setting-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.setting-content {
    flex: 1;
}

.setting-content h4 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.setting-content p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

.setting-arrow {
    color: var(--text-secondary);
    font-size: var(--text-lg);
}

/* ヘルプカード */
.help-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    margin-top: var(--space-8);
}

.help-content {
    text-align: center;
}

.help-content h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.help-content p {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.help-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

/* ボタンスタイル */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.btn-secondary:hover {
    background: var(--bg-primary);
    border-color: var(--purple-primary);
}

.btn-outline {
    background: transparent;
    color: var(--purple-primary);
    border: 1px solid var(--purple-primary);
}

.btn-outline:hover {
    background: var(--purple-primary);
    color: white;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .swpm-edit-profile-form td:first-child {
        display: block;
        width: 100%;
        margin-bottom: var(--space-1);
    }
    
    .swpm-edit-profile-form td {
        display: block;
        width: 100%;
    }
    
    .settings-grid {
        grid-template-columns: 1fr;
    }
    
    .help-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
}