:root {
            --fc-green: #006633;
            --fc-pink: #c40055;
            --fc-light-green: #76c043; /* グラフ10 (ドーナツ) 用の明るい緑 */
            --fc-gray: #d1d5db;      /* グラフ10 (ドーナツ) 用のグレー */

            --g11-dinner-red-01: #ffebe9; /* 最も薄い赤 */
            --g11-dinner-red-02: #ffc4c1;
            --g11-dinner-red-03: #ff9d99;
            --g11-dinner-red-04: #f76865;
            --g11-dinner-red-05: #ee3c38;
            --g11-dinner-red-06: #d9252a; /* 最も濃い赤 (既存の .color-red と同等) */

            /* ▼▼▼ グラフ11 (クリスマスケーキ) 用のグラデーションカラー ▼▼▼ */
            --g11-cake-teal-01: #e0f6f6; /* 最も薄いティール */
            --g11-cake-teal-02: #b2e6e3;
            --g11-cake-teal-03: #84d7d0;
            --g11-cake-teal-04: #56c8bd;
            --g11-cake-teal-05: #28b9aa;
            --g11-cake-teal-06: #0d6b63; /* 最も濃いティール (既存の .color-dark-teal と同等) */            
        }
        /* Tailwindのクラスを上書き・拡張するためのカスタムクラス */
        .text-fc-green {
            color: var(--fc-green);
        }
        .text-fc-pink {
            color: var(--fc-pink);
        }
        .border-t-fc-pink {
            border-top-color: var(--fc-pink);
        }
        
        .border-fc-green {
            border-color: var(--fc-green);
        }
        
        /* ▼▼▼ グラフ用のCSS（bodyスタイルを除く） ▼▼▼ */
        
        /* 画像の枠線や背景 */
        .chart-container {
            width: 100%;
            max-width: 700px; /* PCでの最大幅 */
            /* * 既存のレイアウト（max-w-4xl）内で中央配置されるため、
             * `margin: 20px;` を `margin: 20px auto;` に変更し、
             * 既存のセクションマージン（mb-12）と重複しないよう `margin-bottom` を調整します。
             */
            margin: 20px auto 0 auto; /* 上下左右の余白を調整 */
            padding: 25px 20px;
            background-color: #ffffff;
            border: 2px solid #c8e6c9; /* 元画像の薄い緑色の枠線 */
            border-radius: 10px;
            box-sizing: border-box; /* paddingを含めて幅を計算 */
        }

        /* グラフタイトル */
        .chart-container h2 {
            text-align: center;
            /* color: #d9252a; /* 元画像の赤色 */
            font-size: 1.25rem; /* 約20px */
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 5px; /* サブタイトルのためマージンを調整 */
        }

        /* グラフサブタイトル（対象者など） */
        .chart-container .chart-subtitle {
            text-align: center;
            font-size: 0.9rem;
            color: #555;
            margin-bottom: 30px;
        }

        /* グラフリストの基本スタイルリセット */
        .chart-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* 各グラフの行（ラベル + バー） */
        .chart-item {
            display: flex;
            align-items: center; /* 垂直方向中央揃え */
            margin-bottom: 12px;
            font-size: 0.95rem; /* 約15px */
        }

        /* 項目ラベル */
        .chart-label {
            /* 項目が長いため、ラベル幅を調整 */
            flex-basis: 300px; /* ラベルの幅を固定 */
            flex-shrink: 0; /* 幅が狭まっても縮まないようにする */
            text-align: right;
            padding-right: 12px;
            box-sizing: border-box;
            font-size: 0.9rem;             
        }

        /* バーの背景（薄い黄色） */
        .chart-bar-background {
            flex-grow: 1; /* 残りの幅すべてを占める */
            height: 30px; /* バーの高さ */
            background-color: #f9f7e8; /* 元画像の薄い黄色の背景 */
            border-radius: 999px; /* 角を完全に丸くする */
            overflow: hidden; /* 中の要素がはみ出ないようにする */
            position: relative; /* 子要素の基準点（なくても可だが念のため） */
        }

        /* 色付きのバー本体 */
        .chart-bar {
            height: 100%;
            display: flex; /* 中のテキスト（%）を配置するため */
            align-items: center;
            justify-content: flex-end; /* テキストを右端に寄せる */
            border-radius: 999px; /* 角を丸くする */
            box-sizing: border-box;
            transition: width 0.5s ease-out; /* 幅が変わる時のアニメーション */
            min-width: 3em; /* 最小幅を確保 (例: "8%" が入る幅) */
        }

        /* パーセンテージのテキスト */
        .percentage {
            font-weight: bold;
            font-size: 0.9rem; /* 約14px */
            padding: 0 12px; /* バーの端からの余白 */
            white-space: nowrap; /* テキストが改行しないように */
        }

        /* テキスト色（クラスで管理） */
        .text-white {
            color: #ffffff;
        }
        .text-dark {
            color: #333333; /* 白だと見えない場合用の濃い色 */
        }

        /* バーの色（クラスで管理） */
        .color-red {
            background-color: #d9252a;
        }
        .color-green {
            background-color: #3a9a3b;
        }
        .color-yellow {
            background-color: #f5b508;
        }
        
        /* スマートフォンなど狭い画面用の調整 (Responsive Design) */
        @media (max-width: 600px) {
            .chart-container {
                padding: 15px;
                /* margin: 10px; → autoマージンを維持 */
            }
            
            .chart-container h2 {
                font-size: 1.1rem; /* スマホ用にタイトルを少し小さく */
                margin-bottom: 5px;
            }
            .chart-container .chart-subtitle {
                font-size: 0.8rem;
                margin-bottom: 20px;
            }

            .chart-item {
                flex-direction: column; /* ラベルとバーを縦積みに変更 */
                align-items: flex-start; /* 左揃えに変更 */
                margin-bottom: 15px;
            }
            .chart-label {
                text-align: left; /* ラベルを左揃えに */
                flex-basis: auto; /* 幅の固定を解除 */
                width: 100%;
                padding-right: 0;
                margin-bottom: 5px; /* ラベルとバーの間の余白 */
            }
            .chart-bar-background {
                width: 100%; /* バーの幅を100%に */
            }
        }

        /* ▼▼▼ グラフ3用のCSS ▼▼▼ */
        /* * このグラフもラベルが長いため、PC表示でのラベル幅を広げます (既存の .chart-label を上書き) */
        .chart-container-graph3-new .chart-label {
            flex-basis: 320px; 
        }
    
        /* ▼▼▼ グラフ4用のCSS ▼▼▼ */        
        /* * このグラフもラベルが長いため、PC表示でのラベル幅を広げます (既存の .chart-label を上書き) */
        .chart-container-graph4-new .chart-label {
            flex-basis: 320px; /* 380pxから元の320pxに戻し、改行を許容します */
        }
        
        /* ▼▼▼ グラフ8用のCSS（削除）▼▼▼ */
        /* .chart-container-graph8 .chart-label { ... } の定義を削除しました */


        /* ▼▼▼ グラフ10（D3.js ドーナツ）用のCSS ▼▼▼ */
        /* D3.jsが生成するグラフ要素のスタイル */
        #d3-donut-chart {
            /* D3側でサイズが設定されるため、最小限の高さを確保 */
            min-height: 300px; 
            margin-top: 1.5rem; /* タイトルとの余白 */
        }

        #d3-donut-chart text {
            font-family: "メイリオ", Meiryo, sans-serif;
            font-weight: bold;
            fill: #ffffff; /* デフォルトのテキスト色は白 */
            pointer-events: none; /* テキストがマウスイベントを邪魔しないように */
        }
        
        /* D3.jsで生成するパス（円弧）のスタイル */
        #d3-donut-chart .arc-path {
            transition: transform 0.2s ease-out, opacity 0.2s ease-out;
            cursor: pointer;
        }
        
        /* インタラクティブなホバーエフェクト */
        #d3-donut-chart .arc-path:hover {
            transform: scale(1.03); /* マウスオーバーで少し拡大 */
            opacity: 0.85; /* 少し半透明にする */
        }

        /* グラフ上のラベル（数値）のスタイル */
        #d3-donut-chart .donut-label-percent {
            font-size: 1.25rem; /* 20px */
        }
        
        /* グラフ上のラベル（凡例）のスタイル */
        #d3-donut-chart .donut-label-category {
            font-size: 0.85rem; /* 14px */
        }
        
        /* 「未定」セグメント（背景が明るいグレー）のテキスト色を調整 */
        #d3-donut-chart .label-group-gray text {
            fill: #444444; /* グレーの背景なので濃い色に */
        }
          /* ▼▼▼ グラフ11用のCSS ▼▼▼ */
        /* グラフ11用の新しい色を定義 */
        .color-light-red {
            background-color: #f7b2b4; /* 画像の薄い赤色 */
        }
        .color-dark-teal {
            background-color: #0d6b63; /* 画像の濃い緑/青緑色 */
        }
        .color-light-teal {
            background-color: #a0d4d0; /* 画像の薄い緑/青緑色 */
        }
    
        /* グラフ内の小見出し (例: クリスマスディナー) */
        .chart-subtitle-internal {
            font-size: 1.2rem; /* 19px */
            font-weight: bold;
            color: var(--fc-pink); /* 既存のピンク色を使用 */
            border-bottom: 2px solid var(--fc-pink);
            padding-bottom: 4px;
            margin-top: 10px; /* グラフタイトルとの間 */
            margin-bottom: 25px; /* リストとの間 */
            text-align: left; /* 左揃え */
        }
    
        /* * グラフ11はラベルが長いため、PC表示でのラベル幅を少し広げます (既存の .chart-label を上書き) 
         * スマートフォン表示 (@media) では .chart-label の設定がリセットされるため、この設定はPC表示 (601px以上) にのみ適用されます。
         */
        .chart-container-graph11 .chart-label {
        flex-basis: 320px; 
        }
        /* ▼▼▼ グラフ12用のCSS ▼▼▼ */
        /* グラフ12用の新しい色を定義 (画像に合わせた緑系の色) */
        .color-dark-green-g12 {
            background-color: #00695c; /* 画像の濃い緑 */
        }
        .color-mid-green-g12 {
            background-color: #00897b; /* 画像の中間の緑 */
        }
        .color-light-green-g12 {
            background-color: #4db6ac; /* 画像の明るい緑 */
        }
    
        /* * グラフ12のコンテナ設定
         * (ラベル幅の調整と、バーの背景色を薄い緑に変更) 
         */
        .chart-container-graph12 .chart-label {
            flex-basis: 320px; /* グラフ11と同様にラベル幅を広げる */
        }
    
        .chart-container-graph12 .chart-bar-background {
            background-color: #e8f5e9; /* バーの背景を薄い緑に変更 */
        }
    
        /* ▼▼▼ グラフ13用のCSS ▼▼▼ */
        /* グラフ13用の新しい色を定義 (画像に合わせた緑系の色) */
        .color-mid-green-g13 {
            background-color: #8bc34a; /* 画像の明るい緑 */
        }
        .color-light-green-g13 {
            background-color: #dcedc8; /* 画像のごく薄い緑 */
        }

        /* * グラフ13のコンテナ設定
        * (ラベル幅の調整と、バーの背景色をデフォルトの薄黄色に戻す) 
        */
        .chart-container-graph13 .chart-label {
            flex-basis: 320px; /* 他と同様にラベル幅を広げる */
        }
        
        .chart-container-graph13 .chart-bar-background {
            background-color: #f9f7e8; /* デフォルトの薄い黄色の背景に戻す */
        }
        /* ▲▲▲ グラフ13用のCSSここまで ▲▲▲ */

        /* ▼▼▼ グラフ11 (クリスマスディナー) 用の色クラス ▼▼▼ */
        .g11-dinner-01 { background-color: var(--g11-dinner-red-01); }
        .g11-dinner-02 { background-color: var(--g11-dinner-red-02); }
        .g11-dinner-03 { background-color: var(--g11-dinner-red-03); }
        .g11-dinner-04 { background-color: var(--g11-dinner-red-04); }
        .g11-dinner-05 { background-color: var(--g11-dinner-red-05); }
        .g11-dinner-06 { background-color: var(--g11-dinner-red-06); } /* 最も濃い色 */

        /* ▼▼▼ グラフ11 (クリスマスケーキ) 用の色クラス ▼▼▼ */
        .g11-cake-01 { background-color: var(--g11-cake-teal-01); }
        .g11-cake-02 { background-color: var(--g11-cake-teal-02); }
        .g11-cake-03 { background-color: var(--g11-cake-teal-03); }
        .g11-cake-04 { background-color: var(--g11-cake-teal-04); }
        .g11-cake-05 { background-color: var(--g11-cake-teal-05); }
        .g11-cake-06 { background-color: var(--g11-cake-teal-06); } /* 最も濃い色 */

        /* 項目が長いため、ラベル幅を調整 */
        .chart-label-g11 {
        flex-basis: 250px; /* ★★★ グラフ11専用の幅 ★★★ */
        flex-shrink: 0;
        padding-right: 15px; /* ラベルとバーの間隔 */
        text-align: right;
        color: #333;
        font-size: 0.9rem;
        }

        /* ★★★【追加】★★★ グラフ11のサブタイトル用テキスト色 */
        .text-g11-cake-title {
        color: var(--fc-pink); /* ケーキグラフの最も濃い色 → --fc-pink に変更 */
        }