/**
 * 恋愛タイプ診断サイト - スタイルシート
 * downtown-info設計準拠
 */

/* ============================================
   CSS変数（:root）
   ============================================ */
:root {
    /* テーマカラー（config.phpから動的注入可能） */
    --primary-color: #e91e63;
    --secondary-color: #f48fb1;
    --accent-color: #c2185b;

    /* 共通カラー */
    --text-color: #333;
    --text-light: #666;
    --text-muted: #999;
    --bg-color: #fff;
    --bg-light: #f8f9fa;
    --bg-dark: #1a1a1a;
    --border-color: #e0e0e0;

    /* セマンティックカラー */
    --success-color: #22c55e;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;

    /* 診断カテゴリカラー */
    --love-color: #ec4899;
    --cognitive-color: #3b82f6;
    --work-color: #22c55e;
    --relation-color: #f59e0b;

    /* シャドウ */
    --card-shadow: 0 2px 8px rgba(0,0,0,0.1);
    --card-shadow-hover: 0 4px 16px rgba(0,0,0,0.15);

    /* フォント */
    --font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;

    /* スペーシング */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* ボーダー */
    --border-radius: 8px;
    --border-radius-lg: 16px;

    /* トランジション */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;

    /* レイアウト */
    --container-max: 1200px;
    --sidebar-width: 300px;

    /* 16タイプ別カラー */
    --type-intj: #7c3aed;
    --type-intp: #8b5cf6;
    --type-entj: #6d28d9;
    --type-entp: #a78bfa;
    --type-infj: #059669;
    --type-infp: #10b981;
    --type-enfj: #047857;
    --type-enfp: #34d399;
    --type-istj: #1d4ed8;
    --type-isfj: #3b82f6;
    --type-estj: #1e40af;
    --type-esfj: #60a5fa;
    --type-istp: #d97706;
    --type-isfp: #f59e0b;
    --type-estp: #b45309;
    --type-esfp: #fbbf24;
}

/* ============================================
   リセット・ベース
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: var(--bg-light);
    line-height: 1.6;
    min-height: 100vh;
}

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

a:hover {
    color: var(--accent-color);
}

img {
    max-width: 100%;
    height: auto;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul, ol {
    list-style: none;
}

/* ============================================
   コンテナ
   ============================================ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ============================================
   ヘッダー
   ============================================ */
.header {
    background: var(--bg-color);
    box-shadow: var(--card-shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.site-logo a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary-color);
}

.site-logo .material-icons {
    font-size: 28px;
}

.main-nav {
    display: flex;
    gap: var(--spacing-md);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-color);
    border-radius: var(--border-radius);
    transition: background-color var(--transition-fast);
}

.nav-link:hover {
    background-color: var(--bg-light);
    color: var(--primary-color);
}

.nav-link .material-icons {
    font-size: 20px;
}

.mobile-menu-toggle {
    display: none;
    padding: var(--spacing-sm);
    color: var(--text-color);
}

/* モバイルナビ */
.mobile-nav {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--bg-color);
    box-shadow: var(--card-shadow);
    z-index: 99;
}

.mobile-nav.active {
    display: block;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

/* ============================================
   メインコンテンツ
   ============================================ */
.main-content {
    min-height: calc(100vh - 200px);
}

.page-container {
    display: flex;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl) 0;
}

.content-main {
    flex: 1;
    min-width: 0;
}

/* ============================================
   サイドバー
   ============================================ */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
}

.widget {
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--card-shadow);
}

.widget-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--text-color);
}

.widget-title .material-icons {
    color: var(--primary-color);
    font-size: 20px;
}

.popular-list li,
.diagnosis-list li {
    border-bottom: 1px solid var(--border-color);
}

.popular-list li:last-child,
.diagnosis-list li:last-child {
    border-bottom: none;
}

.popular-list a,
.diagnosis-list a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    color: var(--text-color);
}

.popular-list a:hover,
.diagnosis-list a:hover {
    color: var(--primary-color);
}

.diagnosis-list .material-icons {
    font-size: 18px;
    color: var(--text-muted);
}

/* ============================================
   広告コンテナ
   ============================================ */
.ad-container {
    margin: var(--spacing-lg) 0;
    text-align: center;
}

.ad-slot {
    display: inline-block;
    position: relative;
    background: var(--bg-light);
    border-radius: var(--border-radius);
}

.ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
}

/* サイズ別設定 */
.ad-top-banner .ad-slot,
.ad-top-banner .ad-placeholder,
.ad-bottom-banner .ad-slot,
.ad-bottom-banner .ad-placeholder {
    width: 728px;
    height: 90px;
    max-width: 100%;
}

.ad-sidebar .ad-slot,
.ad-sidebar .ad-placeholder,
.ad-result-mid .ad-slot,
.ad-result-mid .ad-placeholder {
    width: 300px;
    height: 250px;
}

.ad-mobile-banner .ad-slot,
.ad-mobile-banner .ad-placeholder {
    width: 320px;
    height: 50px;
}

/* モバイル固定広告 */
.ad-mobile-sticky {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-color);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: var(--spacing-sm);
}

