/* ポイ活ゲーム記事（article/G1000〜）の共通スタイル */
        /* モダンなデザインのベース */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* ヘッダーデザイン */
        header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            margin-bottom: 30px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: sticky;
            top: 20px;
            z-index: 1000;
        }

        .header-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 30px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .header-logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-icon {
            font-size: 2.5em;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: pulse 2s infinite;
        }

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

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

        .logo-main {
            font-size: 1.8em;
            font-weight: bold;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }

        .logo-sub {
            font-size: 0.9em;
            color: #666;
            font-weight: 500;
            margin-top: 2px;
        }

        .header-nav {
            display: flex;
            gap: 30px;
        }

        .nav-link {
            color: #333;
            text-decoration: none;
            font-weight: 500;
            padding: 8px 16px;
            border-radius: 25px;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-link:hover {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }

        .header-cta {
            display: flex;
            align-items: center;
        }

        .cta-button {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 12px 24px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1em;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
            position: relative;
            overflow: hidden;
        }

        .cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .cta-button:hover::before {
            left: 100%;
        }

        .cta-button:hover {
            background: linear-gradient(135deg, #5a6fd8, #6a4190);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }

        /* メインコンテンツ */
        .main-content {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 30px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
        }

        h1 {
            font-size: 2.2em;
            color: #333;
            margin-bottom: 30px;
            text-align: center;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.4;
        }

        h2 {
            font-size: 1.9em;
            color: #333;
            margin: 50px 0 30px 0;
            padding: 20px 25px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border-radius: 12px;
            position: relative;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
            text-align: left;
        }

        h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 12px 0 0 12px;
        }

        .content-section h2 {
            margin: 0 0 25px 0;
        }

        h3 {
            font-size: 1.6em;
            color: #667eea;
            margin: 35px 0 20px 0;
            padding: 15px 20px;
            background: linear-gradient(135deg, #f8f9ff, #e8f0ff);
            border-left: 5px solid #667eea;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(102, 126, 234, 0.1);
        }

        h4 {
            font-size: 1.3em;
            color: #555;
            margin: 25px 0 15px 0;
            padding: 12px 18px;
            background: linear-gradient(135deg, #fff, #f5f5f5);
            border-left: 4px solid #764ba2;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .article-content {
            line-height: 1.8;
            color: #333;
        }

        .article-content p {
            margin-bottom: 20px;
            font-size: 1.05em;
        }

        /* 箇条書きをブロック型カードデザインに */
        .article-content ul,
        .article-content ol {
            margin: 25px 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: 15px;
        }

        .article-content ul li,
        .article-content ol li {
            background: linear-gradient(135deg, #f8f9ff, #e8f0ff);
            border-left: 4px solid #667eea;
            border-radius: 10px;
            padding: 18px 20px;
            margin-bottom: 0;
            line-height: 1.7;
            box-shadow: 0 3px 10px rgba(102, 126, 234, 0.1);
            transition: all 0.3s ease;
            position: relative;
            padding-left: 50px;
        }

        .article-content ul li::before,
        .article-content ol li::before {
            content: '✓';
            position: absolute;
            left: 18px;
            top: 18px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9em;
            font-weight: bold;
        }

        .article-content ul li:hover,
        .article-content ol li:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
            border-left-color: #764ba2;
        }

        .article-content ol {
            counter-reset: item;
        }

        .article-content ol li {
            counter-increment: item;
            padding-left: 50px;
        }

        .article-content ol li::before {
            content: counter(item);
            background: linear-gradient(135deg, #667eea, #764ba2);
        }

        /* セクションボックス */
        .content-section {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(102, 126, 234, 0.2);
            border-radius: 15px;
            padding: 30px;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .content-section:hover {
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
        }

        .tip-box {
            background: linear-gradient(135deg, #e3f2fd, #bbdefb);
            border-left: 5px solid #2196f3;
            border-radius: 12px;
            padding: 25px;
            margin: 30px 0;
            box-shadow: 0 8px 20px rgba(33, 150, 243, 0.15);
            position: relative;
            overflow: hidden;
        }

        .tip-box::before {
            content: '💡';
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 2.5em;
            opacity: 0.2;
        }

        .tip-box > strong:first-child {
            color: #1976d2;
            font-size: 1.2em;
            display: block;
            margin-bottom: 10px;
        }

        .warning-box {
            background: linear-gradient(135deg, #fff3e0, #ffe0b2);
            border-left: 5px solid #ff9800;
            border-radius: 12px;
            padding: 25px;
            margin: 30px 0;
            box-shadow: 0 8px 20px rgba(255, 152, 0, 0.15);
            position: relative;
            overflow: hidden;
        }

        .warning-box::before {
            content: '⚠️';
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 2.5em;
            opacity: 0.2;
        }

        .warning-box > strong:first-child {
            color: #e65100;
            font-size: 1.2em;
            display: block;
            margin-bottom: 10px;
        }

        .highlight {
            background: linear-gradient(135deg, #fff8e1, #ffecb3);
            padding: 4px 10px;
            border-radius: 6px;
            font-weight: bold;
            color: #e65100;
            border: 1px solid #ffcc80;
            display: inline-block;
            margin: 0 2px;
        }

        /* キャラクター紹介カード */
        .character-card {
            background: linear-gradient(135deg, #ffffff, #f5f5f5);
            border-radius: 15px;
            padding: 25px;
            margin: 25px 0;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            border: 2px solid rgba(102, 126, 234, 0.2);
            transition: all 0.3s ease;
        }

        .character-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
            border-color: #667eea;
        }

        .character-card h3 {
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-top: 0;
            padding-left: 0;
            border-left: none;
        }

        /* ステップボックス */
        .step-box {
            background: linear-gradient(135deg, #f0f4ff, #e0e8ff);
            border-left: 5px solid #667eea;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            position: relative;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
        }

        .step-box::before {
            content: attr(data-step);
            position: absolute;
            left: -15px;
            top: 20px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.1em;
            box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
        }

        /* 機能グリッド */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .feature-item {
            background: linear-gradient(135deg, #ffffff, #f8f9ff);
            padding: 25px;
            border-radius: 12px;
            border-left: 4px solid #667eea;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
            border-left-color: #764ba2;
        }

        .feature-item h4 {
            color: #667eea;
            margin: 0 0 12px 0;
            font-size: 1.2em;
            padding-left: 0;
            border-left: none;
        }

        .feature-item p {
            margin: 0;
            color: #666;
            line-height: 1.6;
        }

        /* ヒーローセクション */
        .hero-section {
            text-align: center;
            margin: 40px 0;
            padding: 40px 20px;
            background: linear-gradient(135deg, #f8f9ff, #e8f0ff);
            border-radius: 20px;
            border: 2px solid rgba(102, 126, 234, 0.1);
        }

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

        .hero-icon {
            font-size: 4em;
            margin-bottom: 20px;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }

        .hero-subtitle {
            font-size: 1.8em;
            color: #333;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-description {
            font-size: 1.2em;
            color: #666;
            line-height: 1.7;
            margin: 0;
        }

        /* 説明セクション */
        .description {
            margin-bottom: 50px;
        }

        .description-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }

        .description-item {
            background: rgba(255, 255, 255, 0.8);
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            border: 1px solid rgba(102, 126, 234, 0.1);
        }

        .description-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .description-icon {
            font-size: 2.5em;
            margin-bottom: 15px;
        }

        .description-item h3 {
            font-size: 1.3em;
            color: #333;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .description-item p {
            color: #666;
            line-height: 1.6;
            margin: 0;
        }

        /* ポイントサイトカード */
        .pointsite-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }

        .pointsite-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            border: 2px solid rgba(102, 126, 234, 0.1);
        }

        .pointsite-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        }

        .pointsite-header {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 20px;
            text-align: center;
            position: relative;
        }

        .pointsite-icon {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .pointsite-header h3 {
            font-size: 1.5em;
            margin: 0 0 10px 0;
            font-weight: bold;
        }

        .pointsite-badge {
            background: rgba(255, 255, 255, 0.2);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: bold;
            display: inline-block;
            backdrop-filter: blur(10px);
        }

        .pointsite-image {
            text-align: center;
            padding: 20px;
            background: linear-gradient(135deg, #f8f9ff, #e8f0ff);
        }

        .pointsite-image img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .pointsite-content {
            padding: 25px;
        }

        .pointsite-features {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 20px;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: linear-gradient(135deg, #f0f4ff, #e8f0ff);
            border-radius: 10px;
            border-left: 4px solid #667eea;
        }

        .feature-icon {
            font-size: 1.2em;
        }

        .feature-item span:last-child {
            font-weight: 500;
            color: #333;
        }

        .pointsite-description {
            font-size: 1.1em;
            color: #333;
            line-height: 1.7;
            margin-bottom: 15px;
            font-weight: 500;
        }

        .pointsite-detail {
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .pointsite-experience {
            color: #555;
            line-height: 1.6;
            margin-bottom: 20px;
            font-style: italic;
            background: linear-gradient(135deg, #fff8f0, #f0f8ff);
            padding: 15px;
            border-radius: 10px;
            border-left: 4px solid #ffa500;
        }

        .pointsite-btn {
            display: block;
            width: 100%;
            text-align: center;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 15px 20px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.1em;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }

        .pointsite-btn:hover {
            background: linear-gradient(135deg, #5a6fd8, #6a4190);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }

        /* 比較テーブル */
        .comparison-section {
            margin: 40px 0;
        }

        .comparison-section h2 {
            font-size: 1.8em;
            color: #333;
            margin-bottom: 25px;
            text-align: center;
            position: relative;
        }

        .comparison-section h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 2px;
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 30px 0;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .comparison-table th {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 20px;
            font-weight: bold;
            font-size: 1.1em;
            text-align: center;
        }

        .comparison-table td {
            padding: 18px 20px;
            border-bottom: 1px solid #f0f0f0;
            text-align: center;
            transition: all 0.3s ease;
        }

        .comparison-table tr:hover td {
            background: linear-gradient(135deg, #f8f9ff, #e8f0ff);
        }

        .comparison-table a {
            color: #667eea;
            text-decoration: none;
            font-weight: bold;
            padding: 8px 16px;
            border-radius: 20px;
            background: linear-gradient(135deg, #f8f9ff, #e8f0ff);
            transition: all 0.3s ease;
            display: inline-block;
        }

        .comparison-table a:hover {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }

        .rate-highlight {
            font-size: 1.2em;
            font-weight: bold;
            color: #e74c3c;
        }

        /* 注意事項 */
        .notice {
            background: linear-gradient(135deg, #fff3e0, #ffe0b2);
            border: 1px solid #ffcc80;
            border-radius: 15px;
            padding: 20px;
            margin: 30px 0;
            color: #e65100;
        }

        .notice p {
            margin-bottom: 10px;
        }

        /* サイドバー */
        .sidebar {
            display: grid;
            gap: 30px;
        }

        .card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
        }

        .card h2 {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 3px solid #667eea;
        }

        .card h3 {
            font-size: 1.3em;
            color: #667eea;
            margin: 25px 0 15px 0;
        }

        .card p {
            margin-bottom: 15px;
            line-height: 1.7;
        }

        .card img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            margin: 15px 0;
        }

        /* ボタン */
        .btn {
            display: inline-block;
            padding: 15px 30px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            text-decoration: none;
            border-radius: 25px;
            font-weight: bold;
            margin: 10px 5px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
            text-align: center;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #f8f9ff, #e8f0ff);
            color: #667eea;
            border: 2px solid #667eea;
        }

        .btn-secondary:hover {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }

        /* フッター */
        footer {
            text-align: center;
            padding: 30px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9em;
        }

        footer a {
            color: white;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }

        /* レスポンシブ対応 */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }

            .header-container {
                flex-direction: column;
                gap: 20px;
                padding: 20px;
            }

            .header-logo {
                justify-content: center;
            }

            .logo-icon {
                font-size: 2em;
            }

            .logo-main {
                font-size: 1.5em;
            }

            .header-nav {
                gap: 15px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .nav-link {
                padding: 6px 12px;
                font-size: 0.9em;
            }

            .cta-button {
                padding: 10px 20px;
                font-size: 0.9em;
            }

            .main-content {
                padding: 20px;
            }

            h1 {
                font-size: 1.8em;
            }

            h2 {
                font-size: 1.5em;
            }

            h3 {
                font-size: 1.3em;
            }

            h4 {
                font-size: 1.1em;
            }

            .article-content {
                font-size: 0.95em;
            }

            .article-content ul li,
            .article-content ol li {
                padding-left: 45px;
                padding-right: 15px;
            }

            .article-content ul li::before,
            .article-content ol li::before {
                left: 15px;
                width: 20px;
                height: 20px;
                font-size: 0.8em;
            }

            .feature-grid {
                grid-template-columns: 1fr;
            }

            .content-section {
                padding: 20px;
            }

            h2 {
                font-size: 1.5em;
                padding: 15px 20px;
            }

            h3 {
                font-size: 1.3em;
                padding: 12px 15px;
            }

            h4 {
                font-size: 1.1em;
                padding: 10px 15px;
            }

            .hero-section {
                padding: 30px 15px;
                margin: 30px 0;
            }

            .hero-icon {
                font-size: 3em;
            }

            .hero-subtitle {
                font-size: 1.5em;
            }

            .hero-description {
                font-size: 1.1em;
            }

            .description-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .description-item {
                padding: 20px;
            }

            .pointsite-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .pointsite-card {
                margin-bottom: 20px;
            }

            .pointsite-header {
                padding: 15px;
            }

            .pointsite-icon {
                font-size: 2em;
            }

            .pointsite-header h3 {
                font-size: 1.3em;
            }

            .pointsite-content {
                padding: 20px;
            }

            .pointsite-features {
                gap: 8px;
            }

            .feature-item {
                padding: 8px;
                font-size: 0.9em;
            }

            .comparison-table {
                font-size: 0.9em;
            }

            .comparison-table th,
            .comparison-table td {
                padding: 12px 8px;
            }

            .card {
                padding: 20px;
            }

            .btn {
                display: block;
                width: 100%;
                margin: 10px 0;
            }
        }

        @media (max-width: 480px) {
            .header-container {
                padding: 15px;
            }

            .logo-icon {
                font-size: 1.8em;
            }

            .logo-main {
                font-size: 1.3em;
            }

            .logo-sub {
                font-size: 0.8em;
            }

            .header-nav {
                gap: 10px;
            }

            .nav-link {
                padding: 5px 10px;
                font-size: 0.8em;
            }

            .cta-button {
                padding: 8px 16px;
                font-size: 0.8em;
            }

            h1 {
                font-size: 1.5em;
            }

            .hero-section {
                padding: 20px 10px;
            }

            .hero-icon {
                font-size: 2.5em;
            }

            .hero-subtitle {
                font-size: 1.3em;
            }

            .hero-description {
                font-size: 1em;
            }

            .description-item {
                padding: 15px;
            }

            .description-icon {
                font-size: 2em;
            }

            .pointsite-header {
                padding: 12px;
            }

            .pointsite-icon {
                font-size: 1.8em;
            }

            .pointsite-header h3 {
                font-size: 1.2em;
            }

            .pointsite-content {
                padding: 15px;
            }

            .pointsite-description {
                font-size: 1em;
            }

            .pointsite-btn {
                padding: 12px 15px;
                font-size: 1em;
            }

            .comparison-table {
                font-size: 0.8em;
            }

            .comparison-table th,
            .comparison-table td {
                padding: 8px 4px;
            }
        }

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

        .main-content,
        .card {
            animation: fadeInUp 0.6s ease-out;
        }

        .card:nth-child(2) {
            animation-delay: 0.2s;
        }

        .card:nth-child(3) {
            animation-delay: 0.4s;
        }
        .content-section[id],
        h2[id],
        .card[id] {
            scroll-margin-top: 140px;
        }

        /* 更新日バッジ */
        .update-info {
            text-align: center;
            margin: -10px 0 25px 0;
        }

        .update-badge {
            display: inline-block;
            background: #fff;
            border: 2px solid #667eea;
            color: #667eea;
            padding: 4px 16px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: bold;
        }

        /* 目次 */
        .toc {
            background: #fff;
            border: 2px solid rgba(102, 126, 234, 0.25);
            border-radius: 15px;
            padding: 20px 25px;
            margin: 30px 0;
        }

        .toc-title {
            font-weight: bold;
            color: #667eea;
            font-size: 1.15em;
            margin-bottom: 10px;
        }

        .article-content .toc ol {
            margin: 0;
            gap: 6px;
        }

        .article-content .toc ol li {
            background: none;
            border-left: none;
            box-shadow: none;
            padding: 4px 0 4px 36px;
        }

        .article-content .toc ol li::before {
            top: 5px;
            left: 0;
        }

        .article-content .toc ol li:hover {
            transform: none;
        }

        .toc a {
            color: #333;
            text-decoration: none;
        }

        .toc a:hover {
            color: #667eea;
            text-decoration: underline;
        }

        /* データテーブル */
        .table-wrap {
            overflow-x: auto;
            margin: 20px 0 25px 0;
            -webkit-overflow-scrolling: touch;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.12);
            font-size: 0.98em;
            line-height: 1.6;
        }

        .data-table thead tr {
            background: linear-gradient(135deg, #667eea, #764ba2);
        }

        .data-table thead th {
            color: #fff;
            padding: 12px 14px;
            text-align: left;
            white-space: nowrap;
        }

        .data-table td,
        .data-table tbody th {
            padding: 12px 14px;
            border-bottom: 1px solid #eef0fb;
            vertical-align: top;
            text-align: left;
        }

        .data-table tbody td:first-child {
            white-space: nowrap;
        }

        .data-table tbody tr:nth-child(even) td {
            background: #f8f9ff;
        }

        .data-table tbody th {
            background: #eef1ff;
            color: #4a4fb0;
            width: 30%;
            white-space: nowrap;
        }

        .data-table tr.row-strong td {
            background: #fff8e1 !important;
            font-weight: bold;
        }

        /* 優先度バッジ */
        .pri {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 0.85em;
            font-weight: bold;
            color: #fff;
            white-space: nowrap;
        }

        .pri-s { background: #e74c3c; }
        .pri-a { background: #ff9800; }
        .pri-b { background: #9e9e9e; }

        /* 手順の流れ */
        .flow {
            display: flex;
            align-items: stretch;
            gap: 8px;
            margin: 25px 0 10px 0;
        }

        .flow-step {
            flex: 1;
            background: #fff;
            border: 2px solid #667eea;
            border-radius: 12px;
            padding: 16px 12px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.12);
        }

        .flow-icon {
            display: block;
            font-size: 1.8em;
            margin-bottom: 6px;
        }

        .flow-step strong {
            display: block;
            color: #4a4fb0;
            margin-bottom: 4px;
        }

        .flow-step small {
            display: block;
            color: #666;
            line-height: 1.5;
        }

        .flow-arrow {
            align-self: center;
            color: #764ba2;
            font-size: 1.4em;
            font-weight: bold;
        }

        .flow-loop {
            text-align: center;
            background: linear-gradient(135deg, #f3e9ff, #e8f0ff);
            border: 2px dashed #764ba2;
            border-radius: 12px;
            padding: 10px 15px;
            color: #5b3a8c;
            font-weight: bold;
            margin-bottom: 25px;
        }

        /* ルート図 */
        .route {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin: 20px 0;
        }

        .route-item {
            background: #fff;
            border: 2px solid #c5cbf5;
            border-radius: 10px;
            padding: 8px 14px;
            font-weight: bold;
            color: #555;
        }

        .route-item.goal {
            background: linear-gradient(135deg, #fff3c4, #ffe08a);
            border-color: #f0b400;
            color: #8a5a00;
        }

        .route-arrow {
            color: #764ba2;
            font-weight: bold;
        }

        /* 進行図 */
        .milestone {
            display: grid;
            grid-template-columns: repeat(9, minmax(64px, 1fr));
            position: relative;
            margin: 25px 0 10px 0;
            padding-top: 10px;
            min-width: 600px;
        }

        .milestone.cols-5 { grid-template-columns: repeat(5, minmax(64px, 1fr)); min-width: 420px; }
        .milestone.cols-4 { grid-template-columns: repeat(4, minmax(70px, 1fr)); min-width: 360px; }
        .milestone.cols-6 { grid-template-columns: repeat(6, minmax(64px, 1fr)); min-width: 480px; }

        .milestone::before {
            content: '';
            position: absolute;
            top: 27px;
            left: 5%;
            right: 5%;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 2px;
        }

        .ms-node {
            text-align: center;
            position: relative;
        }

        .ms-dot {
            width: 34px;
            height: 34px;
            margin: 0 auto 8px auto;
            border-radius: 50%;
            background: #fff;
            border: 4px solid #667eea;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9em;
            position: relative;
        }

        .ms-node.goal .ms-dot {
            background: #ffd54f;
            border-color: #f0b400;
        }

        .ms-floor {
            display: block;
            font-weight: bold;
            color: #4a4fb0;
            font-size: 0.95em;
        }

        .ms-label {
            display: block;
            font-size: 0.78em;
            color: #777;
            line-height: 1.4;
        }

        /* 評価カード */
        .rating-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
            margin: 20px 0;
        }

        .rating-item {
            background: #fff;
            border-radius: 12px;
            padding: 14px 16px;
            border-left: 4px solid #667eea;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        }

        .rating-item span {
            display: block;
            font-size: 0.9em;
            color: #666;
        }

        .rating-item .stars {
            color: #f0b400;
            font-size: 1.25em;
            letter-spacing: 2px;
        }

        .rating-item small {
            color: #888;
        }

        /* 向いている人・向いていない人 */
        .proscons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin: 20px 0;
        }

        .proscons > div {
            background: #fff;
            border-radius: 12px;
            padding: 18px 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        }

        .proscons .pros { border-top: 5px solid #2ecc71; }
        .proscons .cons { border-top: 5px solid #e74c3c; }

        .proscons-title {
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 1.1em;
        }

        .pros .proscons-title { color: #1e8e4e; }
        .cons .proscons-title { color: #c0392b; }

        .article-content .proscons ul {
            margin: 0;
            gap: 8px;
        }

        .article-content .proscons ul li {
            background: none;
            border-left: none;
            box-shadow: none;
            padding: 2px 0 2px 30px;
        }

        .article-content .proscons ul li:hover {
            transform: none;
        }

        .article-content .proscons ul li::before {
            top: 4px;
            left: 0;
            width: 20px;
            height: 20px;
            font-size: 0.75em;
        }

        .article-content .proscons .pros ul li::before { content: '○'; background: #2ecc71; }
        .article-content .proscons .cons ul li::before { content: '×'; background: #e74c3c; }

        /* FAQ */
        .faq-item {
            background: #fff;
            border-radius: 12px;
            margin: 14px 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            overflow: hidden;
        }

        .faq-q {
            background: #eef1ff;
            color: #4a4fb0;
            font-weight: bold;
            padding: 14px 18px;
        }

        .faq-q::before {
            content: 'Q.';
            margin-right: 8px;
            color: #764ba2;
        }

        .faq-a {
            padding: 14px 18px;
        }

        .faq-a::before {
            content: 'A.';
            margin-right: 8px;
            font-weight: bold;
            color: #e74c3c;
        }

        .source-note {
            font-size: 0.85em;
            color: #888;
        }

        @media (max-width: 768px) {
            .flow {
                flex-direction: column;
            }

            .flow-arrow {
                transform: rotate(90deg);
            }

            .proscons {
                grid-template-columns: 1fr;
            }

            .data-table {
                font-size: 0.9em;
            }

            .data-table thead th,
            .data-table td,
            .data-table tbody th {
                padding: 10px;
            }

            .data-table tbody th,
            .data-table tbody td:first-child {
                white-space: normal;
            }

            .milestone,
            .milestone.cols-4,
            .milestone.cols-5,
            .milestone.cols-6 {
                grid-template-columns: repeat(3, 1fr);
                row-gap: 14px;
                min-width: 0;
            }

            .milestone::before {
                display: none;
            }
        }

        /* 横棒グラフ */
        .bar-chart {
            margin: 20px 0;
            background: #fff;
            border-radius: 12px;
            padding: 16px 18px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        }

        .bar-chart-title {
            font-weight: bold;
            color: #4a4fb0;
            margin-bottom: 12px;
        }

        .bar-row {
            display: grid;
            grid-template-columns: 9em 1fr;
            align-items: center;
            gap: 10px;
            margin: 8px 0;
        }

        .bar-label {
            font-size: 0.9em;
            color: #555;
            line-height: 1.3;
        }

        .bar-track {
            background: #eef0fb;
            border-radius: 6px;
            height: 26px;
            overflow: hidden;
        }

        .bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            color: #fff;
            font-size: 0.82em;
            font-weight: bold;
            display: flex;
            align-items: center;
            padding: 0 8px;
            white-space: nowrap;
            border-radius: 6px;
            min-width: 3.5em;
            box-sizing: border-box;
        }

        .bar-fill.hot {
            background: linear-gradient(90deg, #ff9800, #e74c3c);
        }

        /* ポイントカード */
        .point-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 12px;
            margin: 20px 0;
        }

        .point-card {
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            border-top: 4px solid #667eea;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        }

        .point-card .pc-icon {
            font-size: 1.6em;
            display: block;
            margin-bottom: 4px;
        }

        .point-card strong {
            display: block;
            color: #4a4fb0;
            margin-bottom: 6px;
        }

        .point-card p {
            margin: 0;
            font-size: 0.92em;
            color: #555;
            line-height: 1.6;
        }

        /* チェックリスト */
        .checklist {
            background: #f6fff8;
            border: 2px solid #2ecc71;
            border-radius: 12px;
            padding: 14px 18px;
            margin: 20px 0;
        }

        .checklist-title {
            font-weight: bold;
            color: #1e8e4e;
            margin-bottom: 8px;
        }

        .checklist .ck {
            padding: 5px 0 5px 28px;
            position: relative;
            border-bottom: 1px dashed #cdeed8;
        }

        .checklist .ck:last-child {
            border-bottom: none;
        }

        .checklist .ck::before {
            content: '☑';
            position: absolute;
            left: 0;
            color: #2ecc71;
            font-weight: bold;
        }

        @media (max-width: 768px) {
            .bar-row {
                grid-template-columns: 6.5em 1fr;
            }
        }