/* 📌 1. 認定書画像のためのCSS設定 */
        .cert-image {
            width: 100%;
            /* 実際の画像サイズ（903x647）の比率を完全に維持 */
            aspect-ratio: 903 / 647; 
            /* 画像が縦横に歪むのを防ぎ、枠内に綺麗に収める */
            object-fit: cover; 
            border-radius: 4px;
            /* 認定書を浮かび上がらせる上質な影 */
            box-shadow: 0 12px 25px rgba(0,0,0,0.22);
            /* 必要に応じて額縁をつけたい場合は以下を有効に（今はコメントアウト） */
            /* border: 2px solid #d4af37; */
        }

        /* バナー全体のコンテナ（黄金比 940px 固定） */
        .balance-banner {
            max-width: 940px;
            width: 100%;
            background: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            border: 1px solid #e5e7eb;
        }

        .inner-flex {
            display: flex;
            width: 100%;
        }

        /* 左側：スラッシュエリア（全体の約38% = 360px） */
        .visual-slash-zone {
            flex: 0 0 360px;
            background: linear-gradient(135deg, #1e3a8a 0%, #0d9488 100%);
            clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            /* 画像の周りに上品な余白を持たせる */
            padding: 40px 55px 40px 40px;
            box-sizing: border-box;
        }

        /* 右側：テキストエリア（全体の約62% = 580px） */
        .text-content-zone {
            flex: 0 0 580px;
            padding: 40px;
            box-sizing: border-box;
        }
        .badge { font-size: 12px; font-weight: bold; color: #0d9488; margin-bottom: 12px; display: inline-block; }
        .title { font-size: 20px; font-weight: bold; color: #111827; margin: 0 0 15px 0; line-height: 1.5; }
        .desc { font-size: 14px; color: #4b5563; line-height: 1.8; margin: 0 0 24px 0; text-align: justify; }
        .btn { display: inline-block; background: #0f172a; color: #fff; text-decoration: none; padding: 12px 28px; font-size: 14px; font-weight: bold; border-radius: 6px; transition: background 0.2s; }
        .btn:hover { background: #1e293b; }
        .legal-footer { background: #f9fafb; padding: 12px 40px; font-size: 11px; color: #9ca3af; border-top: 1px solid #edf2f7; }

        /* レスポンシブ対応（スマホ表示） */
        @media (max-width: 768px) {
            .inner-flex { flex-direction: column; }
            .visual-slash-zone {
                flex: none; width: 100%; clip-path: none; padding: 40px 30px;
            }
            .cert-image {
                width: 65%; /* スマホ画面では画像が大きくなりすぎないよう調整 */
                margin: 0 auto;
            }
            .text-content-zone { flex: none; width: 100%; padding: 30px; }
        }