.ad-close-btn {
    position: absolute;
    top: -24px;
    right: var(--spacing-sm);
    width: 24px;
    height: 24px;
    background: var(--bg-dark);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-close-btn .material-icons {
    font-size: 16px;
}

/* ============================================
   アフィリエイトウィジェット
   ============================================ */
.affiliate-widget {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: #fff;
}

.affiliate-widget .widget-title {
    color: #fff;
}

.affiliate-widget .widget-title .material-icons {
    color: #fff;
}

.affiliate-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.affiliate-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(255,255,255,0.15);
    border-radius: var(--border-radius);
    color: #fff;
    transition: background-color var(--transition-fast);
}

.affiliate-item:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.affiliate-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.pairs-icon { background: #ff6b6b; }
.with-icon { background: #845ef7; }
.tapple-icon { background: #ff922b; }

.affiliate-info {
    display: flex;
    flex-direction: column;
}

.affiliate-name {
    font-weight: 600;
}

.affiliate-desc {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

.affiliate-note {
    font-size: 11px;
    opacity: 0.7;
    margin-top: var(--spacing-sm);
}

/* 書籍アフィリエイト */
.books-widget {
    background: var(--bg-color);
    color: var(--text-color);
}

.books-widget .widget-title {
    color: var(--text-color);
}

.books-widget .widget-title .material-icons {
    color: var(--primary-color);
}

.affiliate-books {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.book-item {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color);
}

.book-item:hover {
    border-color: var(--primary-color);
}

.book-cover {
    width: 50px;
    height: 70px;
    background: var(--bg-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.book-cover .material-icons {
    font-size: 24px;
    color: var(--text-muted);
}

.book-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.book-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.book-author {
    font-size: 12px;
    color: var(--text-muted);
}

.affiliate-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--bg-light);
    border-radius: var(--border-radius);
    color: var(--text-color);
    font-size: var(--font-size-sm);
}

.affiliate-more .material-icons {
    font-size: 16px;
}

/* ============================================
   診断UI
   ============================================ */
.diagnosis-container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-xl);
}

.diagnosis-progress {
    margin-bottom: var(--spacing-xl);
}

.progress-bar {
    height: 8px;
    background: var(--bg-light);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    transition: width var(--transition-normal);
}

.progress-text {
    text-align: center;
    margin-top: var(--spacing-sm);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.question-card {
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--card-shadow);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.question-text {
    font-size: var(--font-size-xl);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--text-color);
}

.answer-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.answer-btn {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-light);
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    text-align: center;
    transition: all var(--transition-fast);
}

.answer-btn:hover {
    border-color: var(--primary-color);
    background: #fff;
}

.answer-btn:active {
    transform: scale(0.98);
}

/* ローディング */
.diagnosis-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--bg-light);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   結果カード
   ============================================ */
.result-card {
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.result-header {
    background: linear-gradient(135deg, var(--type-color, var(--primary-color)) 0%, var(--accent-color) 100%);
    color: #fff;
    padding: var(--spacing-xl);
    text-align: center;
}

.result-type-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.result-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.result-image {
    padding: var(--spacing-lg);
    text-align: center;
}

.result-image img {
    max-width: 100%;
    border-radius: var(--border-radius);
}

.result-description,
.result-traits,
.result-strengths,
.result-weaknesses {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.result-traits h3,
.result-strengths h3,
.result-weaknesses h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-md);
}

.result-traits .material-icons { color: var(--primary-color); }
.result-strengths .material-icons { color: #f59e0b; }
.result-weaknesses .material-icons { color: #ef4444; }

.result-traits ul,
.result-strengths ul,
.result-weaknesses ul {
    padding-left: var(--spacing-lg);
    list-style: disc;
}

.result-traits li,
.result-strengths li,
.result-weaknesses li {
    margin-bottom: var(--spacing-sm);
}

/* 相性セクション */
.compatibility-section {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.compatibility-section h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.compatibility-section .material-icons {
    color: var(--primary-color);
}

.compatibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-sm);
}

.compatibility-card {
    background: var(--bg-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.2s;
}

.compatibility-card:hover {
    box-shadow: var(--card-shadow-hover);
}

.compat-type {
    display: block;
    font-weight: 700;
    color: var(--type-color, var(--primary-color));
}

.compat-name {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.compat-score {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ============================================
   シェアボタン
   ============================================ */
.share-buttons {
    padding: var(--spacing-lg);
    text-align: center;
}

.share-title {
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.share-buttons-inner {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.share-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: transform var(--transition-fast);
}

.share-btn:hover {
    transform: translateY(-2px);
}

.share-x {
    background: #000;
    color: #fff;
}

.share-line {
    background: #00b900;
    color: #fff;
}

.share-copy {
    background: var(--bg-light);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.share-buttons-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.share-buttons-sidebar .share-btn {
    justify-content: center;
}

/* ============================================
   トースト通知
   ============================================ */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-dark);
    color: #fff;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    opacity: 0;
    transition: all var(--transition-normal);
    z-index: 2000;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ============================================
   リワード広告オーバーレイ
   ============================================ */
.rewarded-video-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rewarded-video-content {
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-2xl);
    text-align: center;
    max-width: 400px;
}

.rewarded-video-content h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
}

.rewarded-video-content p {
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
}

.rewarded-video-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md);
    background: var(--primary-color);
    color: #fff;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.skip-btn {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* ============================================
   フッター
   ============================================ */
.footer {
    background: var(--bg-dark);
    color: #fff;
    padding: var(--spacing-2xl) 0;
    margin-top: var(--spacing-2xl);
}

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

.footer-logo {
    margin-bottom: var(--spacing-lg);
}

.footer-logo a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: #fff;
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.footer-links a {
    color: rgba(255,255,255,0.7);
    font-size: var(--font-size-sm);
}

.footer-links a:hover {
    color: #fff;
}

.footer-disclaimer {
    max-width: 600px;
    margin: 0 auto var(--spacing-lg);
    color: rgba(255,255,255,0.5);
    font-size: 12px;
}

.footer-copyright {
    color: rgba(255,255,255,0.5);
    font-size: var(--font-size-sm);
}

/* ============================================
   トップページ
   ============================================ */
.hero-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: #fff;
    padding: var(--spacing-2xl) 0;
    text-align: center;
}

.hero-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.hero-description {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

.diagnosis-menu {
    padding: var(--spacing-xl) 0;
}

.diagnosis-card {
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: all var(--transition-normal);
}

.diagnosis-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

.diagnosis-card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-md);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diagnosis-card-icon .material-icons {
    font-size: 40px;
    color: #fff;
}

.diagnosis-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
}

