:root {
            --primary: #6366f1;
            /* Indigo */
            --primary-dark: #4f46e5;
            --secondary: #06b6d4;
            /* Cyan */
            --accent: #a855f7;
            /* Purple */
            --dark-bg: #111827;
            --darker-bg: #030712;
            --text-primary: #f3f4f6;
            --text-secondary: #9ca3af;
            --navbar-bg: rgba(17, 24, 39, 0.7);
            /* Semi-transparent navbar background */
            --glass-effect: blur(12px);
            --transition-normal: all 1.3s ease;
            --background-color-black: rgb(4, 5, 5);
            --background-color-cell: rgb(8, 8, 12);

            --border-glow: rgba(99, 102, 241, 0.3);
            --neon-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
            --glow-cyan: 0 0 15px rgba(6, 182, 212, 0.5);
            --glow-indigo: 0 0 15px rgba(99, 102, 241, 0.5);
            --glow-purple: 0 0 15px rgba(168, 85, 247, 0.5);
            --transition-smooth: all 2.0s cubic-bezier(0.4, 0, 0.2, 1);

            --matrix-color-1: rgb(8, 8, 12);
            /* 深い黒に近いネイビー */
            --matrix-color-2: rgba(21, 21, 22, 1);
            --matrix-color-3: rgba(28, 31, 32, 1);
            --matrix-color-4: rgb(32, 32, 60);
            --matrix-color-5: rgba(128, 128, 136, 1);
            /* 暗めのインディゴ */
            --matrix-color-6: rgba(18, 18, 19, 1);
            --matrix-color-7: rgba(83, 83, 84, 1);
            --matrix-color-8: rgba(14, 16, 15, 1);
            /* 紫がかってくる */
            --matrix-color-9: rgba(21, 21, 19, 1);
            --matrix-color-10: rgba(32, 29, 33, 1);
            /* マトリクス背景 */
            --matrix-color-background: rgb(28, 28, 32);
            --matrix-color-background1: rgb(7, 7, 7);
            --matrix-color-border: #99ccff;
            --matrix-color-text: rgb(255, 255, 255);
        }


        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Space Grotesk', sans-serif;
            background-color: var(--darker-bg);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
            min-height: 100vh;
            transition: background-color 0.5s ease;
        }

        /* ヘッダー*/
        .header {

            width: 100%;
            height: 64px;
            background-color: rgb(22, 22, 26);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 10px;

            font-size: 24px;
            font-weight: bold;
            background: linear-gradient(to right, #818cf8, #22d3ee, #c084fc);
            /* グラデーション定義 */
            -webkit-background-clip: text;
            /* 背景を文字にクリップ */
            -webkit-text-fill-color: transparent;
            /* 文字色を透明にして背景を見せる */
        }

        .main {
            display: flex;
            height: calc(100vh - 64px);
        }

  .title-s {
            background: linear-gradient(to right, #818cf8, #22d3ee, #c084fc);
            /* グラデーション定義 */
            -webkit-background-clip: text;
            /* 背景を文字にクリップ */
            -webkit-text-fill-color: transparent;
            /* 文字色を透明にして背景を見せる */
            color: transparent;
            /* フォールバック用（一部ブラウザ） */
            text-align: center;
            font-weight: bold;
            font-size: 2rem;
            font-family: sans-serif;
            padding: 0px;
            padding-left: 0%;
            border-radius: 8px;
            box-shadow: none;
            /* 背景がないのでシャドーは不要または控えめに */
            max-width: 70%;
            margin: 0px auto;
            background-color: transparent;
            /* マージン上側 */
            margin-top: 5vh;
        }


        .title-section {
            background: linear-gradient(to right, #818cf8, #22d3ee, #c084fc);
            /* グラデーション定義 */
            -webkit-background-clip: text;
            /* 背景を文字にクリップ */
            -webkit-text-fill-color: transparent;
            /* 文字色を透明にして背景を見せる */
            color: transparent;
            /* フォールバック用（一部ブラウザ） */
            text-align: left;
            font-weight: bold;
            font-size: 2rem;
            font-family: sans-serif;
            padding: 0px;
            padding-left: 0%;
            border-radius: 8px;
            box-shadow: none;
            /* 背景がないのでシャドーは不要または控えめに */
            max-width: 70%;
            margin: 0px auto;
            background-color: transparent;
            /* マージン上側 */
                margin-top: 5vh;
        }




        /*左カラム*/
        .left-column {
            width: 8%;
            min-width: 120px;
            display: flex;
            flex-direction: column;
            padding: 16px;
            gap: 4px;
            display: flex;
            flex-direction: column;
            /* ←縦に並べる */
            align-items: center;
            /* 横方向中央揃え */
        }

        .left-box {
            flex: 1;
            min-height: 32px;
            max-height: 40px;
            min-width: 120px;
            background-color: rgb(4, 5, 5);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            border-radius: 6px;
            box-shadow: 0 2px 6px rgba(200, 200, 200, 0.4);
        }

        .left-box a {
            text-decoration: none;
            color: rgb(234, 223, 224);
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .left-column-top {
            display: flex;
            flex-direction: column;
            /* 子要素を縦に並べる */
            justify-content: flex-start;
            /* 縦方向中央揃え（必要なら） */
            align-items: center;
            /* 横方向中央揃え（必要なら） */
            height: 60%;
            /* 親要素の高さの80%に設定 */
        }


        .left-column-bottom {
            display: flex;
            flex-direction: column;
            /* 子要素を縦に並べる */
            justify-content: flex-end;
            /* 縦方向中央揃え（必要なら） */
            align-items: center;
            /* 横方向中央揃え（必要なら） */
            height: 30%;
            /* 親要素の高さの80%に設定 */
            padding-bottom: 0.1rem;
        }



        /*ボタン セクション移動　左カラム*/
        .section-button {
            width: 90%;
            margin-top: 2rem;
            text-align: center;
        }

        .section-button button {
            width: 90%;
            background-color: var(--matrix-color-background1);
            color: white;
            border: none;
            padding: 0.6rem 1.2rem;
            font-size: 1rem;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
            /* Indigo系の柔らかい影 */


            display: flex;
            /* ✅ Flexboxで中央揃えを可能にする */
            justify-content: center;
            /* ✅ 横方向中央揃え */
            align-items: center;
            /* ✅ 縦方向中央揃え（高さがある場合） */
            text-align: center;
            /* ✅ テキストの中央揃え（補助的） */



        }

        .section-button button:hover {
            background-color: var(--matrix-color-background);
            box-shadow: 0 6px 16px rgba(99, 102, 241, 0.6);
        }




        /*ボタン ダウンロード 左カラム*/
        .download-button {
            margin-top: 2rem;
            text-align: center;
        }

        .download-button button {
            background-color: var(--matrix-color-background1);
            color: white;
            border: none;
            padding: 0.6rem 1.2rem;
            font-size: 1rem;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            box-shadow: 0 0.2px 0.2px rgba(200, 200, 200, 0.1);
        }

        .download-button button:hover {
            background-color: var(--matrix-color-background1-dark);
        }

        /*終了 左カラム*/












        /*右カラム*/
        .right-column {
            width: 100%;
            padding-left: 16px;
            padding-right: 8px;
            overflow-y: scroll;
            /* ✅ スクロールは有効 */
            scrollbar-width: none;
            /* ✅ Firefoxでスクロールバー非表示 */

        }

        /* ✅ Chrome, Edge, Safari などのWebKit系ブラウザ用 */
        .right-column::-webkit-scrollbar {
            display: none;
        }

        .small {
            font-size: 0.8rem;
        }

        section {
            margin-bottom: 20px;
            padding: 10px;

            border-radius: 8px;
            box-shadow: 0 0.2px 0.2px rgba(200, 200, 200, 0.1);
            background-color: var(--background-color-black);
        }




        #section1 {
            margin-bottom: 40px;
            padding: 12px;
            border-radius: 8px;
            /* 横並びにする min-height: 660px;*/
            display: column;
            /* 横並びにする */
            justify-content: center;
            /* 中央揃えに変更 */
            justify-content: space-between;
            /* 左右に分ける */
            align-items: flex-start;
            /* 上揃え */
            background-color: rgb(4, 5, 5);
            box-shadow: 0 2px 6px rgba(180, 180, 240, 0.3);
        }

        .aftertitle {
            display: flex;
            align-items: center;

        }


        .left-column-section1 {
            width: 40%;
            padding: 20px;
            background-color: --background-color-cell;
        }

        .right-column-section1 {
            width: 60%;

            padding: 20px;
            justify-content: center;
            /* 中央揃えに変更 */
        }


        .curclecontainer {
            width: 40%;
            position: relative;
            width: 300px;
            height: 440px;
            left: 16%;

        }

        .circle {
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: rgba(100, 150, 255, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            color: #fff;
            text-align: center;
        }

        /* 半径60px × 1.7 = 102px → 三角形の辺 */
        /* 三角形の高さ = √3 / 2 × 辺 ≈ 88.3px */

        .circle.a {
            top: 0;
            left: 100%;
            transform: translateX(-50%);
        }

        .circle.b {
            bottom: -10%;
            left: calc(50% - 96px);
            /* 左下の頂点 */
        }

        .circle.c {
            bottom: -10%;
            left: calc(50% + 96px);
            /* 右下の頂点 */
        }



                                .matrix-index {
                                    width: 100%;
                                    display: flex;
                                    /* 横並びにする */
                                    gap: 4px;
                                    /* 要素間のスペース */
                                    margin: 8px 0;
                                    background-color: var(--background-color-cell);
                                    background-color: #1c1a21;
                                }
        .matrix-section1-row {
            width: 100%;
            display: flex;
            /* 横並びにする */
            gap: 4px;
            /* 要素間のスペース */
            margin: 8px 0;
            background-color: var(--background-color-cell);
            
        }

        .matrix-section1-cell1 {
            width: 20%;
            padding: 20px;

            text-align: center;
            font-weight: bold;
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-radius: 8px;
            /* ✅ 角を丸くする */
            box-shadow: 0 4px 8px rgba(150, 150, 150, 0.5);
            /* ✅ グレーのシャドーを追加 */
            
        }



        .matrix-section1-cell2 {
            display: flex;
            /* Flexboxを有効化 */
            align-items: center;
            /* 縦方向の中央揃え */
            flex: 1;
            /* 均等に幅を分ける */
            width: 80% padding: 24px;
            padding-left: 40px;
            /* ← 左側の余白を追加 */
            background-color: background-color-cell;
            text-align: left;

            font-weight: bold;
            border-radius: 8px;
            /* ✅ 角を丸くする */
            box-shadow: 0 4px 8px rgba(240, 240, 230, 0.7);
            /* ✅ グレーのシャドーを追加 */

        }

        .matrix-section1-cell3 {
            flex: 1;
            /* 均等に幅を分ける */
            padding: 20px;
            background-color: #f0f0f0;
            text-align: center;
            border: 1px solid #ccc;
            font-weight: bold;
        }



        #section2 {
            margin-bottom: 40px;
            padding: 20px;
            background-color: var(--background-color-black);
            border-radius: 8px;
        }

        .three-columns {
            display: flex;
            gap: 16px;
            /* カラム間の余白 */
            margin-top: 20px;
            background-color: background-color-black;
        }

        .column1 {
            background-color: background-color-black;
            padding: 16px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            width: 8rem;
        }

        .column2-4 {
            flex: 1;
            /* 均等に幅を分ける */
            background-color: background-color-black;
            padding: 16px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
        }









        .matrix-sectionsw-row {
            width: 100%;
            display: flex;
            /* 横並びにする */
            gap: 4px;
            /* 要素間のスペース */
            margin: 8px 0;
            background-color: var(--background-color-cell);
        }

        .matrix-section1-cellsw11 {
            display: flex;
            /* Flexboxを有効化 */
            align-items: center;
            /* 縦方向の中央揃え */
            justify-content: center;
            /* 横方向の中央揃え（必要なら left に変更） */

            width: 8%;
            height: 40px;
            /* ← 高さを指定 */
            padding: 10px;
            background-color: var(--background-color-cell);
            text-align: center;
            border: 1px solid #ccc;
            font-weight: bold;

            font-size: 16px;
            /* ← 文字サイズを縮小 */
            white-space: nowrap;
            /* ← 改行させない */
            overflow: hidden;
            /* ← はみ出した部分を隠す */
            text-overflow: ellipsis;
            /* ← はみ出したら「…」で省略 */
        }

        .matrix-section1-cellsw21 {
            display: flex;
            /* Flexboxを有効化 */
            align-items: center;
            /* 縦方向の中央揃え */
            justify-content: center;
            /* 横方向の中央揃え（必要なら left に変更） */
            width: 44%;
            height: 38px;
            padding: 20px;
            background-color: var(--background-color-cell);
            text-align: center;
            border: 1px solid #ccc;
            font-weight: bold;

            font-size: 16px;
            /* ← 文字サイズを縮小 */
            white-space: nowrap;
            /* ← 改行させない */
            overflow: hidden;
            /* ← はみ出した部分を隠す */
            text-overflow: ellipsis;
            /* ← はみ出したら「…」で省略 */
        }

        .matrix-section1-cellsw31 {
            display: flex;
            /* Flexboxを有効化 */
            align-items: center;
            /* 縦方向の中央揃え */
            justify-content: center;
            /* 横方向の中央揃え（必要なら left に変更） */

            width: 44%;
            height: 38px;
            padding: 20px;
            background-color: var(--background-color-cell);
            text-align: center;
            border: 1px solid #ccc;
            font-weight: bold;

            font-size: 16px;
            /* ← 文字サイズを縮小 */
            white-space: nowrap;
            /* ← 改行させない */
            overflow: hidden;
            /* ← はみ出した部分を隠す */
            text-overflow: ellipsis;
            /* ← はみ出したら「…」で省略 */
        }




        .matrix-section1-cellsw1 {
            width: 8%;
            padding: 10px;
            background-color: var(--background-color-cell);
            text-align: center;
            border: 1px solid #ccc;
            font-weight: bold;

            font-size: 16px;
            /* ← 文字サイズを縮小 */
            white-space: nowrap;
            /* ← 改行させない */
            overflow: hidden;
            /* ← はみ出した部分を隠す */
            text-overflow: ellipsis;
            /* ← はみ出したら「…」で省略 */
        }

        .matrix-section1-cellsw2 {
            width: 44%;
            padding: 20px;
            background-color: var(--background-color-cell);
            text-align: center;
            border: 1px solid #ccc;
            font-weight: bold;

            font-size: 16px;
            /* ← 文字サイズを縮小 */
            white-space: nowrap;
            /* ← 改行させない */
            overflow: hidden;
            /* ← はみ出した部分を隠す */
            text-overflow: ellipsis;
            /* ← はみ出したら「…」で省略 */
        }

        .matrix-section1-cellsw3 {
            width: 44%;
            padding: 20px;
            background-color: var(--background-color-cell);
            text-align: center;
            border: 1px solid #ccc;
            font-weight: bold;

            font-size: 16px;
            /* ← 文字サイズを縮小 */
            white-space: nowrap;
            /* ← 改行させない */
            overflow: hidden;
            /* ← はみ出した部分を隠す */
            text-overflow: ellipsis;
            /* ← はみ出したら「…」で省略 */
        }




        #section3 {
            margin-bottom: 40px;
            padding: 20px;
            background-color: var(--background-color-black);
            border-radius: 8px;
        }

        #section4 {
            margin-bottom: 40px;
            padding: 20px;
            background-color: var(--background-color-black);
            border-radius: 8px;
        }

        .three-columns {
            display: flex;
            /* ✅ Flexboxを有効化 */
            flex-direction: row;
            /* ✅ 子要素を横並びに */
            justify-content: space-between;
            /* ✅ 横方向の間隔を調整（任意） */
            gap: 0rem;
            /* ✅ 子要素間の余白（任意） */
        }

        .column2 {
            display: flex;
            /* ✅ Flexboxを有効化 */
            flex-direction: row;
            /* ✅ 子要素を横並びに */
            justify-content: space-between;
            /* ✅ 横方向の間隔を調整（任意） */
            gap: 0rem;
            /* ✅ 子要素間の余白（任意） */
        }

        .matrix-swot-v {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            /* 4列 */
            grid-template-rows: repeat(3, auto);
            /* 5行 */
            gap: 0px;
            margin-bottom: 0px;
            padding: 4px;
            padding-bottom: 0px;
            background-color: var(--background-color-black);
            min-height: 20rem;
            text-align: center;
            /* ←これが正解！ */
        }

        .matrix-swot {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            /* 4列 */
            grid-template-rows: repeat(3, auto);
            /* 5行 */
            gap: 0px;
            margin-bottom: 0px;
            padding: 4px;
            padding-bottom: 0px;
            background-color: var(--background-color-black);
            min-height: 20rem;
            text-align: center;
            /* ←これが正解！ */
        }

        .child-title-swot {
            background-color: var(--background-color-black);
            border: 0px solid rgba(150, 150, 200, 0.2);
            padding-bottom: 8px;
            display: flex;
            /* ✅ Flexboxを有効化 */
            align-items: flex-end;
            /* ✅ 子要素を縦方向の下に揃える */
            justify-content: center;
            /* ✅ 横方向中央揃え（任意） */
            min-height: 1rem;
            /* ✅ 高さを確保（任意で調整） */
        }

        .child-title-vertical-swot {
            width: 8rem;
            background-color: var(--matrix-color-border);

        }

        .child-swot {
            background-color: var(--matrix-color-border);
            border: 1px solid rgba(150, 150, 200, 0.2);
        }

        #section5 {

            margin-bottom: 40px;
            padding: 20px;
            background-color: var(--background-color-black);
            border-radius: 8px;
            text-align: center;
            /* ←これが正解！ */

        }


        .matrix-4x5 {

            display: grid;
            grid-template-columns: repeat(5, 1fr);
            /* 4列 */
            grid-template-rows: repeat(4, auto);
            /* 5行 */
            gap: 0px;

            margin-bottom: 0px;
            padding: 20px;
            padding-bottom: 0px;
            background-color: background-color-black;
            min-height: 20rem;
            text-align: center;
            /* ←これが正解！ */

        }

        .matrix-2x2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            /* 2列 */
            grid-template-rows: repeat(2, auto);
            /* 2行 */

            gap: 0px;
            padding: 0px 20px 24px 20px;
            /* 上 右 下 左 の順番 */
            background-color: background-color-black;
        }

        .cell {
            background-color: #cce5ff;
            border: 0px solid #99ccff;
            padding: 16px;
            text-align: center;
            font-weight: bold;
            min-height: 10rem;
        }























        .cell-index {
            display: flex;
            /* Flexboxを有効化 */
            align-items: center;
            /* 縦方向の中央揃え */
            justify-content: left;
            /* 横方向の中央揃え（必要なら left に変更） */


            background-color: #cce5ff;
            border: 0px solid #99ccff;
            padding: 24px;
            text-align: center;
            font-weight: bold;
            min-height: 0.2rem;
        }




        #c2 {
            background-color: #ccccff;
        }


        .cell-2x2-index {
            display: flex;
            /* Flexboxを有効化 */
            align-items: center;
            /* 縦方向の中央揃え */
            justify-content: center;
            /* 横方向の中央揃え（必要なら left に変更） */
            height: 60px;
            background-color: rgba(240, 240, 230);
            border: 0px solid #99ccff;
            padding: 0px 20px 0 20px;
            /* 上 右 下 左 の順番 */
            text-align: center;
            font-weight: bold;
            max-width: none;

        }

        .cell-2x2 {
            display: flex;
            justify-content: flex-start;
            /* 横方向：左揃え */
            align-items: center;
            /* 縦方向：中央揃え */

            padding: 10px 10px 10px 240px;
            /* 上 右 下 左 の順番 */

            background-color: #cce5ff;
            border: px solid #99ccff;
            text-align: left;
            /* テキストの左揃え（念のため） */
            font-weight: bold;
            max-width: none;
            box-sizing: border-box;
            /* paddingを含めて幅を計算 */
            min-height: 5rem;
        }




        /* マトリックス調整：画面幅に応じて崩れないようにする */
        .matrix {
            display: grid;
            grid-template-columns: repeat(8, auto);
            gap: 6px;
            padding: 10px;
            border: 4px solid #C0C0C0;
            margin: 0 auto;
            width: 95%;
            box-sizing: border-box;
        }



        .child:hover {
            box-shadow: 0 2px 6px rgba(180, 180, 240, 0.3);
            transform: scale(1.02);
        }



        /* 🌐 レスポンシブ対応：画面幅が600px以下のときの調整 */
        @media screen and (max-width: 600px) {
            .child {
                font-size: 14px;
                min-height: 60px;
                padding: 4px;
            }

            .matrix {
                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
                gap: 4px;
            }

            .container {
                width: 98%;
                padding: 16px;
            }

            .left,
            .right {
                width: 100%;
                padding: 10px;
            }

            .main {
                flex-direction: column;
            }
        }






        .c1 {
            background: linear-gradient(to right,
                    var(--matrix-color-1),
                    var(--matrix-color-2),
                    var(--matrix-color-1));
        }

        /* ご指定の淡いブルー */
        .c2 {
            background: linear-gradient(to right,
                    var(--matrix-color-8),
                    var(--matrix-color-3),
                    var(--matrix-color-8));
        }

        .c3 {
            background: linear-gradient(to right,
                    var(--matrix-color-1),
                    var(--matrix-color-1),
                    var(--matrix-color-2));
        }

        .c4 {
            background: linear-gradient(to right,
                    var(--matrix-color-1),
                    var(--matrix-color-2),
                    var(--matrix-color-1));
        }

        .c5 {
            background: linear-gradient(to right,
                    var(--matrix-color-4),
                    var(--matrix-color-1),
                    var(--matrix-color-1));
        }

        .c6 {
            background: linear-gradient(to right,
                    var(--matrix-color-4),
                    var(--matrix-color-2),
                    var(--matrix-color-1));
        }

        .c7 {
            background: linear-gradient(to right,
                    var(--matrix-color-1),
                    var(--matrix-color-1),
                    var(--matrix-color-1));
        }

        .c8 {
            background: linear-gradient(to right,
                    var(--matrix-color-2),
                    var(--matrix-color-1),
                    var(--matrix-color-1));
        }

        .c9 {
            background: linear-gradient(to right,
                    var(--matrix-color-10),
                    var(--matrix-color-10),
                    var(--matrix-color-10));
        }

        .c10 {
            background: linear-gradient(to right,
                    var(--matrix-color-2),
                    var(--matrix-color-2),
                    var(--matrix-color-2));
        }

        /* 濃いブルー寄りの締め色 */




        .text-title-black {
            width: 20%;
            background-color: black;
            color: white;
            padding: 10px;
            font-size: 20px;
            display: inline-block;
        }


        .button {
            --width: 3.2rem;
            --height: 3.2rem;
            --tooltip-height: 24px;
            --tooltip-width: 70px;
            --gap-between-tooltip-to-button: 18px;
            --button-color: #222;
            --tooltip-color: #fff;
            width: var(--width);
            height: var(--height);
            background: black;
            position: relative;
            text-align: center;
            border-radius: 0em;
            font-family: "Arial";
            font-size: 1.5rem;
            transition: background 0.3s;
            border: 0.4px solid #99ccff;
            display: flex;
            /* 追加 */
            align-items: center;
            /* 垂直中央揃え */
            justify-content: center;
            /* 水平中央揃え */
        }

        .button1 {
            --width: 3rem;
            --height: 3rem;
            --tooltip-height: 60px;
            --tooltip-width: 70px;
            --gap-between-tooltip-to-button: 18px;
            --button-color: #222;
            --tooltip-color: #fff;
            width: var(--width);
            height: var(--height);
            top-height: 90px;
            background: black;
            position: relative;
            text-align: center;
            border-radius: 0em;
            font-family: "Arial";
            font-size: 1.5rem;
            transition: background 0.3s;
            border: 0.4px solid #99ccff;
            display: flex;
            /* 追加 */
            align-items: center;
            /* 垂直中央揃え */
            justify-content: center;
            /* 水平中央揃え */
        }


        /* 各セル（.child）に余白・フォント調整 */
        .child {
            background-color: rgba(76, 77, 78, 0.07);
            border: 1px solid rgba(150, 150, 200, 0.2);
            padding: 6px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 80px;
            font-size: 16px;
            font-weight: bold;
            border-radius: 6px;
            transition: box-shadow 0.3s ease;
        }


        .title-section-mx {
            background: linear-gradient(to right, #818cf8, #22d3ee, #c084fc);
            /* グラデーション定義 */
            -webkit-background-clip: text;
            /* 背景を文字にクリップ */
            -webkit-text-fill-color: transparent;
            /* 文字色を透明にして背景を見せる */
            color: transparent;
            /* フォールバック用（一部ブラウザ） */
            background-color: transparent;
            /* 背景を完全に透明に */
        }



        .title-section-t1 {
            background: linear-gradient(to right, #818cf8, #22d3ee, #c084fc);
            /* グラデーション定義 */
            -webkit-background-clip: text;
            /* 背景を文字にクリップ */
            -webkit-text-fill-color: transparent;
            /* 文字色を透明にして背景を見せる */
            color: transparent;
            /* フォールバック用（一部ブラウザ） */
            background-color: transparent;
            /* 背景を完全に透明に */
            font-size: 1.1rem;
            padding-left: 16px;
        }

        .LCcontainer {
            width: 100%;
            border: 0.14rem solid #99ccff;
            align: center;
            /* ←これが正解！ */
        }


        /* 単価初期投資 section7*/
        #section7 {
            width: 100%;
            display: flex;
            flex-direction: column;
            /* ←縦に並べる */
            align-items: center;
            /* 横方向中央揃え */
            gap: 3rem;
        }

        /* 収支マトリクス section7*/
        .matrix-ff1 {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(2, auto);
            gap: 0px;
            border: 0.24rem solid var(--matrix-color-border);
            margin-bottom: 0px;
            padding: 20px;
            background-color: var(--matrix-color-background);
            min-height: 0.2rem;
            text-align: center;
            gap: 0.2rem;
        }

        /* 収支マトリクス section7*/
        .matrix-ff2 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, auto);
            gap: 0px;
            border: 0.24rem solid var(--matrix-color-border);
            margin-bottom: 0px;
            padding: 20px;
            background-color: var(--matrix-color-background);
            min-height: 7rem;
            text-align: center;
            gap: 0.2rem;
        }

        .child-f1 {
            background-color: var(--matrix-color-background1);
            border: 0px solid rgba(255, 255, 255, 0.961);
            padding: 2rem;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 0.4rem;
            min-height: 0.2rem;
            font-size: 1.3rem;
            font-weight: bold;
            border-radius: 6px;
            transition: box-shadow 0.3s ease;
        }

        /* 終了　単価初期投資*/


        /* 月次収支　section8*/
        #section8 {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .matrix-f24 {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(25, 1fr);
            grid-template-rows: repeat(3, auto);
            gap: 0px;
            border: 0.2rem solid #99ccff;
            margin-bottom: 0px;
            padding: 20px;
            background-color: var(--matrix-color-background1);
            min-height: 7rem;
            text-align: center;
        }

        .child-f2 {
            width: 80%;
            background-color: var(--matrix-color-background1);
            border: 0px solid rgba(255, 255, 255, 0.961);
            padding: 0.1rem;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1rem;
            font-weight: bold;
            border-radius: 6px;
            transition: box-shadow 0.3s ease;
        }

        /*　終了 月次収支　section8*/



        /*　BS　section9*/
        #section9 {
            width: 100%;
            display: flex;
            flex-direction: column;
            /* ←縦に並べる */
            align-items: center;
            /* 横方向中央揃え */
        }

        /* ←縦に並べる */
        .LCcontainer1 {
            width: 94%;
            padding: 4px;
            border: 0.2rem solid #99ccff;
            display: flex;
            flex-direction: column;
            /* ←縦に並べる */
            align-items: center;
            /* 横方向中央揃え */
        }

        .matrix-ff8 {
            background-color: var(--matrix-color-background);
            flex: 1 1 calc(20% - 1rem);
            width: 40%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(4, auto);
            border: 0.1rem solid #99ccff;
            margin-bottom: 0px;
            padding: 8px;
            background-color: background-color-black;
            min-height: 0.2rem;
            text-align: center;
            gap: 0.2rem;
        }

        /* BS表のマトリクス */
        .matrix-f1 {
            background-color: var(--matrix-color-background1);
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(2, auto);
            gap: 0px;
            border: 0.1rem solid #99ccff;
            margin-bottom: 0px;
            padding: 20px;
            padding-bottom: 0;
            background-color: background-color-black;
            min-height: 7rem;
            text-align: center;
        }

        /* セルタイトル部分　section9*/



        .cell8-title {
            background-color: var(--matrix-color-background1);
            border: 0px solid rgba(255, 255, 255, 0.961);
            padding: 1rem;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 0.2rem;
            min-height: 0.2rem;
            font-size: 1rem;
            font-weight: bold;
            border-radius: 6px;
            transition: box-shadow 0.3s ease;
        }


        /* セル部分　section9*/
        .cell8 {
            background-color: var(--matrix-color-background1);
            border: 0px solid rgba(255, 255, 255, 0.961);
            padding: 2rem;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 0.4rem;
            min-height: 0.2rem;
            font-size: 1.3rem;
            font-weight: bold;
            border-radius: 6px;
            transition: box-shadow 0.3s ease;
        }

        /*　終了　BS　section9*/

        .cell8-title {
            background-color: var(--matrix-color-background1);
            border: 0px solid rgba(255, 255, 255, 0.961);
            padding: 1rem;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 0.2rem;
            min-height: 0.2rem;
            font-size: 1rem;
            font-weight: bold;
            border-radius: 6px;
            transition: box-shadow 0.3s ease;
        }


        /* セル部分　section9*/
        .cell8 {
            background-color: var(--matrix-color-background1);
            border: 0px solid rgba(255, 255, 255, 0.961);
            padding: 1.6rem;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 0.4rem;
            min-height: 0.2rem;
            font-size: 1.3rem;
            font-weight: bold;
            border-radius: 6px;
            transition: box-shadow 0.3s ease;
        }


        /*　終了　BS　section9*/




        .column left {
            flex: 1;
            display: flex;
            flex-direction: column;
            /* 上下に並べる */
            gap: 10px;
            border: 2px solid #99ccff;
            padding: 10px;
        }

        .top,
        .bottom {
            flex: 1;
            background-color: var(--matrix-color-1);
            padding: 10px;
            text-align: center;
        }

        .column right {
            flex: 1;
            display: flex;
            flex-direction: column;
            /* 上下に並べる */
            gap: 10px;
            border: 2px solid #99ccff;
            padding: 10px;
        }

        .top,
        .bottom {
            flex: 1;
            background-color: var(--matrix-color-1);
            padding: 10px;
            text-align: center;
        }




























        /* 横並びコンテナ */
        .LCcontainerf1 {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            /* レスポンシブ対応 */
            gap: 1rem;
            padding: 0 1rem;
        }




































        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .modal-content {
            background: linear-gradient(to bottom right, #ffffff, #f0f0f8);
            padding: 40px;
            border-radius: 16px;
            width: 90%;
            max-width: 800px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
            font-family: 'Segoe UI', sans-serif;
            font-size: 1.6rem;
            animation: fadeIn 0.4s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .modal-content textarea {
            width: 100%;
            height: 240px;
            padding: 12px;
            font-size: 2rem;
            border: 1px solid #ccc;
            border-radius: 8px;
            resize: vertical;
            margin-bottom: 20px;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .modal-content button {
            padding: 10px 20px;
            margin-right: 10px;
            font-size: 1rem;
            border: none;
            border-radius: 6px;
            background-color: #4f46e5;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .modal-content button:hover {
            background-color: #4338ca;
        }


        .job {
            border: 1px solid white;
            /* ✅ 白枠線を追加 */
            padding: 0.4rem;
            /* ✅ 内側に余白を追加（任意） */
            border-radius: 8px;
            /* ✅ 角を丸めて柔らかく（任意） */
            background-color: transparent;
            /* ✅ 背景が暗い場合に白枠が映える */

        }








         /* ブラウザ１００縦幅*/

.full {
    height: 70vh;
    background-image: url('./assets/images/bg.jpg');
    background-size: cover;
    background-position: center;
    padding-top: 12px; /* ← 中身だけ下げる */
}


.full-image {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: block;
    margin: 2vh auto 0 auto;
    /* ← 中央寄せ */
}







  body {
      font-family: system-ui, sans-serif;
      padding: 20px;
  }
  table {
      border-collapse: collapse;
      width: 100%;
  }

  th,
  td {
      border: 1px solid #1e1b1b;
      padding: 8px 12px;
      text-align: center;
  }

  th {
      background: #323336;
  }

  /* 色分け */
  .saas {
      background-color: #93c5fd;
  }

  /* 青 */
  .paas {
      background-color: #86efac;
  }

  /* 緑 */
  .iaas {
      background-color: #fde047;
  }

  /* 黄 */
  .onpre {
      background-color: #101010;
  }

  /* 赤 */





                  .LCcontainer_In {
                      width: 70%;
                      border: 0.14rem solid #99ccff;
                    margin: 0 auto;
                            /* ← これが中央揃え */
                  }





    inner-contexts{
            padding: 5rem;
    }