/* メディカ出版『透析ケア』風の白基調・さわやかイラスト調カラーシステム */
        :root {
            --primary: #2a7e9b;          /* 清潔感のあるサックスブルー */
            --primary-light: #f1f7f9;    /* 超淡いブルー（回答背景） */
            --primary-dark: #1b5367;     /* 深いブルー */
            --accent: #e88b9c;           /* 優しいさくらピンク */
            --accent-bg: #fff5f6;        /* 超淡いピンク（質問背景） */
            --accent-dark: #cc5a70;
            --text-main: #333f48;        /* マイルドな黒（誌面風） */
            --text-muted: #6b7c85;       /* やさしいグレー */
            --bg-base: #f5f7f8;          /* 温かみのあるグレー */
            --bg-card: #ffffff;
            --border-color: #d8e5e8;     /* さわやかな境界線 */
            --border-light: #eef3f5;
            
            /* イラスト風のラフな角丸定義 */
            --sketch-radius-1: 255px 15px 225px 15px / 15px 225px 15px 255px;
            --sketch-radius-2: 15px 225px 15px 255px / 255px 15px 225px 15px;
            --sketch-radius-3: 30px 10px 20px 10px / 10px 20px 10px 30px;
            
            /* イラスト風のぼかさないフラットシャドウ */
            --illust-shadow-accent: 4px 4px 0px var(--accent-dark);
            --illust-shadow-primary: 4px 4px 0px var(--primary-dark);
            --illust-shadow-dark: 4px 4px 0px var(--text-main);
            --illust-shadow-muted: 4px 4px 0px var(--border-color);
            
            /* フラットで軽やかなシャドウ */
            --shadow-sm: 0 2px 6px rgba(42, 126, 155, 0.05);
            --shadow-md: 0 4px 16px rgba(42, 126, 155, 0.08);
            --radius-sm: 8px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 少し弾むようなアニメーション */
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
            background-color: var(--bg-base);
            color: var(--text-main);
            line-height: 1.8;
            -webkit-font-smoothing: antialiased;
        }

        /* 誌面風のクリーンなヘッダー */
        header {
            background: #ffffff;
            border-bottom: 2px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 100;
            padding: 12px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.03);
        }

        .header-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--primary-dark);
            font-weight: 700;
            font-size: 1.1rem;
        }

        .header-logo img {
            height: 38px;
            width: auto;
        }

        /* 印刷ボタン */
        .print-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background-color: var(--primary);
            color: #fff;
            border: none;
            border-radius: var(--radius-sm);
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 2px 8px rgba(42, 126, 155, 0.25);
        }

        .print-btn:hover {
            background-color: var(--primary-dark);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(42, 126, 155, 0.35);
        }

        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background-color: var(--primary-light);
            color: var(--primary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            font-weight: 500;
            font-size: 0.85rem;
            text-decoration: none;
            transition: var(--transition);
        }

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

        /* 雑誌の特集タイトル風ヒーローエリア (バナー画像背景) */
        .hero {
            max-width: 900px; /* 下のコンテナと同じ最大横幅に制限 */
            width: 100%;
            margin: 40px auto 24px; /* 中央寄せにし、下のコンテンツとの間隔を調整 */
            background-color: #fefcf3;
            background-image: url('images/qa_header_banner.png');
            background-size: cover;
            background-position: right center;
            background-repeat: no-repeat;
            border: 3px solid var(--text-main); /* メイン枠と同じ手書きイラスト調の黒枠を追加 */
            border-radius: var(--sketch-radius-3); /* 角丸を適用 */
            position: relative;
            overflow: hidden;
            box-shadow: var(--illust-shadow-muted);
            box-sizing: border-box;
        }

        .hero-container {
            width: 100%;
            min-height: 220px;
            padding: 32px 40px; /* 左端のテキストが枠線から適度に離れるように余白を設定 */
            display: flex;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
        }

        .hero-content {
            flex: none;
            width: 100%;
            max-width: 440px; /* テキストが右側のイラストと被らないように確実に制限 */
            background-color: transparent;
            padding: 0 0 0 4.5rem; /* ちょい右：3.5remから4.5remへ */
            margin-top: 55px; /* ちょい下：説明文削除に伴い、タイトルとバッジをさらに下へ調整 */
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background-color: var(--accent);
            color: #fff;
            font-weight: 700;
            font-size: 0.8rem;
            padding: 4px 14px;
            border-radius: 4px;
            margin-top: 10px;
            margin-bottom: 4px;
            box-shadow: 2px 2px 0px rgba(0,0,0,0.05);
            white-space: nowrap; /* 「ム」などの不要な改行を防止 */
        }

        .hero h1 {
            font-size: 2.3rem;
            font-weight: 800;
            color: var(--primary-dark);
            margin-bottom: 6px;
            letter-spacing: -0.01em;
            display: inline-block;
            position: relative;
            white-space: nowrap; /* タイトルの改行を防止 */
        }

        .hero h1::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 8px;
            background: var(--accent);
            border-radius: var(--sketch-radius-1);
            opacity: 0.6;
            z-index: -1;
        }

        .hero p {
            font-size: 0.85rem;
            color: var(--text-main);
            margin-top: 14px;
            font-weight: 500;
            line-height: 1.6;
            background-color: rgba(255, 255, 255, 0.92); /* 白枠の背景 */
            border: 2px solid var(--text-main); /* 手書き風の細い黒枠 */
            border-radius: var(--radius-sm);
            padding: 8px 16px;
            box-shadow: 2px 2px 0px var(--border-color);
            display: inline-block;
        }

        /* メインレイアウト（A4用紙風のコンテナ） */
        .container {
            max-width: 900px;
            margin: 40px auto 80px;
            padding: 50px 60px; /* 余白を多めにとり、印刷時のレイアウトに近づける */
            background-color: #ffffff;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02);
            border-radius: 4px;
            border: 1px solid #e1e8ed;
            position: relative;
        }

        /* 配布用資料のラベル */
        .handout-label {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 0.75rem;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            padding: 2px 10px;
            border-radius: 4px;
            font-weight: 700;
            letter-spacing: 0.05em;
            background-color: #fff;
        }

        /* 監修ドクターコラム紹介枠 */
        .doctor-intro-card {
            background: #ffffff;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-3);
            padding: 24px;
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 36px;
            position: relative;
            box-shadow: var(--illust-shadow-dark);
            background-image: radial-gradient(var(--border-light) 1.5px, transparent 1.5px);
            background-size: 12px 12px;
        }

        .doctor-intro-card::before {
            content: "このページの監修";
            position: absolute;
            top: -14px;
            left: 20px;
            background: var(--primary);
            color: #fff;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 4px 12px;
            border: 2px solid var(--text-main);
            border-radius: var(--sketch-radius-1);
            box-shadow: 2px 2px 0 var(--text-main);
        }

        .doctor-avatar-container {
            flex-shrink: 0;
        }

        .doctor-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--text-main);
            background-color: #fff;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
        }

        .doctor-intro-info h3 {
            font-size: 1.1rem;
            color: var(--primary-dark);
            margin-bottom: 6px;
            font-weight: 700;
        }

        .doctor-intro-info p {
            font-size: 0.85rem;
            color: var(--text-main);
            line-height: 1.7;
        }

        /* カテゴリタブナビゲーション */
        .qa-nav {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 36px;
            flex-wrap: wrap;
        }

        /* 質問のジャンル枠コンテナ */
        .qa-category-wrapper {
            position: relative;
            background-color: var(--bg-card);
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-2);
            padding: 32px 24px 24px 24px;
            margin-top: 24px;
            margin-bottom: 36px;
            box-shadow: var(--illust-shadow-muted);
            box-sizing: border-box;
            width: 100%;
        }

        /* 質問のジャンル見出しラベル */
        .qa-category-label {
            position: absolute;
            top: -16px;
            left: 24px;
            background-color: var(--accent);
            color: #ffffff;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-1);
            padding: 4px 16px;
            font-size: 0.85rem;
            font-weight: 800;
            box-shadow: 2px 2px 0px var(--text-main);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            z-index: 10;
        }

        @media (max-width: 768px) {
            .qa-category-wrapper {
                padding: 24px 16px 16px 16px;
                margin-top: 16px;
                margin-bottom: 24px;
            }
            .qa-category-label {
                top: -14px;
                left: 16px;
                font-size: 0.75rem;
                padding: 3px 10px;
            }
        }

        .qa-tab {
            padding: 10px 20px;
            background: #ffffff;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-1);
            color: var(--text-main);
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 2px 2px 0 var(--text-main);
        }

        .qa-tab:hover, .qa-tab.active {
            background-color: var(--primary-light);
            border-color: var(--primary-dark);
            color: var(--primary-dark);
            transform: translate(-2px, -2px);
            box-shadow: 4px 4px 0 var(--primary-dark);
        }

        .qa-tab:active {
            transform: translate(0px, 0px);
            box-shadow: 1px 1px 0 var(--primary-dark);
        }

        /* Q&A チャットセクション */
        .qa-section {
            background: #ffffff;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-3);
            padding: 36px 24px;
            box-shadow: var(--illust-shadow-muted);
        }

        .section-title {
            font-size: 1.25rem;
            color: var(--primary-dark);
            font-weight: 700;
            margin-bottom: 32px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .section-title i {
            color: var(--accent);
        }

        /* チャットUIフロー */
        .chat-flow {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .chat-group {
            border-bottom: 2px dashed var(--border-color);
            padding-bottom: 40px;
        }

        .chat-group:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        /* 吹き出しレイアウト */
        .bubble-row {
            display: flex;
            margin-bottom: 24px;
            width: 100%;
            align-items: flex-start;
        }

        .bubble-row:last-child {
            margin-bottom: 0;
        }

        /* 患者の質問（左側配置） */
        .bubble-row.patient {
            justify-content: flex-start;
        }

        .patient-avatar-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 16px;
            flex-shrink: 0;
            width: 70px;
        }

        .patient-avatar-img {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--text-main);
            background-color: #fff;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
        }

        .patient-label {
            font-size: 0.7rem;
            color: var(--text-main);
            font-weight: 700;
            margin-top: 6px;
            text-align: center;
            white-space: nowrap;
        }

        .bubble-question {
            background-color: var(--accent-bg);
            color: var(--text-main);
            border: 3px solid var(--text-main);
            border-radius: 12px 18px 14px 16px;
            padding: 16px 20px;
            max-width: 70%;
            position: relative;
            box-shadow: var(--illust-shadow-accent);
        }

        .bubble-question::before {
            content: '';
            position: absolute;
            left: -10px;
            top: 20px;
            width: 14px;
            height: 14px;
            background-color: var(--accent-bg);
            border-left: 3px solid var(--text-main);
            border-bottom: 3px solid var(--text-main);
            transform: rotate(45deg);
            z-index: 1;
        }

        .bubble-question::after {
            display: none;
        }

        .bubble-question h4 {
            font-size: 1.05rem;
            color: var(--accent-dark);
            font-weight: 700;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* 院長（右側配置） */
        .bubble-row.doctor {
            justify-content: flex-end;
        }

        .doctor-avatar-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-left: 16px;
            flex-shrink: 0;
            width: 70px;
            order: 2;
        }

        .doctor-avatar-img {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--text-main);
            background-color: #fff;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
        }

        .doctor-label {
            font-size: 0.7rem;
            color: var(--primary-dark);
            font-weight: 700;
            margin-top: 6px;
            text-align: center;
            white-space: nowrap;
        }

        .bubble-answer {
            background-color: var(--primary-light);
            color: var(--text-main);
            border: 3px solid var(--text-main);
            border-radius: 18px 12px 16px 14px;
            padding: 18px 20px;
            max-width: 75%;
            position: relative;
            order: 1;
            box-shadow: var(--illust-shadow-primary);
        }

        .bubble-answer::before {
            content: '';
            position: absolute;
            right: -10px;
            top: 20px;
            width: 14px;
            height: 14px;
            background-color: var(--primary-light);
            border-right: 3px solid var(--text-main);
            border-top: 3px solid var(--text-main);
            transform: rotate(45deg);
            z-index: 1;
        }

        .bubble-answer::after {
            display: none;
        }

        /* 図表コンテナ */
        .diagram-container {
            background-color: #ffffff;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-3);
            padding: 20px;
            margin: 20px 0;
            box-shadow: var(--illust-shadow-muted);
        }

        .diagram-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
            border-bottom: 3px solid var(--text-main);
            padding-bottom: 8px;
        }

        .diagram-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--primary-dark);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .diagram-badge {
            background-color: var(--primary);
            color: #fff;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 3px 10px;
            border: 2px solid var(--text-main);
            border-radius: var(--sketch-radius-1);
            box-shadow: 2px 2px 0 var(--text-main);
            letter-spacing: 0.05em;
        }

        /* 3カラム横並び図説 */
        .infographic-cards {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            margin-top: 10px;
        }

        .info-card {
            background-color: var(--primary-light);
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-2);
            padding: 20px 12px;
            width: 32%;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            transition: var(--transition);
            box-shadow: var(--illust-shadow-muted);
        }

        .info-card:hover {
            border-color: var(--primary-dark);
            transform: translate(-3px, -3px);
            background-color: #ffffff;
            box-shadow: var(--illust-shadow-primary);
        }

        .info-card-step {
            position: absolute;
            top: -12px;
            left: 10px;
            background-color: var(--accent);
            color: white;
            font-size: 0.65rem;
            font-weight: 900;
            padding: 2px 10px;
            border: 2px solid var(--text-main);
            border-radius: var(--sketch-radius-1);
            box-shadow: 2px 2px 0 var(--text-main);
        }

        .info-card-icon {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background-color: #ffffff;
            border: 3px solid var(--text-main);
            box-shadow: 2px 2px 0 var(--text-main);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            color: var(--primary);
            margin: 8px 0 12px;
            transition: var(--transition);
        }

        .info-card:hover .info-card-icon {
            background-color: var(--primary);
            color: #ffffff;
            transform: scale(1.05);
            box-shadow: 2px 2px 0 var(--primary-dark);
        }

        .info-card-title {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 6px;
            line-height: 1.4;
        }

        .info-card-text {
            font-size: 0.75rem;
            color: var(--text-main);
            line-height: 1.5;
        }

        .info-card-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 1.2rem;
            opacity: 0.6;
        }

        /* ルート比較図表 */
        .route-diagram {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-top: 10px;
        }

        .route-row {
            display: flex;
            align-items: center;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-1);
            padding: 14px 16px;
            position: relative;
            box-shadow: var(--illust-shadow-muted);
        }

        .route-row.danger {
            border-color: #f2c9d0;
            background-color: #fff9fa;
        }

        .route-row.safe {
            border-color: #c9e8e2;
            background-color: #f5fbf9;
        }

        .route-badge {
            font-size: 0.7rem;
            font-weight: 700;
            padding: 2px 10px;
            border-radius: 4px;
            color: #fff;
            margin-right: 16px;
            flex-shrink: 0;
        }

        .route-row.danger .route-badge {
            background-color: var(--accent-dark);
        }

        .route-row.safe .route-badge {
            background-color: #2e8b75;
        }

        .route-content {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
        }

        .route-step-title {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text-main);
            min-width: 120px;
        }

        .route-arrow-icon {
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .route-result {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--text-main);
        }

        .route-row.danger .route-result {
            color: var(--accent-dark);
        }

        .route-row.safe .route-result {
            color: #2e8b75;
        }

        /* フッター */
        footer {
            text-align: center;
            padding: 32px 24px;
            background-color: #ffffff;
            color: var(--text-muted);
            font-size: 0.8rem;
            border-top: 3px solid var(--primary);
        }

        footer p {
            max-width: 600px;
            margin: 0 auto 6px;
        }

        /* ------------------------------------------
           📊 わかりやすいインフォグラフィックス（図説）
        ------------------------------------------ */
        .infographic-container {
            background-color: #ffffff;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-3);
            padding: 24px;
            margin: 20px 0;
            box-shadow: var(--illust-shadow-muted);
        }
        
        .info-title {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--primary-dark);
            margin-bottom: 24px;
            text-align: center;
            border-bottom: 3px solid var(--text-main);
            padding-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        /* 1. 減塩インフォグラフィックス */
        .flow-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
        }
        
        .flow-step {
            background-color: var(--primary-light);
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-1);
            padding: 16px 10px;
            flex: 1;
            text-align: center;
            position: relative;
            box-shadow: 3px 3px 0 var(--text-main);
            min-height: auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 4px;
        }
        
        .flow-step.warning {
            background-color: #fffbef;
        }
        
        .flow-step.danger {
            background-color: var(--accent-bg);
            border-color: var(--accent-dark);
            box-shadow: 3px 3px 0 var(--accent-dark);
        }
        
        .step-num {
            position: absolute;
            top: -12px;
            left: 12px;
            background-color: var(--text-main);
            color: #fff;
            font-size: 0.8rem;
            font-weight: 800;
            padding: 2px 10px;
            border: 2px solid var(--text-main);
            border-radius: 50%;
        }
        
        .flow-step.danger .step-num {
            background-color: var(--accent-dark);
            border-color: var(--accent-dark);
        }
        
        .step-icon {
            font-size: 2.2rem;
            color: var(--primary);
            margin: 12px 0 8px;
        }
        
        .flow-step.warning .step-icon {
            color: #d97706;
        }
        
        .flow-step.danger .step-icon {
            color: var(--accent-dark);
        }
        
        .step-title {
            font-size: 0.95rem;
            font-weight: 800;
            margin-bottom: 8px;
            color: var(--text-main);
        }
        
        .flow-step.danger .step-title {
            color: var(--accent-dark);
        }
        
        .step-desc {
            font-size: 0.8rem;
            color: var(--text-main);
            line-height: 1.5;
        }
        
        .flow-arrow {
            font-size: 1.5rem;
            color: var(--text-main);
            animation: bounceRight 2s infinite;
        }

        @keyframes bounceRight {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(4px); }
        }

        @keyframes bounceDown {
            0%, 100% { transform: translateY(0) rotate(90deg); }
            50% { transform: translateY(4px) rotate(90deg); }
        }
        
        .contrast-box {
            margin-top: 15px;
        }
        
        .contrast-item.good {
            background-color: #f0fdf4;
            border: 3px solid #16a34a;
            border-radius: var(--sketch-radius-2);
            padding: 16px 20px;
            box-shadow: 3px 3px 0 #16a34a;
        }
        
        .contrast-item.good .badge {
            background-color: #16a34a;
            color: #fff;
            font-size: 0.8rem;
            font-weight: 800;
            padding: 3px 10px;
            border-radius: 4px;
            display: inline-block;
            margin-bottom: 8px;
            border: 2px solid #15803d;
        }
        
        .contrast-item.good p {
            font-size: 0.9rem;
            color: #14532d;
            margin: 0;
            font-weight: 700;
        }

        /* 2. フットケアインフォグラフィックス */
        .foot-threat-chain {
            background-color: #fff5f6;
            border: 3px solid var(--accent-dark);
            border-radius: var(--sketch-radius-1);
            padding: 20px;
            margin-bottom: 24px;
            box-shadow: 3px 3px 0 var(--accent-dark);
        }
        
        .chain-title {
            font-size: 1rem;
            font-weight: 800;
            color: var(--accent-dark);
            margin-bottom: 16px;
            text-align: center;
        }
        
        .chain-flow {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }
        
        .chain-node {
            background: #fff;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-3);
            padding: 12px 14px;
            flex: 1;
            text-align: center;
            box-shadow: 2px 2px 0 var(--text-main);
        }
        
        .chain-node.danger {
            border-color: var(--accent-dark);
            background-color: var(--accent-bg);
            box-shadow: 3px 3px 0 var(--accent-dark);
        }
        
        .chain-node .node-badge {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 800;
            background-color: var(--text-muted);
            color: #fff;
            padding: 2px 8px;
            border-radius: 4px;
            margin-bottom: 6px;
            border: 1px solid var(--text-main);
        }
        
        .chain-node.danger .node-badge {
            background-color: var(--accent-dark);
            border-color: var(--accent-dark);
        }
        
        .chain-node p {
            font-size: 0.8rem;
            color: var(--text-main);
            margin: 0;
            line-height: 1.5;
            font-weight: 700;
        }
        
        .chain-next {
            color: var(--accent-dark);
            font-size: 1.4rem;
        }
        
        .defense-blocks {
            background-color: var(--primary-light);
            border: 3px solid var(--primary-dark);
            border-radius: var(--sketch-radius-2);
            padding: 20px;
            box-shadow: 3px 3px 0 var(--primary-dark);
        }
        
        .defense-title {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--primary-dark);
            margin-bottom: 16px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        
        .defense-cards {
            display: flex;
            justify-content: space-between;
            gap: 16px;
        }
        
        .defense-card {
            background: #fff;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-3);
            padding: 16px 12px;
            flex: 1;
            text-align: center;
            box-shadow: 2px 2px 0 var(--text-main);
        }
        
        .def-icon {
            font-size: 1.8rem;
            color: var(--primary);
            margin-bottom: 8px;
        }
        
        .def-title {
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--primary-dark);
            margin-bottom: 8px;
        }
        
        .defense-card p {
            font-size: 0.8rem;
            color: var(--text-main);
            margin: 0;
            line-height: 1.5;
        }

        /* 3. 服薬継続インフォグラフィックス */
        .routes-wrapper {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }
        
        .route-column {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .branch-header {
            font-size: 0.95rem;
            font-weight: 800;
            padding: 12px;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-1);
            text-align: center;
            margin-bottom: 20px;
            box-shadow: 3px 3px 0 var(--text-main);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        
        .danger-branch .branch-header {
            background-color: var(--accent-bg);
            color: var(--accent-dark);
            border-color: var(--accent-dark);
            box-shadow: 3px 3px 0 var(--accent-dark);
        }
        
        .safe-branch .branch-header {
            background-color: #f0fdf4;
            color: #16a34a;
            border-color: #16a34a;
            box-shadow: 3px 3px 0 #16a34a;
        }
        
        .branch-steps {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            width: 100%;
        }
        
        .branch-step-card {
            background: #fff;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-3);
            padding: 14px;
            width: 100%;
            text-align: center;
            box-shadow: 2px 2px 0 var(--text-main);
        }
        
        .branch-step-card.alert {
            background-color: #fffafb;
            border-color: var(--accent);
        }
        
        .branch-step-card.fatal {
            background-color: #fdf2f4;
            border-color: var(--accent-dark);
            box-shadow: 3px 3px 0 var(--accent-dark);
        }
        
        .branch-step-card.success {
            background-color: #f7fee7;
            border-color: #84cc16;
        }
        
        .branch-step-card.gold {
            background-color: #f0fdf4;
            border-color: #16a34a;
            box-shadow: 3px 3px 0 #16a34a;
        }
        
        .branch-step-card .step-label {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 800;
            background-color: var(--text-muted);
            color: #fff;
            padding: 2px 8px;
            border-radius: 4px;
            margin-bottom: 6px;
            border: 1px solid var(--text-main);
        }
        
        .danger-branch .step-label {
            background-color: var(--accent);
            border-color: var(--accent-dark);
        }
        
        .danger-branch .fatal .step-label {
            background-color: var(--accent-dark);
            border-color: var(--accent-dark);
        }
        
        .safe-branch .step-label {
            background-color: var(--primary);
            border-color: var(--primary-dark);
        }
        
        .safe-branch .gold .step-label {
            background-color: #16a34a;
            border-color: #15803d;
        }
        
        .branch-step-card p {
            font-size: 0.8rem;
            color: var(--text-main);
            margin: 0;
            line-height: 1.5;
            font-weight: 700;
        }
        
        .branch-arrow {
            font-size: 1.2rem;
            color: var(--text-main);
        }
        
        .danger-branch .branch-arrow {
            color: var(--accent-dark);
        }
        
        .safe-branch .branch-arrow {
            color: #16a34a;
        }

        /* ==========================================
           🖨️ 印刷用 (PDF出力用) スタイル設定
        ========================================== */
        @media print {
            /* 印刷用紙サイズ設定 */
            @page {
                size: A4 portrait;
                margin: 10mm 10mm 10mm 10mm;
            }

            /* 不要なUI要素を隠す */
            header,
            .back-btn,
            .print-btn,
            .print-single-btn,
            .qa-category-wrapper,
            .qa-nav,
            .selected-category-title,
            .hero,
            footer p:last-child {
                display: none !important;
            }

            /* 紙面印刷に最適化した基本フォント & 背景 */
            body {
                background-color: #ffffff !important;
                background-image: none !important;
                color: #1a1a1a !important;
                font-size: 10.5pt !important;
                line-height: 1.5 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            /* メインコンテナの枠・シャドウの解除 */
            .container {
                max-width: 100% !important;
                margin: 0 !important;
                padding: 10px 0 0 0 !important;
                box-shadow: none !important;
                border: none !important;
            }

            /* 印刷時は非活性な質問もすべて強制的に表示する（フィルタを無効化） */
            .chat-flow {
                gap: 20px !important;
            }

            .chat-group {
                display: block !important;
                opacity: 1 !important;
                transform: none !important;
                page-break-inside: avoid; /* 各Q&Aが途中で切れないようにする */
                border: none !important;
                padding-top: 10px !important;
                padding-bottom: 10px !important;
                margin-top: 10px !important;
                margin-bottom: 10px !important;
            }
            .accordion-body {
                max-height: none !important;
                opacity: 1 !important;
                display: block !important;
                padding: 10px 0 !important;
                overflow: visible !important;
            }
            .accordion-icon, .share-btn {
                display: none !important;
            }

            .doctor-intro-card {
                border: 1px solid var(--border-color) !important;
                background-color: #fcfdfe !important;
                margin-bottom: 20px !important;
                page-break-inside: avoid;
                box-shadow: none !important;
                border-radius: var(--radius-md) !important;
            }

            /* 吹き出しの印刷用レイアウト（アバターと本文のバランス調整） */
            .patient-avatar-box,
            .doctor-avatar-box {
                width: 55px !important;
                margin-right: 10px !important;
                margin-left: 10px !important;
            }

            .patient-avatar-img,
            .doctor-avatar-img {
                width: 45px !important;
                height: 45px !important;
                border: 1.5px solid #888 !important;
            }

            /* 吹き出しデザインの平滑化（インク使用量を考慮） */
            .bubble-question {
                background-color: #fdf8f9 !important;
                border: 1.5px solid var(--accent) !important;
                color: #1a1a1a !important;
                max-width: 90% !important;
                border-radius: 8px !important;
                box-shadow: none !important;
                padding: 12px 16px !important;
            }

            .bubble-question::before,
            .bubble-question::after {
                display: none !important; /* 印刷時のバグを防ぐため三角は非表示 */
            }

            .bubble-answer {
                background-color: #f5fafc !important;
                border: 1.5px solid var(--primary) !important;
                color: #1a1a1a !important;
                max-width: 90% !important;
                border-radius: 8px !important;
                box-shadow: none !important;
                padding: 12px 16px !important;
            }

            .bubble-answer::before,
            .bubble-answer::after {
                display: none !important;
            }

            /* 3カラム図説を印刷時にも必ず横並びで表示 */
            .diagram-container {
                border: 1px solid var(--border-color) !important;
                background-color: #ffffff !important;
                box-shadow: none !important;
                padding: 15px !important;
                margin: 15px 0 !important;
                page-break-inside: avoid;
            }

            .infographic-cards {
                display: flex !important;
                flex-direction: row !important;
                justify-content: space-between !important;
                gap: 8px !important;
            }

            .info-card {
                width: 32% !important;
                background-color: #ffffff !important;
                border: 1px solid var(--border-color) !important;
                padding: 10px 6px !important;
                box-shadow: none !important;
            }

            .info-card-icon {
                width: 38px !important;
                height: 38px !important;
                font-size: 1.2rem !important;
                margin: 4px 0 8px 0 !important;
                background-color: #ffffff !important;
            }

            .info-card-title {
                font-size: 0.8rem !important;
            }

            .info-card-text {
                font-size: 0.7rem !important;
            }

            .info-card-arrow {
                font-size: 0.9rem !important;
            }

            /* ルート図表の印刷用調整 */
            .route-diagram {
                gap: 8px !important;
            }

            .route-row {
                padding: 10px 12px !important;
                border: 1px solid var(--border-color) !important;
                box-shadow: none !important;
                border-radius: var(--radius-sm) !important;
            }

            .route-row.danger {
                background-color: #fff5f6 !important;
                border-color: #f2c9d0 !important;
            }

            .route-row.safe {
                background-color: #f5fbf9 !important;
                border-color: #c9e8e2 !important;
            }

            /* フッター */
            footer {
                border-top: 1px solid var(--primary-dark) !important;
                padding: 15px 0 !important;
                margin-top: 30px !important;
            }

            /* 📊 インフォグラフィックス印刷用補正 */
            .infographic-container {
                border: 1.5px solid var(--text-main) !important;
                box-shadow: none !important;
                background-color: #ffffff !important;
                page-break-inside: avoid;
                padding: 15px !important;
            }
            .info-title {
                border-bottom: 1.5px solid var(--text-main) !important;
                padding-bottom: 8px !important;
                margin-bottom: 15px !important;
            }
            
            /* 横並びのフレックスボックスを印刷時に縦並びへリセットしてはみ出しを防ぐ */
            .flow-wrapper, .defense-cards, .routes-wrapper, .chain-flow {
                flex-direction: column !important;
                gap: 12px !important;
            }
            .flow-step, .defense-card, .route-column, .chain-node {
                width: 100% !important;
                min-height: auto !important;
                flex: none !important;
            }
            
            /* 矢印の方向を印刷時に縦向きに変更 */
            .flow-arrow, .chain-next {
                transform: rotate(90deg) !important;
                margin: 6px 0 !important;
                display: block !important;
                text-align: center !important;
            }
            
            .flow-step, .contrast-item.good, .foot-threat-chain, .chain-node, .defense-blocks, .defense-card, .branch-header, .branch-step-card {
                border: 1.5px solid var(--text-main) !important;
                box-shadow: none !important;
                border-radius: var(--radius-sm) !important;
                background-color: #ffffff !important;
                min-height: auto !important;
            }
            .flow-step.danger, .chain-node.danger, .branch-step-card.fatal {
                border-color: var(--accent-dark) !important;
                background-color: #fdf2f4 !important;
            }
            .contrast-item.good, .branch-step-card.gold, .safe-branch .branch-header {
                border-color: #16a34a !important;
                background-color: #f0fdf4 !important;
            }
            .step-num, .contrast-item.good .badge, .chain-node .node-badge, .branch-step-card .step-label {
                border: 1px solid var(--text-main) !important;
            }
            .flow-arrow, .chain-next, .branch-arrow {
                animation: none !important;
            }

            /* 質問タイトル印刷用補正 */
            .question-title-box {
                border: 1.5px solid var(--text-main) !important;
                box-shadow: none !important;
                background-color: #ffffff !important;
                margin-bottom: 12px !important;
                padding: 10px 14px !important;
            }
            .question-title-box h2::before {
                border: 1.5px solid var(--text-main) !important;
                box-shadow: none !important;
            }

            /* 1文回答印刷用補正 */
            .quick-answer-box {
                border: 1.5px solid var(--text-main) !important;
                box-shadow: none !important;
                background-color: var(--primary-light) !important;
                margin-bottom: 12px !important;
                padding: 10px 14px !important;
            }
            .quick-answer-badge {
                border: 1.5px solid var(--text-main) !important;
                box-shadow: none !important;
            }
            .quick-answer-image-wrapper {
                border: 1.5px solid var(--text-main) !important;
                background-color: #ffffff !important;
                background-image: none !important;
                padding: 12px !important;
                margin-top: 6px !important;
                max-width: 310px !important;
                margin-left: auto !important;
                margin-right: auto !important;
                box-sizing: border-box !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                border-radius: var(--sketch-radius-1) !important;
            }
            .infographic-image {
                border-radius: 4px !important;
                width: 82% !important;
                height: auto !important;
                max-height: none !important;
                object-fit: contain !important;
                box-sizing: border-box !important;
            }

            /* 1つの質問のみを印刷するモード用スタイル */
            body.print-one-mode .doctor-intro-card,
            body.print-one-mode .qa-index-container,
            body.print-one-mode .selected-category-title,
            body.print-one-mode .chat-group:not(.print-target) {
                display: none !important;
            }
        }

        /* 質問タイトル（吹き出しの外に配置）のイラスト風装飾 */
        .question-title-box {
            background-color: #fef3c7;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-2);
            padding: 16px 20px;
            margin-bottom: 24px;
            box-shadow: 4px 4px 0 var(--text-main);
            position: relative;
            box-sizing: border-box;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
        }
        .print-single-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background-color: var(--primary);
            color: #fff;
            border: 2px solid var(--text-main);
            border-radius: var(--radius-sm);
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 2px 2px 0 var(--text-main);
            white-space: nowrap;
        }
        .print-single-btn i {
            font-size: 0.9rem;
        }
        .print-single-btn:hover {
            background-color: var(--primary-dark);
            transform: translate(-1px, -1px);
            box-shadow: 3px 3px 0 var(--text-main);
        }
        .print-single-btn:active {
            transform: translate(0, 0);
            box-shadow: 1px 1px 0 var(--text-main);
        }

        /* モバイル画面（768px以下）では非表示 */
        @media (max-width: 768px) {
            .print-single-btn {
                display: none !important;
            }
            .question-title-box {
                display: block;
            }
        }
        .question-title-box h2 {
            font-size: 1.2rem;
            color: var(--text-main);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 800;
        }
        /* ポップな「Q」のイラスト調バッジ */
        .question-title-box h2::before {
            content: "Q";
            display: inline-flex;
            justify-content: center;
            align-items: center;
            background-color: var(--accent-orange);
            color: var(--text-main); /* 白抜きから、視認性の高い濃い黒茶色（メインテキスト色）に変更 */
            border: 3px solid var(--text-main);
            border-radius: 50%;
            width: 32px;
            height: 32px;
            font-weight: 900;
            font-size: 1.3rem; /* 文字サイズをわずかに大きく */
            box-shadow: 2px 2px 0 var(--text-main);
            flex-shrink: 0;
        }

        /* 簡潔な1文の回答 (A) ＋ 画像 の一体型イラスト風ボックス */
        .quick-answer-box {
            background-color: var(--primary-light);
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-2);
            padding: 20px;
            margin-bottom: 24px;
            box-shadow: 4px 4px 0 var(--primary);
            position: relative;
            box-sizing: border-box;
            width: 100%;
            display: flex;
            flex-direction: column; /* 画像を下に配置するために縦並びへ */
            gap: 16px;
        }

        /* 回答の上部ヘッダー（バッジとテキスト） */
        .quick-answer-header {
            display: flex;
            align-items: center;
            gap: 16px;
            width: 100%;
        }

        .quick-answer-badge {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            background-color: var(--primary);
            color: white;
            border: 3px solid var(--text-main);
            border-radius: 50%;
            width: 32px;
            height: 32px;
            font-weight: 900;
            font-size: 1.2rem;
            box-shadow: 2px 2px 0 var(--text-main);
            flex-shrink: 0;
        }

        .quick-answer-text {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin: 0;
            line-height: 1.6;
        }

        /* Aボックス内蔵の画像用ラッパー */
        .quick-answer-image-wrapper {
            background-color: #ffffff;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-1);
            padding: 12px;
            margin-top: 4px;
            width: 100%;
            max-width: 440px; /* 画像が大きすぎないようにコンパクトに制限 */
            align-self: center; /* 左右中央寄せ */
            box-shadow: 2px 2px 0 var(--text-main);
            box-sizing: border-box;
            background-image: radial-gradient(var(--border-light) 1.5px, transparent 1.5px);
            background-size: 10px 10px;
        }

        .infographic-image {
            width: 100%;
            height: auto;
            max-width: 100%;
            display: block;
            border-radius: var(--radius-sm);
            object-fit: contain;
        }

        /* 選択中のカテゴリタイトル表示用 */
        .selected-category-title {
            font-size: 1.4rem;
            color: var(--text-main);
            margin: 0 0 24px 0;
            padding-bottom: 12px;
            border-bottom: 3px solid var(--primary);
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 800;
        }
        .selected-category-title i {
            color: var(--primary);
        }

        @media (max-width: 768px) {
            .container {
                padding: 24px 16px;
                margin: 20px auto 40px;
                border-radius: 0;
                border-left: none;
                border-right: none;
            }
            .hero {
                margin: 20px 12px 16px;
                width: calc(100% - 24px); /* スマホ画面で左右に少しマージンを空けてカード型にする */
                background-position: right -20px center;
            }
            .hero-container {
                background-size: cover;
                min-height: 160px;
                padding: 20px 16px;
                flex-direction: column;
                text-align: left;
                align-items: flex-start;
            }
            .hero-content {
                max-width: 55%; /* テキストの幅を左側55%に制限し、お顔との重なりを防ぐ */
                background-color: transparent !important;
                padding: 0 0 0 3.2rem !important; /* スマホでのちょい右調整 */
                border-radius: 0 !important;
                box-shadow: none !important;
                margin-top: 22px !important; /* スマホでのちょい下調整 */
            }
            .hero h1 {
                font-size: 1.4rem !important; /* タイトルをスマホ向けに小さく */
                line-height: 1.3;
            }
            .hero h1::after {
                left: 0;
                height: 4px; /* 下線を少し細く */
            }
            .hero p {
                font-size: 0.75rem !important; /* 説明文をスマホ向けに小さく */
                margin-top: 8px;
                line-height: 1.4;
                padding: 6px 12px; /* スマホ用に余白を少し調整 */
            }
            .hero-badge {
                font-size: 0.7rem !important; /* バッジもスマホ向けに縮小 */
                padding: 2px 8px;
                margin-top: 4px;
            }
            .doctor-intro-card {
                flex-direction: column;
                align-items: center;
                text-align: left; /* テキスト全体は左寄せに変更 */
                gap: 12px;
                padding-top: 24px;
            }
            
            /* アバターと吹き出しのサイズ調整 */
            .patient-avatar-box, .doctor-avatar-box {
                width: 50px;
                margin-right: 10px;
                margin-left: 0;
            }
            .doctor-avatar-box {
                margin-left: 10px;
                margin-right: 0;
            }
            .patient-avatar-img, .doctor-avatar-img {
                width: 45px;
                height: 45px;
            }
            .bubble-question, .bubble-answer {
                max-width: calc(100% - 60px);
                padding: 12px 16px;
            }
            .bubble-question::before {
                left: -8px;
                top: 16px;
                width: 10px;
                height: 10px;
            }
            .bubble-answer::before {
                right: -8px;
                top: 16px;
                width: 10px;
                height: 10px;
            }
            
            .qa-section {
                padding: 24px 12px;
            }
            .infographic-cards {
                flex-direction: column;
                gap: 16px;
            }
            .info-card {
                width: 100%;
                padding: 20px 16px;
            }
            .info-card-arrow {
                transform: rotate(90deg);
                margin: 4px 0;
            }
            .route-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            .route-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
            }
            .route-arrow-icon {
                transform: rotate(90deg);
                margin-left: 10px;
            }

            /* 📊 インフォグラフィックス用レスポンシブ設定（スマホでは縦に並べて読みやすさを最大化） */
            .flow-wrapper {
                flex-direction: column;
                gap: 12px;
            }
            .flow-step {
                width: 100%;
                padding: 16px 20px;
                align-items: flex-start;
                text-align: left;
            }
            .flow-step .step-title {
                font-size: 0.95rem;
                margin-top: 0;
                margin-bottom: 6px;
            }
            .flow-step .step-desc {
                font-size: 0.8rem;
                line-height: 1.5;
            }
            .flow-step .step-icon {
                font-size: 1.8rem;
                margin: 6px 0 10px 0;
                align-self: center;
            }
            .flow-step .step-num {
                top: -10px;
                left: 16px;
                font-size: 0.75rem;
                padding: 2px 8px;
            }
            .flow-arrow {
                font-size: 1.2rem;
                margin: 8px auto;
                transform: rotate(90deg);
                animation: bounceDown 2s infinite;
            }
            
            .chain-flow {
                flex-direction: column;
                gap: 12px;
            }
            .chain-node {
                width: 100%;
                padding: 14px 16px;
            }
            .chain-node .node-badge {
                font-size: 0.75rem;
                padding: 2px 8px;
                margin-bottom: 6px;
            }
            .chain-node p {
                font-size: 0.8rem;
                line-height: 1.5;
            }
            .chain-next {
                font-size: 1.2rem;
                margin: 4px auto;
                transform: rotate(90deg);
            }
            
            .defense-cards {
                flex-direction: column;
                gap: 12px;
            }
            .defense-card {
                width: 100%;
                padding: 16px;
            }
            .defense-card .def-icon {
                font-size: 1.6rem;
                margin: 4px 0 8px;
            }
            .defense-card .def-title {
                font-size: 0.9rem;
                margin-bottom: 6px;
            }
            .defense-card p {
                font-size: 0.8rem;
                line-height: 1.5;
            }
            
            .routes-wrapper {
                flex-direction: column;
                gap: 24px;
                align-items: stretch;
            }
            .route-column {
                width: 100%;
            }
            .route-column .branch-header {
                font-size: 0.95rem;
                padding: 10px;
                line-height: 1.4;
            }
            .route-column .branch-steps {
                gap: 12px;
            }
            .route-column .branch-step-card {
                padding: 14px;
            }
            .route-column .step-label {
                font-size: 0.75rem;
                padding: 2px 8px;
                margin-bottom: 6px;
            }
            .route-column .branch-step-card p {
                font-size: 0.8rem;
                line-height: 1.5;
            }
            .route-column .branch-arrow {
                font-size: 1.0rem;
                margin: 4px 0;
            }
        }

        /* 質問一覧目次コンテナ */
        .qa-index-container {
            background-color: #ffffff;
            border: 3px solid var(--text-main);
            border-radius: var(--sketch-radius-2);
            padding: 24px;
            margin-bottom: 30px;
            box-shadow: var(--illust-shadow-muted);
            box-sizing: border-box;
            width: 100%;
        }
        .qa-index-title {
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--text-muted);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .qa-index-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .qa-index-item {
            transition: var(--transition);
        }
        .qa-index-link {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--text-main);
            font-weight: 700;
            font-size: 0.95rem;
            padding: 10px 14px;
            border: 2px solid var(--border-color);
            border-radius: var(--radius-sm);
            background-color: var(--bg-base);
            transition: var(--transition);
        }
        .qa-index-link:hover {
            background-color: var(--primary-light);
            border-color: var(--primary);
            color: var(--primary-dark);
            transform: translateX(4px);
        }
        .qa-index-badge {
            background-color: var(--primary);
            color: #fff;
            font-size: 0.7rem;
            font-weight: 800;
            padding: 2px 10px;
            border-radius: 20px;
            white-space: nowrap;
        }
        .qa-index-item[data-category="nephrology"] .qa-index-badge {
            background-color: #2a7e9b;
        }
        .qa-index-item[data-category="lifestyle"] .qa-index-badge {
            background-color: #e88b9c;
        }
        .qa-index-item[data-category="footcare"] .qa-index-badge {
            background-color: #d97706;
        }
        .qa-index-text {
            line-height: 1.4;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        /* ==========================================
           🔄 アコーディオン開閉用スタイル
        ========================================== */
        .question-title-box {
            cursor: pointer;
            user-select: none;
            transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .question-title-box:hover {
            background-color: var(--primary-light) !important;
            border-color: var(--primary-dark) !important;
        }
        .question-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        /* 印刷ボタンの表示制御（デフォルト非表示、アコーディオンが開いた時のみ表示） */
        .print-single-btn {
            display: none !important;
        }
        .chat-group.open .print-single-btn {
            display: inline-flex !important;
        }
        
        /* アコーディオン開閉を示す矢印アイコン */
        .accordion-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background-color: #ffffff;
            border: 3px solid var(--text-main);
            border-radius: 50%;
            color: var(--text-main);
            font-size: 0.95rem;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 2px 2px 0 var(--text-main);
            flex-shrink: 0;
        }
        .chat-group.open .accordion-icon {
            transform: rotate(180deg);
        }
        /* アコーディオンの中身の開閉アニメーション */
        .accordion-body {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.4s ease-out;
            padding: 0 10px;
        }
        .chat-group.open .accordion-body {
            max-height: 2500px;
            opacity: 1;
            padding: 24px 10px 0 10px;
        }
        
        /* モバイル対応（768px以下）では印刷ボタンを常に非表示にする */
        @media (max-width: 768px) {
            .chat-group.open .print-single-btn {
                display: none !important;
            }
        }