.diagnosis-card p {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-lg);
}

.diagnosis-card-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--primary-color);
    color: #fff;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: background-color var(--transition-fast);
}

.diagnosis-card-btn:hover {
    background: var(--accent-color);
    color: #fff;
}

/* ============================================
   レスポンシブ
   ============================================ */
@media (max-width: 992px) {
    .page-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        order: 2;
    }
}

@media (max-width: 768px) {
    .main-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .hero-title {
        font-size: var(--font-size-xl);
    }

    .diagnosis-container {
        padding: var(--spacing-md);
    }

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

    .result-title {
        font-size: var(--font-size-xl);
    }

    .ad-top-banner .ad-slot,
    .ad-top-banner .ad-placeholder,
    .ad-bottom-banner .ad-slot,
    .ad-bottom-banner .ad-placeholder {
        width: 100%;
        max-width: 320px;
        height: 50px;
    }

    .ad-mobile-sticky {
        display: block;
    }

    .share-buttons-inner {
        flex-direction: column;
    }
}

/* ============================================
   静的ページ（about, terms, privacy, contact）
   ============================================ */
.static-article {
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
    padding: var(--spacing-xl);
}

.static-title {
    font-size: var(--font-size-2xl);
    color: var(--primary-color);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.static-title .material-icons {
    font-size: 40px;
    vertical-align: middle;
    margin-right: var(--spacing-sm);
}

.static-section {
    margin-bottom: var(--spacing-xl);
}

.section-heading {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--primary-color);
}

.section-heading-sm {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--bg-light);
    border-radius: var(--border-radius);
}

.static-text {
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.static-list {
    list-style: disc;
    padding-left: var(--spacing-lg);
    line-height: 2;
}

.static-list-ordered {
    list-style: decimal;
    padding-left: var(--spacing-lg);
    line-height: 2;
}

.notice-box {
    padding: var(--spacing-lg);
    background: #fef3c7;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.notice-box p {
    line-height: 1.8;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.feature-card {
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
}

.feature-card-love {
    background: linear-gradient(135deg, #e91e6310, #9c27b010);
}

.feature-card-cognitive {
    background: linear-gradient(135deg, #3b82f610, #8b5cf610);
}

.feature-card-work {
    background: linear-gradient(135deg, #22c55e10, #10b98110);
}

.feature-card h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.feature-card p {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.diagnosis-item {
    padding: var(--spacing-md);
    background: var(--bg-light);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.diagnosis-item .material-icons {
    font-size: 32px;
    color: var(--primary-color);
}

.diagnosis-item strong {
    display: block;
}

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

.link-list {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-xl);
}

.link-card {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--text-color);
    transition: box-shadow var(--transition-fast);
}

.link-card:hover {
    box-shadow: var(--card-shadow-hover);
}

.link-card .material-icons {
    color: var(--primary-color);
}

.updated-date {
    color: var(--text-muted);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.diagnosis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.diagnosis-card-featured {
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--card-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
}

.diagnosis-card-featured:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

.diagnosis-card-featured .diagnosis-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.diagnosis-card-featured .diagnosis-card-icon .material-icons {
    font-size: 32px;
}

.diagnosis-card-featured h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
}

.diagnosis-card-featured p {
    color: var(--text-light);
    flex: 1;
    line-height: 1.6;
    font-size: var(--font-size-sm);
}

.diagnosis-card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.diagnosis-card-meta .material-icons {
    font-size: 16px;
    vertical-align: middle;
}

.diagnosis-card-featured .diagnosis-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    color: white;
    border-radius: var(--border-radius);
    margin-top: var(--spacing-md);
    font-weight: bold;
}

@media (max-width: 576px) {
    .diagnosis-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   フォーム（お問い合わせ等）
   ============================================ */
.contact-form {
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--card-shadow);
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    color: var(--text-color);
}

.form-group .required {
    color: var(--error-color);
    margin-left: var(--spacing-xs);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.privacy-check {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.privacy-check input[type="checkbox"] {
    width: auto;
    margin-top: var(--spacing-xs);
}

.privacy-check label {
    font-size: var(--font-size-sm);
    color: var(--text-light);
}

.submit-btn {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), transform 0.2s;
}

.submit-btn:hover {
    background: var(--accent-color);
}

.submit-btn:active {
    transform: scale(0.98);
}

.submit-btn:disabled {
    background: var(--border-color);
    cursor: not-allowed;
}

.form-message {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    display: none;
}

.form-message.success {
    background: #d1fae5;
    color: #065f46;
    display: block;
}

.form-message.error {
    background: #fee2e2;
    color: #991b1b;
    display: block;
}

.honeypot {
    display: none;
}

.contact-intro {
    text-align: center;
    color: var(--text-light);
    margin-bottom: var(--spacing-xl);
}

/* ============================================
   Paywall Modal
   ============================================ */
.paywall-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.paywall-modal.active {
    opacity: 1;
    visibility: visible;
}

.paywall-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.paywall-content {
    position: relative;
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: paywall-slide-up 0.3s ease;
}

@keyframes paywall-slide-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.paywall-header {
    margin-bottom: var(--spacing-lg);
}

.paywall-icon {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    display: block;
}

.paywall-header h3 {
    font-size: var(--font-size-xl);
    color: var(--text-color);
    margin: 0;
}

.paywall-description {
    color: var(--text-light);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.paywall-ad-container {
    background: var(--bg-light);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-placeholder {
    text-align: center;
    color: var(--text-muted);
}

.ad-placeholder .material-icons {
    font-size: 40px;
    margin-bottom: var(--spacing-sm);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.ad-placeholder p {
    margin: 0;
    font-size: var(--font-size-sm);
}

.ad-countdown {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-size: var(--font-size-lg);
    font-weight: bold;
    margin-top: var(--spacing-md);
}

.paywall-continue-btn {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--border-color);
    color: var(--text-muted);
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: not-allowed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: all 0.3s ease;
}

.paywall-continue-btn.ready {
    background: var(--primary-color);
    color: white;
    cursor: pointer;
}

.paywall-continue-btn.ready:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
}

.paywall-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    font-size: 12px;
    color: var(--text-muted);
}

.paywall-note .material-icons {
    font-size: 14px;
}

/* ============================================
   印刷時
   ============================================ */
/* ============================================
   パンくずリスト
   ============================================ */
.breadcrumb {
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-md);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    gap: var(--spacing-xs);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

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

.breadcrumb-item a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

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

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

@media (max-width: 768px) {
    .breadcrumb {
        padding: var(--spacing-xs) 0;
    }

    .breadcrumb-list {
        font-size: 12px;
    }
}

/* ============================================
   印刷用スタイル
   ============================================ */
@media print {
    .ad-container,
    .ad-mobile-sticky,
    .header,
    .footer,
    .sidebar,
    .share-buttons,
    .breadcrumb {
        display: none !important;
    }

    .main-content {
        padding: 0;
    }

    .result-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ============================================
   記事用ユーティリティクラス
   ============================================ */

/* マージン */
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* テキスト */
.text-body { line-height: 1.8; }
.text-lead { font-size: var(--font-size-lg); color: var(--text-light); line-height: 1.8; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-center { text-align: center; }

/* テキストカラー */
.text-purple { color: #9c27b0; }
.text-green { color: #22c55e; }
.text-blue { color: #3b82f6; }
.text-orange { color: #f59e0b; }
.text-pink { color: #ec4899; }
.text-teal { color: #10b981; }
.text-red { color: #ef4444; }
.text-primary { color: var(--primary-color); }

/* 背景カラー（薄い） */
.bg-purple-light { background: #9c27b015; }
.bg-green-light { background: #22c55e15; }
.bg-blue-light { background: #3b82f615; }
.bg-orange-light { background: #f59e0b15; }
.bg-pink-light { background: #ec489915; }
.bg-teal-light { background: #10b98115; }

/* 背景カラー（濃いめ） */
.bg-purple-medium { background: #9c27b020; }
.bg-green-medium { background: #22c55e20; }
.bg-blue-medium { background: #3b82f620; }
.bg-orange-medium { background: #f59e0b20; }
.bg-pink-medium { background: #ec489920; }
.bg-teal-medium { background: #10b98120; }
.bg-red-medium { background: #ef444420; }

/* ============================================
   記事レイアウト
   ============================================ */
.article-header {
    margin-bottom: var(--spacing-xl);
}

.article-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}

.article-badge-pink {
    background: #e91e6320;
    color: #e91e63;
}

.article-badge-blue {
    background: #3b82f620;
    color: #3b82f6;
}

.article-badge-green {
    background: #22c55e20;
    color: #22c55e;
}

.article-badge-purple {
    background: #9c27b020;
    color: #9c27b0;
}

.article-title {
    font-size: var(--font-size-2xl);
    line-height: 1.4;
    margin-bottom: var(--spacing-md);
}

/* 目次 */
.article-toc {
    padding: var(--spacing-lg);
    background: var(--bg-light);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-xl);
}

.article-toc h2 {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-md);
}

.article-toc ol {
    padding-left: var(--spacing-lg);
    line-height: 2;
}

.article-toc a {
    color: var(--primary-color);
}

/* セクション */
.article-section {
    margin-bottom: var(--spacing-xl);
}

/* 見出し（カラーバリエーション） */
.article-heading {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--primary-color);
}

.article-heading-pink {
    color: #ec4899;
    border-bottom-color: #ec4899;
}

.article-heading-blue {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.article-heading-green {
    color: #22c55e;
    border-bottom-color: #22c55e;
}

.article-heading-orange {
    color: #f59e0b;
    border-bottom-color: #f59e0b;
}

.article-heading-purple {
    color: #8b5cf6;
    border-bottom-color: #8b5cf6;
}

.article-heading-primary {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* サブ見出し */
.article-subheading {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

/* ハイライトボックス */
.article-highlight {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    background: #fce4ec;
}

.article-highlight-blue {
    background: #e3f2fd;
}

.article-highlight-pink {
    background: #fce4ec;
}

/* ============================================
   記事カード・グリッド
   ============================================ */
.article-card {
    padding: var(--spacing-lg);
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
}

.article-card h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.article-card p {
    line-height: 1.8;
}

.article-grid {
    display: grid;
    gap: var(--spacing-lg);
}

.article-grid-md {
    display: grid;
    gap: var(--spacing-md);
}

.article-grid-sm {
    display: grid;
    gap: var(--spacing-sm);
}

.article-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

@media (max-width: 600px) {
    .article-grid-2col {
        grid-template-columns: 1fr;
    }
}

.article-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-sm);
}

/* 軸カード（E/I, S/N等） */
.article-axis-card {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
}

.article-axis-card strong {
    display: block;
    margin-bottom: var(--spacing-xs);
}

.article-axis-card p {
    font-size: var(--font-size-sm);
    margin: 0;
}

/* タイプリンク */
.article-type-link {
    padding: var(--spacing-sm);
    background: white;
    border-radius: var(--border-radius);
    text-align: center;
    text-decoration: none;
}

.article-type-link strong {
    display: block;
}

.article-type-link .type-name {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* タイプグループ */
.article-type-group {
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-md);
}

.article-type-group h3 {
    margin-bottom: var(--spacing-md);
}

.article-type-group-desc {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

/* ============================================
   記事CTA・関連
   ============================================ */
.article-cta {
    text-align: center;
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, #e91e6315, #9c27b015);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-xl);
}

.article-cta-blue {
    background: linear-gradient(135deg, #3b82f615, #8b5cf615);
}

.article-cta-pink {
    background: linear-gradient(135deg, #ec489915, #f43f5e15);
}

.article-cta h3 {
    margin-bottom: var(--spacing-md);
}

.article-cta p {
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
}

.article-cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* 関連記事 */
.article-related {
    padding: var(--spacing-lg);
    background: var(--bg-light);
    border-radius: var(--border-radius-lg);
}

.article-related h3 {
    margin-bottom: var(--spacing-md);
}

.article-related-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--bg-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: inherit;
}

.article-related-link:hover {
    background: var(--bg-light);
}

/* ============================================
   記事内リスト
   ============================================ */
.article-list {
    padding-left: var(--spacing-md);
    font-size: var(--font-size-sm);
    line-height: 1.8;
}

.article-list-lg {
    padding-left: var(--spacing-lg);
    line-height: 2;
}

/* パンくず（記事内） */
.article-breadcrumb {
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.article-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.article-breadcrumb a:hover {
    color: var(--primary-color);
}

.article-breadcrumb .material-icons {
    font-size: 14px;
    vertical-align: middle;
}

/* 相性タグ */
.compatibility-tag {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 4px;
    text-decoration: none;
    font-size: var(--font-size-sm);
}

/* ボタングラデーション */
.btn-gradient-purple {
    background: linear-gradient(135deg, #9c27b0, #e91e63);
}

.btn-gradient-blue {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.btn-gradient-pink {
    background: linear-gradient(135deg, #ec4899, #f43f5e);
}

/* ============================================
   記事ページ追加コンポーネント
   ============================================ */

/* ピンク系バリエーション */
.article-badge-pink {
    background: #ec489920;
    color: #ec4899;
}

.article-heading-pink {
    color: #ec4899;
    border-bottom-color: #ec4899;
}

.article-highlight-pink {
    background: #fce4ec;
}

.text-pink {
    color: #ec4899;
}

/* TOCスタイル */
.article-toc-title {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-md);
}

.article-toc-list {
    padding-left: var(--spacing-lg);
    line-height: 2;
}

/* 相性パターンカード */
.article-pattern-card {
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
}

/* アイコン垂直揃え */
.icon-valign {
    vertical-align: middle;
}

/* 相性マッチ行 */
.article-match-row {
    padding: var(--spacing-md);
    background: var(--bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.article-match-type {
    min-width: 80px;
    text-align: center;
    text-decoration: none;
    font-size: var(--font-size-lg);
}

.article-match-list {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.article-match-tag {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 4px;
    text-decoration: none;
    font-size: var(--font-size-sm);
}

/* Tipタイトル */
.article-tip-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

/* CTA（ピンク版） */
.article-cta-pink {
    background: linear-gradient(135deg, #ec489915, #f43f5e15);
}

.article-cta-btn-pink {
    background: linear-gradient(135deg, #ec4899, #f43f5e);
}

/* パンくずアイコン */
.breadcrumb-icon {
    font-size: 14px;
    vertical-align: middle;
}

/* ============================================
   記事ページ追加コンポーネント（cognitive用）
   ============================================ */

/* ブルー系バリエーション */
.article-badge-blue {
    background: #3b82f620;
    color: #3b82f6;
}

.article-heading-blue {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

/* グリーン系バリエーション */
.article-heading-green {
    color: #22c55e;
    border-bottom-color: #22c55e;
}

/* オレンジ系バリエーション */
.article-heading-orange {
    color: #f59e0b;
    border-bottom-color: #f59e0b;
}

/* パープル系バリエーション */
.article-heading-purple {
    color: #8b5cf6;
    border-bottom-color: #8b5cf6;
}

/* カテゴリボックス */
.article-category-box {
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, #3b82f620, #8b5cf620);
    border-radius: var(--border-radius-lg);
}

/* 認知機能カード */
.article-func-card {
    padding: var(--spacing-lg);
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
}

/* コンパクトリスト */
.article-list-compact {
    font-size: var(--font-size-sm);
    padding-left: var(--spacing-md);
    margin: 0;
}

/* スタックアイテム */
.article-stack-item {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
}

/* Teal色 */
.text-teal {
    color: #10b981;
}

.bg-teal-medium {
    background: #10b98120;
}

/* CTA（ブルー版） */
.article-cta-blue {
    background: linear-gradient(135deg, #3b82f615, #8b5cf615);
}

.article-cta-btn-blue {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

/* マージントップ */
.mt-xs {
    margin-top: var(--spacing-xs);
}

/* CTA（パープル版） */
.article-cta-btn-purple {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

/* 赤系カード背景 */
.bg-red-light {
    background: #ef444420;
}

/* 記事一覧ページ用 */
.articles-page-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.articles-page-title {
    font-size: var(--font-size-2xl);
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.articles-page-title .material-icons {
    font-size: 40px;
    vertical-align: middle;
}

.articles-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.articles-category-card {
    padding: var(--spacing-lg);
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
}

.articles-category-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.articles-section {
    margin-bottom: var(--spacing-xl);
}

.articles-section-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
}

.articles-section-title .material-icons {
    color: var(--primary-color);
    vertical-align: middle;
}

.articles-list {
    display: grid;
    gap: var(--spacing-md);
}

.article-list-item {
    display: block;
    padding: var(--spacing-lg);
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}

.article-list-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

.article-list-item-inner {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.article-list-thumb {
    min-width: 80px;
    height: 80px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-list-thumb .material-icons {
    font-size: 36px;
    color: white;
}

.article-list-content {
    flex: 1;
}

.article-list-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-xs);
}

.article-list-title {
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-base);
    font-weight: 600;
}

.article-list-desc {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.articles-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
}

.articles-type-link {
    display: block;
    padding: var(--spacing-md);
    background: var(--bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.articles-type-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

.articles-type-code {
    font-size: var(--font-size-lg);
    font-weight: bold;
}

.articles-type-name {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* カテゴリ別記事リンク */
.articles-category-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.articles-category-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    color: var(--text-color);
    box-shadow: var(--card-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 4px solid transparent;
}

.articles-category-link:hover {
    transform: translateX(4px);
    box-shadow: var(--card-shadow-hover);
}

.articles-category-link > .material-icons:first-child {
    font-size: 32px;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
}

.articles-category-link-content {
    flex: 1;
}

.articles-category-link-content strong {
    display: block;
    font-size: var(--font-size-lg);
    margin-bottom: 4px;
}

.articles-category-link-content span {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.articles-category-link > .material-icons:last-child {
    color: var(--text-muted);
}

.articles-category-love {
    border-left-color: #ec4899;
}

.articles-category-love > .material-icons:first-child {
    background: linear-gradient(135deg, #ec489920, #f43f5e20);
    color: #ec4899;
}

.articles-category-work {
    border-left-color: #22c55e;
}

.articles-category-work > .material-icons:first-child {
    background: linear-gradient(135deg, #22c55e20, #10b98120);
    color: #22c55e;
}

.articles-cta-section {
    margin-top: var(--spacing-xl);
    text-align: center;
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, #e91e6310, #9c27b010);
    border-radius: var(--border-radius-lg);
}

.articles-cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* 記事一覧サムネイル背景 */
.thumb-pink { background: linear-gradient(135deg, #e91e63, #9c27b0); }
.thumb-blue { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.thumb-rose { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.thumb-purple { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.thumb-green { background: linear-gradient(135deg, #22c55e, #10b981); }
.thumb-orange { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.thumb-teal { background: linear-gradient(135deg, #14b8a6, #06b6d4); }

/* 記事バッジ色 */
.badge-pink { background: #e91e6320; color: #e91e63; }
.badge-blue { background: #3b82f620; color: #3b82f6; }
.badge-rose { background: #ec489920; color: #ec4899; }
.badge-purple { background: #8b5cf620; color: #8b5cf6; }
.badge-green { background: #22c55e20; color: #22c55e; }
.badge-orange { background: #f59e0b20; color: #f59e0b; }
.badge-teal { background: #14b8a620; color: #14b8a6; }

/* ============================================
   サイドバー追加ウィジェット
   ============================================ */

/* 「もっと見る」リンク */
.widget-more-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--bg-light);
    border-radius: var(--border-radius);
    color: var(--primary-color);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.widget-more-link:hover {
    background: var(--primary-color);
    color: #fff;
}

.widget-more-link .material-icons {
    font-size: 16px;
}

/* 16タイプ一覧ミニグリッド */
.type-grid-mini {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.type-category-mini {
    padding: var(--spacing-sm);
    background: var(--bg-light);
    border-radius: var(--border-radius);
}

.type-category-mini .category-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.type-category-mini .type-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.type-category-mini .type-links a {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
}

.type-category-mini .type-links a:hover {
    background: var(--primary-color);
    color: #fff;
}

/* ============================================
   トップページ - 記事プロモーションセクション
   ============================================ */

.articles-promo-section {
    margin-top: var(--spacing-xl);
}

.info-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
}

.info-section-title .material-icons {
    color: var(--primary-color);
}

.info-section-subtitle {
    font-size: var(--font-size-lg);
    margin: var(--spacing-lg) 0 var(--spacing-md);
    color: var(--text-color);
}

/* プロモーションカード */
.promo-card {
    padding: var(--spacing-lg);
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
}

.promo-card-types {
    background: linear-gradient(135deg, var(--bg-light), var(--bg-color));
}

.promo-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.promo-card-header .material-icons {
    color: var(--primary-color);
    font-size: 28px;
}

.promo-card-header h3 {
    font-size: var(--font-size-lg);
    margin: 0;
}

.promo-card p {
    color: var(--text-light);
    margin-bottom: var(--spacing-md);
}

.promo-btn {
    background: var(--primary-color);
}

/* 人気記事リスト */
.popular-articles-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.popular-article-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-light);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.2s;
}

.popular-article-item:hover {
    background: var(--secondary-color);
    transform: translateX(4px);
}

.popular-article-item .article-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    flex-shrink: 0;
}

.popular-article-title {
    flex: 1;
    font-weight: 500;
}

.popular-article-item .material-icons {
    color: var(--text-muted);
    font-size: 20px;
}

/* CTAボタンバリエーション */
.btn-outline-primary {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    color: #fff;
}

.btn-love {
    background: var(--love-color);
}

.btn-love:hover {
    filter: brightness(0.9);
}

.btn-work {
    background: var(--work-color);
}

.btn-work:hover {
    filter: brightness(0.9);
}

/* 免責事項 */
.disclaimer-section {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    background: var(--bg-light);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ============================================
   診断結果 - 関連記事セクション
   ============================================ */

.related-articles-section {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
}

.related-articles-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}

.related-articles-title .material-icons {
    color: var(--primary-color);
}

.related-articles-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.related-article-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-light);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.2s;
    background: var(--bg-color);
    box-shadow: var(--card-shadow);
}

.related-article-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

.related-article-item .material-icons:first-child {
    font-size: 24px;
}

.related-article-text {
    flex: 1;
    font-weight: 500;
}

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

/* カラーバリエーション */
.related-article-primary .material-icons:first-child {
    color: var(--primary-color);
}

.related-article-love .material-icons:first-child {
    color: var(--love-color);
}

.related-article-work .material-icons:first-child {
    color: var(--work-color);
}

/* ============================================
   診断結果 - 他の診断セクション
   ============================================ */

.other-diagnosis-section {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.other-diagnosis-section h3 {
    margin-bottom: var(--spacing-md);
}

.other-diagnosis-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.btn-primary {
    background: var(--primary-color);
}

.btn-secondary {
    background: #9c27b0;
}

.btn-cognitive {
    background: var(--cognitive-color);
}

.btn-64type {
    background: #9c27b0;
}

.btn-love {
    background: var(--love-color);
}

.btn-work {
    background: var(--work-color);
}

.btn-relation {
    background: var(--relation-color);
}

/* ============================================
   トップページ用クラス
   ============================================ */

/* セクションタイトル */
.section-title-center {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.section-title-center .material-icons {
    color: var(--primary-color);
    vertical-align: middle;
}

/* カテゴリ診断セクション */
.category-diagnosis {
    margin-top: var(--spacing-xl);
}

/* info-section カード */
.info-section-card {
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-xl);
    box-shadow: var(--card-shadow);
}

.info-section-card-cognitive {
    background: linear-gradient(135deg, #3b82f620, #8b5cf620);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-lg);
    box-shadow: var(--card-shadow);
}

.info-section-card-mt-lg {
    margin-top: var(--spacing-lg);
}

/* info-section 見出し */
.info-section-heading {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
}

.info-section-heading .material-icons {
    vertical-align: middle;
}

.info-section-heading .icon-primary {
    color: var(--primary-color);
}

.info-section-heading .icon-secondary {
    color: var(--secondary-color);
}

.info-section-heading .icon-cognitive {
    color: #3b82f6;
}

/* NEWバッジ（インライン） */
.badge-new-inline {
    display: inline-block;
    background: #3b82f6;
    color: white;
    font-size: var(--font-size-sm);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
}

/* 段落スタイル */
.text-readable {
    line-height: 1.8;
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mt-md {
    margin-top: var(--spacing-md);
}

/* 認知機能グリッド */
.cognitive-functions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.cognitive-function-item {
    background: var(--bg-color);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--card-shadow);
}

.cognitive-function-item .func-name {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* A/T タイプ比較 */
.at-type-comparison {
    display: flex;
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.at-type-box {
    flex: 1;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    text-align: center;
}

.at-type-box-a {
    background: #10b98120;
}

.at-type-box-a strong {
    color: #10b981;
}

.at-type-box-t {
    background: #8b5cf620;
}

.at-type-box-t strong {
    color: #8b5cf6;
}

.at-type-desc {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* 結果詳細カード */
.result-variant-card {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
}

/* 認知機能スタック項目 */
.cognitive-stack-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-light);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

/* A/Tバリエーションカード */
.at-variation-grid {
    margin-bottom: var(--spacing-xl);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.at-variation-card {
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
}

.at-variation-card h3 {
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.at-variation-card p {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

.at-variation-a {
    background: #f0fdf4;
}

.at-variation-a h3 {
    color: #22c55e;
}

.at-variation-t {
    background: #fef3c7;
}

.at-variation-t h3 {
    color: #f59e0b;
}

/* 認知機能カード */
.cognitive-function-card {
    background: var(--bg-color);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

.cognitive-detail-card {
    padding: var(--spacing-md);
    background: var(--bg-light);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--card-shadow);
}

/* 履歴カード */
.history-card {
    padding: var(--spacing-lg);
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
    margin-bottom: var(--spacing-md);
}

.at-type-box p {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

/* ============================================
   キャラクター画像表示
   ============================================ */

/* 結果ページのキャラクターセクション */
.result-character {
    text-align: center;
    padding: var(--spacing-lg);
    margin: var(--spacing-md) 0;
}

.character-image {
    max-width: 280px;
    max-height: 280px;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
    transition: transform var(--transition-normal);
}

.character-image:hover {
    transform: scale(1.02);
}

/* キャラクターと情報の横並びレイアウト */
.result-character-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--bg-light);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-lg);
}

.result-character-info {
    flex: 1;
}

.result-character-info h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
}

.result-character-info .type-code {
    font-size: var(--font-size-2xl);
    font-weight: bold;
    letter-spacing: 2px;
}

.result-character-info .type-name {
    font-size: var(--font-size-lg);
    color: var(--text-light);
    margin-top: var(--spacing-xs);
}

/* カード内のキャラクター（小サイズ） */
.card-character {
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius);
    object-fit: cover;
}

/* 相性カードのキャラクター */
.compatibility-character {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* キャラクターグリッド（全タイプ一覧等） */
.characters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-md);
    padding: var(--spacing-md);
}

.character-card {
    text-align: center;
    padding: var(--spacing-md);
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    transition: all var(--transition-normal);
}

.character-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

.character-card img {
    width: 100px;
    height: 100px;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
}

.character-card .type-label {
    font-weight: bold;
    font-size: var(--font-size-base);
}

.character-card .type-desc {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .character-image {
        max-width: 200px;
        max-height: 200px;
    }

    .result-character-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .result-character-info {
        text-align: center;
    }

    .characters-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: var(--spacing-sm);
    }

    .character-card img {
        width: 70px;
        height: 70px;
    }
}

/* ============================================
   タイプ一覧ページ
   ============================================ */
.type-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.type-list-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}

.type-list-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

.type-list-character {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.type-list-character-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.type-list-content {
    flex: 1;
    min-width: 0;
}

.type-list-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.type-list-code {
    font-size: var(--font-size-lg);
    font-weight: bold;
}

.type-list-name {
    font-weight: bold;
    color: var(--text-color);
}

.type-list-description {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 var(--spacing-sm) 0;
}

.type-list-traits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.type-list-trait {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .type-list-grid {
        grid-template-columns: 1fr;
    }

    .type-list-character {
        width: 60px;
        height: 60px;
    }
}